二三维联动具体思路如下：
1，分别创建一个MapView和SceneView 然后分别放入两个div 中，div如何分布看自己的需求、
2，通过view.watch()函数监测 鼠标事件，并传给另一个view。
3，通过设置viewpoint 保持两个view的同步。
具体代码如下：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>二三维联动</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.23/"></script>
<script>
require(["esri/Map", "esri/views/MapView", "esri/views/SceneView"], (Map, MapView, SceneView) => {
const map = new Map({
basemap: "streets"
});
const view1 = new SceneView({
container: "view1Div",
map: map
});
const view2 = new MapView({
container: "view2Div",
map: map,
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>显示效果如下图
?
