zoukankan      html  css  js  c++  java
  • 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;  50%; height: 100%"></div>
        <div id="view2Div" style="float: left;  50%; height: 100%"></div>
      </body>
    </html>
  • 相关阅读:
    [书目20130415]改变:28天让自己内心强大
    [引]软件著作权登记申请所需文件
    [转]动软代码生成器之模板功能介绍
    [转]C# 冒泡排序你还会吗?
    [转]细说ASP.NET Forms身份认证
    [转]listview加载性能优化ViewHolder
    [转]App for Android (2) —— Python篇
    [转]sqlserver 创建分区表
    [转]c# 四舍五入、上取整、下取整
    常用 Java 静态代码分析工具的分析与比较
  • 原文地址:https://www.cnblogs.com/1gaoyu/p/15149288.html
Copyright © 2011-2022 走看看