引入
index.html
<!-- demo样式文件 -->
<link rel="stylesheet" href="https://minedata.cn/support/static/api/demo/js-api/zh/css/demo.css">
<!-- 引入MineMap API插件 -->
<link rel="stylesheet" href="https://minedata.cn/minemapapi/v2.1.0/minemap.css">
<script src="https://minedata.cn/minemapapi/v2.1.0/minemap.js"></script>
加载地图
map.vue
<div id="map2d"></div>
getMap2D() {
/**
* 全局参数设置
*/
window.minemap.domainUrl = 'https://minedata.cn'
window.minemap.dataDomainUrl = 'https://minedata.cn'
window.minemap.serverDomainUrl = 'https://minedata.cn'
window.minemap.spriteUrl =
'https://minedata.cn/minemapapi/v2.1.0/sprite/sprite'
window.minemap.serviceUrl = 'https://mineservice.minedata.cn/service/'
/**
* key、solution设置
*/
window.minemap.key = '16be596e00c44c86bb1569cb53424dc9'
window.minemap.solution = 12877
/**
* 初始化地图实例
*/
this.map = new window.minemap.Map({
container: 'map2d',
style:
'https://mineservice.minedata.cn/service/solu/style/id/12877' /*底图样式*/,
center: [116.46, 39.92] /*地图中心点*/,
zoom: 10 /*地图默认缩放等级*/,
pitch: 0 /*地图俯仰角度*/,
maxZoom: 17 /*地图最大缩放等级*/,
minZoom: 3 /*地图最小缩放等级*/,
projection: 'MERCATOR',
})
},
//此处error ‘minemap/map‘ is not defined no-undef报错解决
//解决方案，在vue脚手架中，全局变量，使用window来访问，例如： window.minemap,window.map
自定义图标
map.loadImage(
'https://minedata.cn/support/static/api/demo/js-api/zh/images/park.png',
function (error, image) {
if (error) throw error
// 添加自定义图标
map.addImage('park1', image)
}
)
//park1就是添加得图标名称
//map.loadImage()需要在map.load()后再调用
单一图层，加载多个图标
addSources(map) {
var center = map.getCenter()
map.loadImage(
'https://minedata.cn/support/static/api/demo/js-api/zh/images/park.png',
function (error, image) {
if (error) throw error
// 添加自定义图标
map.addImage('park1', image)
}
)
map.loadImage(
'https://minedata.cn/support/static/api/demo/js-api/zh/images/park.png',
function (error, image) {
if (error) throw error
// 添加自定义图标
map.addImage('park2', image)
}
)
//geojson数据
var jsonData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [center.lng + 0.03, center.lat + 0.02],
},
properties: {
poiCode: 1, //唯一标识，切换图标
title: '事件1',
eventtype: '1',
},
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [center.lng + 0.01, center.lat - 0.01],
},
properties: {
poiCode: 2,
title: '事件2',
eventtype: '1',
//icon: 'Provincial-15-1',
},
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [center.lng - 0.03, center.lat - 0.02],
},
properties: {
poiCode: 3,
title: '事件3',
eventtype: '2',
//icon: 'Provincial-15-2',
},
},
],
}
//向map添加数据源pointSource
map.addSource('pointSource', { //pointSource数据源名称
type: 'geojson',
data: jsonData,
})
},
addLayers(map) {
/* 单一图层显示多个图标,是通过icon-image绑定property中的的数据字段来实现的 */
map.addLayer({
id: 'symbolLayer',
type: 'symbol',
source: 'pointSource', //通过addSource添加的数据源
layout: {
'icon-image': 'park{eventtype}',
'text-field': '{title}',
'text-offset': [0, 0.6],
'text-anchor': 'top',
'icon-allow-overlap': true, //图标允许压盖
'text-allow-overlap': true, //图标覆盖文字允许压盖
},
paint: {
'text-color': '#ff0000',
'text-halo-color': '#000000',
'text-halo-width': 0.5,
},
minzoom: 7,
maxzoom: 17.5,
})
},
单击图标图层，聚焦
onMouseClick(e, map) {
//第一步，获取features
var features = map.queryRenderedFeatures(e.point, {
layers: ['symbolLayer'], //layer得id symbolLayer
})
if (!features.length) {
popup.remove()
return
}
var feature = features[0]
var coord = null
var poiList = map.listImages() //获取所有的img图标
console.log('poiList===', poiList)
if (feature.layer.id == 'symbolLayer') {
//设置选中得图标
map.setLayoutProperty('symbolLayer', 'icon-image', [
'case',
['==', ['get', 'poiCode'], feature.properties.poiCode],
'Tiananmen',
'park1',
])
/************
['==', ['get', 'poiCode'], feature.properties.poiCode],
'Tiananmen',
'park1',
]
这个类似三元表达式，feature.properties.poiCode当前点击得poi得唯一标识，和['get', 'poiCode']相等，图标使用'Tiananmen'，否则使用'park1'
*************/
console.log('feature.geometry====', feature.geometry)
console.log('feature.properties====', feature.properties)
coord = feature.geometry.coordinates
}
//popup
let popup = new window.minemap.Popup({
closeButton: true,
closeOnClick: true,
})
if (coord) {
popup
.setLngLat(coord)
.setHTML(
feature.properties.title +
'经纬度为：' +
coord[0].toFixed(6) +
',' +
coord[1].toFixed(6) +
', Helloworld'
)
.addTo(map)
}
}
切换底图，添加的 点、线、面图层消失
//解决方案
setStyle()设置 {diff: true,keepUserInfo: true}
that.map.setStyle(
'https://mineservice.minedata.cn/service/solu/style/id/' + command,
{
diff: true, //如果为false或者不写这个参数，将强制把原有style剔除，直接更新为传入的style配置， 包括用户通过addLayer手动添加的图层也会删除。如果为true的话，用户手动添加的图层会根据options.keepUserInfo的值决定是否保留下来，同时替换旧style样式为新设置的style样式， 但是如果新的style里和旧的style里有重叠的图层，就会将重叠的图层保留下来。
keepUserInfo: true,//此参数起作用的前置条件是options.diff的值为true。此参数的值如果为true，用户添加的图层会被保留下来， 同时替换旧style样式为新设置的style样式；如果为false或者不传入此参数，用户添加的图层会被删除，同时替换旧style样式为新设置的style样式
}
)