m-gis

v1.1.32

Published

10 months ago

An SDK package library based on the Gaode Map API

Downloads

0High
0Medium
0Low

adiu_1024

amap ECMAScript

地图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 表示由多个特征对象组成的集合

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

地图SDK的使用

地图工具栏

工具方法

GeoJSON 数据结构