arcgis 实现分屏功能

置顶 Meng_优秀

于 2022-04-18 13:43:16 发布

阅读量1.2k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_54342099/article/details/124247611

版权

arcgis 实现分屏功能

利用arcgis api for javascript 4.16地图服务，实现地图分屏

<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.22/"></script>

    <script>
      require(["esri/Map", "esri/views/MapView", "esri/views/SceneView"], (Map, MapView, SceneView) => {
      //可以new多个Map,实现多地图比较
        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>