<template><div class="mapbox-maps"><div id="map"></div></div>
</template><script>
import mapboxgl from './../../public/mapbox-gl.js'
import './../../public/mapbox-gl.css' // 一定要引入样式， 否则有些东西显示不出来(比如导航控制条)
//import MapboxLanguage  from '@mapbox/mapbox-gl-language'let res = [];
const MAPTYPE = {NAVIMG: 'nav_img',NAVLBL: 'nav_lbl',NAVVEC: 'nav_vec'
}
export default {data: () => ({map: null}),methods: {getNavTileUrls(lyr) {const dict = {'nav_img': 'https://webst0${subdomain}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}','nav_lbl': 'https://webst0${subdomain}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}','nav_vec': 'http://webrd0${subdomain}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'}for (let i = 1; i < 5; i++) {let url = dict[lyr];url = url.split('${subdomain}').join(i);res.push(url)}return res;},initMap() {//mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';const BEIJING_COORDINATE = [116.39123296750768, 39.907180309385694];const style = {version: 8,name: "tianditu",//sprite: "mapbox://sprites/mapbox/streets-v8",//glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",sources: {// 天地图电子标记tianditu_cav: {type: 'raster',tiles: ['https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4','https://t1.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4',],tileSize: 256},// 天地图电子底图tianditu_vec: {type: 'raster',tiles: ['https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4','https://t1.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4',],tileSize: 256},// 天地图影像图tianditu_img: {type: 'raster',tiles: ['https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4'],tileSize: 256},tianditu_cia: {type: 'raster',tiles: ['https://t1.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4'],tileSize: 256}},layers: [{id: "tianditu_img",type: "raster",source: "tianditu_img",minzoom: 0,maxzoom: 22,layout: {"visibility": "none"}},{id: "tianditu_vec",type: "raster",source: "tianditu_vec",minzoom: 0,maxzoom: 22},{id: "tianditu_cav",type: "raster",source: "tianditu_cav",minzoom: 0,maxzoom: 22},{id: 'tianditu_cia',type: 'raster',source: 'tianditu_cia',minzoom: 0,maxzoom: 22}]}const map = new mapboxgl.Map({container: 'map',style: style,//center: [116.40355, 39.91737],zoom: 8,center: [-74.5447, 40.6892]});map.on('load', () => {map.addSource('wms-source', {'type': 'raster','tiles': [///地址填写geoserver图层预览的时候  网络请求中的地址///然后把把bbbox换一下  src坐标换一下，貌似mapbox只支持3857坐标系///srs=EPSG:3857///BBOX={bbox-epsg-3857}'http://192.168.10.10:8080/geoserver/ne/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&format=image/png&TRANSPARENT=true&STYLES&LAYERS=ne%3Acountries&exceptions=application%2Fvnd.ogc.se_inimage&srs=EPSG:3857&WIDTH=768&HEIGHT=370&BBOX={bbox-epsg-3857}',],'tileSize': 256});map.addLayer({'id': 'wms-layer','type': 'raster','source': 'wms-source','paint': {'raster-opacity': 1}},//'aeroway-line');});}},mounted() {this.initMap()}
}
</script><style lang="less">
.mapbox-maps {width: 100%;height: calc(100vh - 50px);position: relative;#map {width: 100%;height: 100%;position: absolute;top: 0;left: 0;bottom: 0;right: 0;.mapboxgl-canvas {outline: none;}// 隐藏mapbox商标.mapboxgl-ctrl-logo {display: none;}}
}
</style><!-- <template><div class="map_box"><div ref="map" class="map" id="map"></div></div>
</template><script>
import maxboxMap from './futureMap.js'export default {components: {},data() {return {map: null,}},computed: {},methods: {handleInitMap() {// 后期想传入一些值 比如areaCode 之类的 自动定位至改城市的中心let map = new maxboxMap({element: 'map'})},},watch: {},mounted() {this.handleInitMap()},
}
</script> -->