貌似加载有点慢啊！！
1 这是底图
2 这是加载geoserver中的地图效果
3源码
3.1 geoserver中的网络请求
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:countries&exceptions=application/vnd.ogc.se_inimage&srs=EPSG:3857&WIDTH=768&HEIGHT=370&BBOX=-8296780.798186172,5087648.60266133,-8218509.281222152,5165920.119625352
///地址填写geoserver图层预览的时候 网络请求中的地址
///然后把把bbbox换一下 src坐标换一下，貌似mapbox只支持3857坐标系
///srs=EPSG:3857
///BBOX={bbox-epsg-3857}
<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> -->
![[linux]快速入门](https://img-blog.csdnimg.cn/img_convert/f649601294108c42ee2d00ab98a2f20e.png)
