引入
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樣式
}
)
