项目本来使用的是百度地图,但之后要放在内网,所以老大说要更换为超图,让我去研究。因为本人是菜鸟,而且网上关于超图的使用案例较少,所以我将其完整代码都放上了,希望能帮到你们一点小忙。
首先是按照官网的开发指南安装 | Vue-iClient-MapboxGL,按照步骤在main.js添加组件,但是启动时报出了异常,其中一个node_modules里文件代码段如下
return latOrLng
? {
...dms,
direction: latOrLng === 'lat' ? (value > 0 ? 'N' : 'S') : value > 0 ? 'E' : 'W'
}
: dms;
这个问题我是去https://github.com/SuperMap/vue-iclient,降到了10.1.1后能正常使用。
之后是地图展示,这一步我是按照地图组件 | Vue-iClient-MapboxGL的加载iServe地图来展示地图。直接将该页面下的代码负责即可。代码如下:
<template>
<sm-web-map :map-options="mapOptions"></sm-web-map>
</template>
<script>
export default {
data() {
return {
mapOptions: {
container: 'map', // container id
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tiles: [
'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'
],
tileSize: 256
}
},
layers: [
{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxzoom: 22
}
]
},
center: [120.143, 30.236], // starting position
zoom: 3 // starting zoom
}
};
}
};
</script>
地图可以展示后,还需要加一些标记点、道路高亮。此时就需要对其中mapOptions的style来进行操作。style中要标记点需要给sources和layers添加数据。
这时可以参考MapBoxgl的示例,我参考的是集合对象缓冲区分析。
示例中加载点的代码如下(示例源码的85-111行)
//加载点
var pointGeometryFetures = [];
for (i = 0; i < pointList.length; i++) {
pointGeometryFetures.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": pointList[i],
}
});
}
map.addLayer({
"id": "bufferPoint",
"type": "circle",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": pointGeometryFetures
}
},
"paint": {
"circle-radius": 6, /* 圆的直径,单位像素 */
"circle-color": "black", /* 圆的颜色 */
},
"filter": ["==", "$type", "Point"],
});
所以我将其手动添加到mapOptions的style中,添加完整个vue页面代码如下
<template>
<sm-web-map :map-options="mapOptions"></sm-web-map>
</template>
<script>
export default {
name: 'list',
data () {
return {
mapOptions: {
container: 'map', // container id
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tiles: [
'https://iserver.supermap.io/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}'
],
tileSize: 256
},
'geojson-test': {
type: 'geojson',
data: {
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[116.2143386597, 39.8959419733],
[116.2156351162, 39.8963250173],
[116.2182280292, 39.8968111885],
[116.2740019864, 39.8970124079],
[116.3103285499, 39.8970574832],
[116.3321510064, 39.8970392162],
[116.3377051439, 39.8973437531],
[116.3463089006, 39.8978391816],
]
}
}
},
'circle-test': {
type: 'geojson',
data: {
type: "FeatureCollection",
features: [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [116.2143386597, 39.8959419733],
},
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [116.2156351162, 39.8963250173],
},
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [116.2182280292, 39.8968111885],
},
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [116.2740019864, 39.8970124079],
},
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [116.3103285499, 39.8970574832],
},
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [116.3321510064, 39.8970392162],
},
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [116.3377051439, 39.8973437531],
},
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [116.3463089006, 39.8978391816],
},
}
]
}
}
},
layers: [
{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxzoom: 22
},
{
id: 'route',
type: 'line',
source: 'geojson-test',
layout: {
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": "red",
"line-width": 8
}
},{
id: 'Point',
type: 'circle',
source: 'circle-test',
paint: {
'circle-radius': 6, /* 圆的直径,单位像素 */
'circle-color': "black", /* 圆的颜色 */
},
"filter": ["==", "$type", "Point"],
}
]
},
center: [116.28094998209556, 39.897168019388474], // starting position
zoom: 12, // starting zoom
}
}
},
methods: {
},
mounted () {
}
}
</script>
<style scoped>
</style>