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

2025-06-25
北京
本文字数：2189 字
阅读完需：约 7 分钟

背景： 无人驾驶露天矿山解决方案的开发是行业发展、政策推动、技术进步与经济效益追求的共同结果。传统露天矿山开采面临安全隐患大、劳动力短缺、管理难度高和成本上升等困境，而国家发改委等部门发布的《关于加快煤矿智能化发展的指导意见》《煤矿智能化建设指南（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;    // 添加自定义地图样式或其他设置  }};</map.mapcomponentcontroller>

复制代码

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);}</areapoints></array<geopoint>