m-gis

地图SDK的使用

• 安装SDK基础库

  npm install m-gis
  

• 引入SDK基础库

  import Gis from 'm-gis'

• 创建基础实例

  const gis = new Gis({ container: "mapContainer", isScale: false, toolbarId: "mapToolbar", showTips: true, isShowClose: true })

  入参 container 指定地图渲染容器，默认值为 mapContainer

  入参 isScale 指定是否需要比例尺，默认值为 false

  入参 toolbarId 指定工具栏的ID选择器，用于事件绑定监听

  入参 showTips 指定是否开启鼠标跟随提示，默认值为 true

  入参 isShowClose 指定绘制面时是否展示关闭按钮，默认值为 true

  提供地图实例对象 gis.mapInstance 在外部进行使用

• 初始配置项修改

  Object.assign(Gis.MAP_INIT_OPTIONS, {
    // 地图初始化配置
    viewMode: '2D',
    zoom: 12,
    zooms: [2, 20],
    defaultCursor: 'move',
  })
  Object.assign(Gis.MARKER_ICON_OPTIONS, {
    // 点的风格配置
    size: [24, 36],
    image: 'https://file2.clipworks.com/clipworks/4f39500149264de474aa8fa4c67379d1/20221017/1597130b-8c32-4b46-9c2e-b915154d55d9',  // 标记点图标
    imageSize: [24, 36],
    imageOffset: [0, 0],
  })
  Object.assign(Gis.MARKER_ICON_OPTIONS, {
    // 面的风格配置
    strokeWeight: 2,  // 轮廓线宽度
    strokeColor: "#4C89FF",  // 轮廓线条颜色
    strokeOpacity: 0.9,  // 轮廓线透明度，取值范围 [0,1]
    fillColor: "#3278FF",  // 圆形填充颜色，使用 16 进制颜色
    fillOpacity: 0.28,  // 圆形填充透明度，取值范围 [0,1]
  })
  // 自定义信窗体
  Object.assign(Gis.infoWindowContent, infoWindowContentElement)

地图工具栏

• HTML结构

  <div class="m-toolbar m-toolbar-right m-tooltip" style="top: 15px;" id="mapToolbar">
    <button type="button" data-tooltip="加载行政区划">
      <img src="https://fe-1301391939.cos.ap-shanghai.myqcloud.com/yum/icon_district.png" width="20" height="20">
    </button>
    <button type="button" data-tooltip="添加点数据">
      <img data-id="marker" data-type="marker" src="https://fe-1301391939.cos.ap-shanghai.myqcloud.com/yum/icon_marker.png" width="20" height="20">
    </button>
    <button type="button" data-tooltip="添加线数据">
      <img data-id="polyline" data-type="polyline" src="https://fe-1301391939.cos.ap-shanghai.myqcloud.com/yum/icon_polyline.png" width="20" height="20">
    </button>
    <button type="button" data-tooltip="沿路划线">
      <img data-id="lineAlongTheRoad" data-type="polyline" src="https://fe-1301391939.cos.ap-shanghai.myqcloud.com/yum/icon_lineAlongTheRoad.png" width="20" height="20">
    </button>
    <button type="button" data-tooltip="添加圆形区域">
      <img data-id="circularArea" data-type="circle" src="https://fe-1301391939.cos.ap-shanghai.myqcloud.com/yum/icon_circle.png" width="20" height="20">
    </button>
    <button type="button" data-tooltip="添加面数据">
      <img data-id="polygon" data-type="polygon" src="https://fe-1301391939.cos.ap-shanghai.myqcloud.com/yum/icon_polygon.png" width="20" height="20">
    </button>
    <button type="button" data-tooltip="周边搜索">
      <img data-id="perimeterSearch" data-type="circle" src="https://fe-1301391939.cos.ap-shanghai.myqcloud.com/yum/icon_perimeterSearch.png" width="20" height="20">
    </button>
    <button type="button" data-tooltip="多边形选择">
      <img data-id="polySelect" data-type="polygon" src="https://fe-1301391939.cos.ap-shanghai.myqcloud.com/yum/icon_polySelect.png" width="20" height="20">
    </button>
    <button type="button" data-tooltip="距离量算">
      <img data-id="distanceMeasurement" data-type="distanceMeasurement" src="https://fe-1301391939.cos.ap-shanghai.myqcloud.com/yum/icon_distanceMeasurement.png" width="20" height="20">
    </button>
    <button type="button" data-tooltip="面积量算">
      <img data-id="areaMeasurement" data-type="measureArea" src="https://fe-1301391939.cos.ap-shanghai.myqcloud.com/yum/icon_areaMeasurement.png" width="20" height="20">
    </button>
    <button type="button" data-tooltip="等时圈">
      <img data-id="isochron" data-type="marker" src="https://fe-1301391939.cos.ap-shanghai.myqcloud.com/yum/icon_marker.png" width="20" height="20">
    </button>
  </div>

