我们要做的的是左右分屏后两张地图同步对比,而且可以切换数据,实现的效果图是这样的,原博文地址:https://blog.csdn.net/weixin_42599077/article/details/103516695
<template>
<div class="hello" style="height:100%;width:100%;position:relative;">
<div class="map1" id="map1"></div>
<div class="map1" id="map2"></div>
<div class="datalist">
<el-radio-group v-model="radio" @change="handleSelectionChange">
<el-radio v-for="item in tableData" :key="item.address" :label="item.address">{{item.name}}</el-radio>
</el-radio-group>
</div>
</div>
</template>
<script>
import "../../../../../static/mapbox/css/map.css";
export default {
name: "Map",
components: {},
data() {
return {
tableData: [
{
date: "2016-05-03",
name: "矢量",
address:
TDTHEADER +
"/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
gpmToken
},
{
date: "2016-05-02",
name: "影像",
address:
TDTHEADER +
"/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
gpmToken
},
{
date: "2016-05-04",
name: "地形",
address:
TDTHEADER +
"/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
gpmToken
}
],
radio:
TDTHEADER +
"/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
gpmToken,
ishorizontal: true
};
},
watch: {},
methods: {
initmap() {
var map1_x;
var map1_y;
var map1_zoom;
var map2_x;
var map2_y;
var map2_zoom;
var map1_pitch;
var map2_pitch;
var map1_bear;
var map2_bear;
mapboxgl.accessToken =
"pk.eyJ1IjoibGkxMjMzMjEiLCJhIjoiY2pxbWM3dWFtM3JqMDQybGJiNDhiaHRwaSJ9.-KPrXTSeKfaRo6TrrheFIA";
window.map1 = new mapboxgl.Map({
container: "map1",
style: window.beforestyle,
zoom: 12,
center: [117.72, 39.05]
});
window.map2 = new mapboxgl.Map({
container: "map2",
style: window.afterstyle,
zoom: 12,
center: [117.72, 39.05]
});
// 拖拽
map2.on("drag", function() {
map2_x = map2.getCenter().lng;
map2_y = map2.getCenter().lat;
map1.setCenter([map2_x, map2_y]);
});
map1.on("drag", function() {
map1_x = map1.getCenter().lng;
map1_y = map1.getCenter().lat;
map2.setCenter([map1_x, map1_y]);
});
// 放大缩小
map2.on("zoom", function() {
map2_zoom = map2.getZoom();
map1.setZoom(map2_zoom);
});
map1.on("zoom", function() {
map1_zoom = map1.getZoom();
map2.setZoom(map1_zoom);
});
// 倾斜
map2.on("pitch", function() {
map2_pitch = map2.getPitch();
map1.setPitch(map2_pitch);
});
map1.on("pitch", function() {
map1_pitch = map1.getPitch();
map2.setPitch(map1_pitch);
});
// 旋转
map1.on("rotate", function() {
map1_bear = map1.getBearing();
map2.setBearing(map1_bear);
});
map2.on("rotate", function() {
map2_bear = map2.getBearing();
map1.setBearing(map2_bear);
});
},
handleSelectionChange(val) {
if (val) {
window.beforestyle.sources.vecTiles.tiles[0] = val;
window.map1.remove();
window.map2.remove();
this.initmap();
}
}
},
mounted() {
this.initmap();
}
};
</script>
<style scoped>
.map1 {
height: 100%;
width: 50%;
float: left;
}
.datalist {
width: 230px;
height: 30px;
position: absolute;
background: #fdfcfc;
left: 5px;
top: 5px;
}
</style>
var beforestyle = {
"data_id": "11001000347",
"name": "测试一会删",
"zoom": 3,
"center": [
108.420679,
36.772537
],
"layers": [{
"id": "707a5545758b97646194a04ef6fb9c0d",
"label": "啊啊1",
"type": "raster",
"source": "vecTiles",
"isUrl": false,
},
],
"version": 8,
"sources": {
vecTiles: {
type: "raster",
tiles: [
TDTHEADER +
"/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" + gpmToken
],
tileSize: 256
},
},
"metadata": {
"template": {
"type": "4",
"level": 0,
"des": "0代表全国,1代表省,2代表市,3代表县"
}
},
}
var afterstyle = {
"data_id": "11001000347",
"name": "测试一会删",
"zoom": 3,
"center": [
108.420679,
36.772537
],
"layers": [{
"id": "707a5545758b97646194a04ef6fb9c0d",
"label": "啊啊1",
"type": "raster",
"source": "tdtTiles",
"isUrl": false,
},
],
"version": 8,
"sources": {
tdtTiles: {
type: "raster",
tiles: [
TDTHEADER +
"/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" + gpmToken
],
tileSize: 256
},
},
"metadata": {
"template": {
"type": "4",
"level": 0,
"des": "0代表全国,1代表省,2代表市,3代表县"
}
},
}