m-gis v1.1.32
地图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
表示由多个特征对象组成的集合
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago