ArcGIS JavaScript for API（004）二三维联动双屏

最新推荐文章于 2022-12-03 19:51:16 发布

王建博09

最新推荐文章于 2022-12-03 19:51:16 发布

阅读量2.2k

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/wangjianbo09/article/details/124449716

版权

该博客介绍了如何通过JavaScript API在ArcGIS中创建一个二三维联动的地图应用。首先，创建MapView和SceneView并放入不同的div元素中，然后通过监听鼠标事件和设置viewpoint来同步两个视图。示例代码展示了具体的实现细节，确保了地图在二维和三维模式下的平滑切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二三维联动具体思路如下：

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>

显示效果如下图