• 工具栏操作进行中

  document.addEventListener('toolbarActionEvent', ({ detail }) => {
    console.log('工具栏目操作进行中标识：'， detail.isToolbarPending)
  })

• 绘制结束的事件监听

  document.addEventListener('drawEndEmit', ({ detail }) => {
    console.log('业务数据：', detail)
  })

工具方法

• 标准 GeoJSON 特征集合数据上图

  const overlayLayer = gis.addGeoJSONToMap(geoJSON, overlay => {
    console.log('触发单击事件的覆盖物对象', overlay)
  })

  通过 overlay.getExtData() 获取当前覆盖物对象的 properties 数据

  通过 overlayLayer.hide() 和 overlayLayer.show() 来控制隐藏和显示

• 开启多边形编辑操作

  gis.openPolyEditor(polygon, feature => {
    console.log('编辑结束后的数据', feature)
  })

  入参 polygon 表示面的实例对象，即覆盖物对象

  说明：双击编辑对象结束编辑操作

• 判断目标面是否与集合面相交

  const isIntersect = gis.polygonIntersect(targetFeature, features)

  入参 targetFeature 表示目标面特征对象数据

  入参 features 表示不包含目标面特征对象的集合特征对象数据

• 设置面热力图

  gis.setMultiPolygonHeatmap(options, geoJSON, overlay => {
   console.log('触发单击事件的覆盖物对象', overlay)
  })

  入参 options 表示样式配置设置项

  {
   categoryField: '', // 分类字段
   colors: [{label: 'A类型', color: '#EFBB51',min: 720000, max: 820000}],
   fillOpacity: 0.5, // 填充透明度：0-1
   strokeColor: '', // 轮廓颜色
   strokeOpacity: '', // 轮廓透明度
   strokeWidth: '' // 轮廓宽度
  }

  入参 geoJSON 标准 GeoJSON 特征集合数据

• 点热力图

    gis.setHeatmap(options, data)

  入参 options 表示样式配置设置项

    {
      radius: 30, // 热力图中单个点的半径, 默认30
      gradient: '', //热力图的渐变区间,例{
                                // 0.4:'rgb(0, 255, 255)',
                               // 0.65:'rgb(0, 110, 255)',
                              // 0.85:'rgb(100, 0, 255)',
                             // 1.0:'rgb(100, 0, 255)'
                             // }
      opacity: [0, 0.8], //热力图透明度数组，取值范围[0,1]
      zooms: 支持的缩放级别范围，取值范围[3-18]
      max: 100 // 权重的最大值 其中max不填则取数据集count最大值
    }

  入参 data Array 坐标数据集 例子如下：

   [{lng: 116.405285, lat: 39.904989, count: 65},{}]

GeoJSON 数据结构

• 图示说明

  

• 特征对象

  {
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "", "coordinates": [],
    }
  }

• 特征集合

  {
    "type": "FeatureCollection",
    "properties": {},
    "features": []
  }

  features 表示由多个特征对象组成的集合