diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue index 92609c7..bc17850 100644 --- a/src/components/MapBox.vue +++ b/src/components/MapBox.vue @@ -17,7 +17,8 @@ export default { lngLats: [], // 航线 所有航点 wayLngLats: [], // 航线 不包括起点航点 takeoffLngLats: [], // 航线 第一个航点 起点 最后一个航点 - GoogleRasterStyle: { + // 地图样式 + GoogleRasterStyle: { // mapbox官方样式 卫星地图 name: 'Mapbox Streets', sprite: this.$store.state.settings.host + '/Public/map/sprite', glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf', @@ -31,8 +32,36 @@ export default { }, layers: [{ id: 'GoogleRasterLayer', type: 'raster', source: 'google' }] }, - MapBoxglRasterStyle: 'mapbox://styles/mapbox/outdoors-v12', - MapBoxglSatellite: 'mapbox://styles/mapbox/satellite-streets-v12' + MapBoxglRasterStyle: 'mapbox://styles/mapbox/outdoors-v12', // mapbox官方样式 矢量街道 + MapBoxglSatellite: 'mapbox://styles/mapbox/satellite-streets-v12', // mapbox官方样式 卫星街道 + GaodeVectorStyle: { // 第三方 高德矢量 + name: 'Gaode Vector', + sprite: this.$store.state.settings.host + '/Public/map/sprite', + glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf', + version: 8, + sources: { + gaode: { + type: 'raster', + tileSize: 256, // 瓦片大小 256 512像素 + tiles: ['http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'] + } + }, + layers: [{ id: 'GaodeVectorLayer', type: 'raster', source: 'gaode' }] + }, + GaodeRasterStyle: { // 第三方 高德卫星 + name: 'Gaode Raster', + sprite: this.$store.state.settings.host + '/Public/map/sprite', + glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf', + version: 8, + sources: { + gaode: { + type: 'raster', + tileSize: 256, // 瓦片大小 256 512像素 + tiles: ['https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'] + } + }, + layers: [{ id: 'GaodeRasterLayer', type: 'raster', source: 'gaode' }] + } } }, computed: { @@ -73,7 +102,7 @@ export default { // 'line-width': 1 // 设置等高线宽度 // } // }) - // 3纬度 + // 3D地图 // this.map.addSource('mapbox-dem', { // type: 'raster-dem', // url: 'mapbox://mapbox.mapbox-terrain-dem-v1', @@ -117,7 +146,7 @@ export default { // 实例化map this.map = new mapboxgl.Map({ container: 'map', - style: this.GoogleRasterStyle, + style: this.GaodeRasterStyle, center: this.defaultLnglat, zoom: this.defaultZoom, pitch: 0,