arcgis分屏界面的实现
利用arcgis api实现将界面分成两部分，每部分放置一个地图，实现两个地图的联动
根据官方的实例修改得到
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Synchronize MapView and SceneView | Sample | ArcGIS API for JavaScript 4.20</title> <style> html, body { padding: 0; margin: 0; height: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.20/"></script> <script> require(["esri/Map", "esri/views/MapView", "esri/views/SceneView"], (Map, MapView, SceneView) => { const map = new Map({ center:[111.670801,40.818311], basemap: "satellite", }); const view1 = new MapView({ container: "view1Div", zoom:10, map: map, center:[111.670801,40.818311], snapToZoom: false }); const view2 = new MapView({ container: "view2Div", map: map, zoom:10, center:[111.670801,40.818311], constraints: { // Disable zoom snapping to get the best synchronization snapToZoom: false } }); const views = [view1, view2]; let active; const sync = (source) => { if (!active || !active.viewpoint || active !== source) { return; } for (const view of views) { if (view !== active) { view.viewpoint = active.viewpoint; } } }; for (const view of views) { view.watch(["interacting", "animation"], () => { active = view; sync(active); }); view.watch("viewpoint", () => sync(view)); } }); </script> </head> <body> <div id="view1Div" style="float: left; width: 50%; height: 100%"></div> <div id="view2Div" style="float: left; width: 50%; height: 100%"></div> </body> </html>
