鸿蒙Next地图服务Map在露天矿山中的使用分享

背景： 无人驾驶露天矿山解决方案的开发是行业发展、政策推动、技术进步与经济效益追求的共同结果。传统露天矿山开采面临安全隐患大、劳动力短缺、管理难度高和成本上升等困境，而国家发改委等部门发布的《关于加快煤矿智能化发展的指导意见》《煤矿智能化建设指南（2021 年版）》等政策明确提出露天煤矿无人化运输等目标，为其开发提供有力导向。同时，5G、大数据、人工智能、车联网等新技术的成熟，为露天矿山无人驾驶提供了关键技术支撑。

由于矿山地形复杂，传统地图在矿区没有适配的地图显示，因此，我们需要通过采图设备采集高精地图数据，然后绘制自定义地图完成相关业务。接下来，我介绍一下使用Map kit展示高精地图的过程，本文只介绍静态展示，交互在今后介绍。 先看一下展示效果：

核心代码： 1.Map地图服务在page页面中使用,导入MapComponent组件，需要传入两个参数，mapOptions地图初始化参数，mapCallback回调函数

private mapOptions?: mapCommon.MapOptions;
private mapController?: map.MapComponentController;
private callback?: AsyncCallback<map.MapComponentController>;

build() {
  MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
    .width('100%').height('100%');
}

this.mapOptions = {
  mapType:mapCommon.MapType.NONE, //地图类型  NONE 空地图
  scaleControlsEnabled:true,  //是否展示比例尺，默认值为false
  alwaysShowScaleEnabled:true, //是否一直显示比例尺，只有比例尺启用时该参数才生效
  compassControlsEnabled:true, //是否展示指南针控件，默认值为true
  myLocationControlsEnabled:true, //是否展示定位按钮，默认值为false
  position: {
    target: {
      latitude: 0,
      longitude:0
    },
    zoom:15,
  },  //地图相机位置。  中心位置
  bounds: {
    northeast: {
      latitude: 0,
      longitude: 0,
    },
    southwest: {
      latitude: 0,
      longitude: 0,
    }
  },  //地图展示边界
  maxZoom:20, //地图最大图层，有效范围：[2, 20]
  minZoom:14
};

this.callback = async (err, mapController) => {
  if (!err) {
    this.mapController = mapController;
    // 添加自定义地图样式或其他设置
  }
};

2.地图的初始配置设置完成之后，我们开始解析geoJson数据，加载到地图中显示。首先定义我们想展示的覆盖物基本属性，MarkerOptions、MapCircleOptions、MapPolygonOptions、MapPolylineOptions、MapArcParams、ImageOverlayParams、BasePriorityOverlayParams等，然后通过mapController将其添加到地图中显示

//车道边界绘制
private addLaneLine(){
  MapModel.getLaneLine().then((polylines:Array<Array<GeoPoint>>)=>{
    for (let index = 0; index < polylines.length; index++) {
      let polyline:mapCommon.MapPolylineOptions ={
        points:polylines[index],   //折线的一组顶点
        color:0xff4a87a1,
        startCap: mapCommon.CapStyle.BUTT, //折线端点样式  
       //BUTT 线的两端是平行线 
       //ROUND 在线的两端延长半圆 
       //SQUARE 在线的两端延伸一个矩形。
        endCap: mapCommon.CapStyle.BUTT,
        geodesic: false,
        jointType: mapCommon.JointType.DEFAULT,  //折线的线条拐角样式
        visible: true,
        width: vp2px(3),   //折线的宽度，单位：px
        gradient: false
      }
      this.mapController?.addPolyline(polyline)
    }
  })
}
// 多边形绘制  圆点绘制
private addPolygon(){
  MapModel.getPolygon().then((areaPoints:Array<AreaPoints>)=>{
    areaPoints.forEach((areaPoint:AreaPoints)=>{
      let polygonOptions: mapCommon.MapPolygonOptions = {
        points: areaPoint.points,
        clickable: true,
        fillColor: 0x3300E2B7, //填充颜色
        geodesic: false,
        strokeColor: 0xff00E2B7,  //边框颜色
        jointType: mapCommon.JointType.DEFAULT,
        strokeWidth: vp2px(4),
        visible: true,
        zIndex: 2  //覆盖物的叠加顺序
      };
      this.mapController?.addPolygon(polygonOptions)
      for (let i = 0; i < areaPoint.points.length; i++) {
        let mapCircleOptions: mapCommon.MapCircleOptions = {
          center: areaPoint.points[i],
          radius: 1,
          clickable: true,
          fillColor: 0XFFFFC100,
          strokeColor: 0xFFFF0000,
          strokeWidth: 1,
          visible: true,
          zIndex: 15
        }
        this.mapController?.addCircle(mapCircleOptions);
      }
    })
  })
}
//绘制图片：比如 矿车、挖机 等有实际尺寸的设备
private addPoint(){
  let diggerPoint1: mapCommon.ImageOverlayParams = {
    position: {
      latitude: 0,
      longitude:0
    },
    image:$r('app.media.map_point'),
    width:6,
    height:10.5, //单位：米
    zIndex:10,
    bearing:163.156
  };
  this.mapController?.addImageOverlay(diggerPoint1);
}