ArcGIS for js 分屏（vue项目）

一、引入依赖

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>

示例：