一、引入依赖
import {onMounted, ref} from "vue";
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import WebTileLayer from "@arcgis/core/layers/WebTileLayer";二、页面布局
<template><div class="container"><div id="view1Div"><div class="mapLeftIconContainer"></div></div><div id="view2Div"><div class="mapRightIconContainer"></div></div></div>
</template>样式：
<style lang="less" scoped>.container {max-width: 100%;height: 97%;display: flex;
}#view1Div {height: 100vh;width: 50%;background-color: rebeccapurple;// height: calc(100vh - 80px);flex: 1;border-right: 1px solid gray;position: relative;
}#view2Div {height: 100vh;width: 50%;background-color: rgb(153, 112, 51);// height: calc(100vh - 80px);flex: 1;position: relative;
}</style>
三、代码
<script setup>
***
***let map1 = {};
let map2 = {};
let view1 = {};
let view2 = {};
let zoom = {};
let center = [];
let views = [];onMounted(()=>{//获取底图let layer = getBaseLayer();createMapAndView(layer);splitTwoView();syncView();
});
// 创建容器和视图
function createMapAndView(layers){console.log("layers",layers);map1 = new Map({basemap: {baseLayers: [layers[0]],referenceLayers:[layers[1]]}});view1 = new MapView({// 长春坐标系center:[125.331345,43.8328],// 初始层级zoom:10,container:"view1Div",map:map1,constraints: {minZoom: 10,// 最小层级maxZoom: 19 // 最大层级}});map2 = new Map({basemap: {baseLayers: [layers[0]],referenceLayers:[layers[1]]}});view2 = new MapView({// 长春坐标系center:[125.331345,43.8328],// 初始层级zoom:10,container:"view2Div",map:map2,constraints: {minZoom: 10,// 最小层级maxZoom: 19 // 最大层级}});views = [view1, view2];
}// 获取基本图层
function getBaseLayer(){let layer = [];// 地图const dzLayer = new WebTileLayer({urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']});layer.push(dzLayer);// 标注const dzbzLayer = new WebTileLayer({urlTemplate: "https://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']});layer.push(dzbzLayer);return layer;}//双屏联动
function splitTwoView(){views.forEach((view) => {// 定义一个范围变量let fullextent = null// 设置鼠标滚轮事件view.on('mouse-wheel', (e) => {// 延迟获取范围的函数window.setTimeout(() => {// 获取操作图层的范围fullextent = view.extent// 遍历所有视图来设置这个范围views.forEach((nview) => {nview.extent = fullextent})}, 100)});// 设置鼠标拖拽事件view.on('drag', (e) => {// 获取操作图层的范围fullextent = view.extent// 遍历所有视图来设置这个范围views.forEach((nview) => {nview.extent = fullextent})});});
};//同步视图1的缩放复位按钮
function syncView(){views.forEach((view) => {let fullextent = null;window.setTimeout(() => {// 获取操作图层的范围fullextent = view.extent// 遍历所有视图来设置这个范围views.forEach((nview) => {nview.extent = fullextent})}, 300)});
}</script>示例：
