-
安装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,
fillColor: "#3278FF",
fillOpacity: 0.28,
})
Object.assign(Gis.infoWindowContent, infoWindowContentElement)
-
标准 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,
strokeColor: '',
strokeOpacity: '',
strokeWidth: ''
}
入参 geoJSON
标准 GeoJSON 特征集合数据
-
点热力图
gis.setHeatmap(options, data)
入参 options
表示样式配置设置项
{
radius: 30,
gradient: '',
opacity: [0, 0.8],
zooms: 支持的缩放级别范围,取值范围[3-18]
max: 100
}
入参 data
Array 坐标数据集 例子如下:
[{lng: 116.405285, lat: 39.904989, count: 65},{}]