arcgis for js——3.2D与3D地图联动显示

最新推荐文章于 2024-05-21 18:58:51 发布

遥感与地理信息

最新推荐文章于 2024-05-21 18:58:51 发布

阅读量686

点赞数

文章标签： javascript arcgis for js

本文链接：https://blog.csdn.net/qq_22170875/article/details/105245622

版权

1.html文件

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>2D与3D地图联动</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css"/>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://js.arcgis.com/4.14/"></script>
    <script src="index.js"></script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="overviewDiv">
        <div id="extentDiv"></div>
    </div>
  </body>
</html>

2.css文件


      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
      }

      #overviewDiv {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 300px;
        height: 200px;
        border: 1px solid black;
        z-index: 1;
        overflow: hidden; 
      }

      #extentDiv {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        z-index: 2;
      }

3.js文件

require([
    "esri/Map",
    "esri/views/SceneView",
    "esri/views/MapView",
    "esri/Graphic",
    "esri/core/watchUtils"
  ], function(Map, SceneView, MapView, Graphic, watchUtils) {
    // 创建一个地图作为主视图
    var mainMap = new Map({
      basemap: "hybrid",
      ground: "world-elevation"
    });

    // 创建一个地图作为右上角总览视图
    var overviewMap = new Map({
      basemap: "topo"
    });

    // 建立一个三维视图显示3D Map实例
    var mainView = new SceneView({
      container: "viewDiv",  //将三维地图放进对应div中
      map: mainMap,
      camera: {
        position: {
          spatialReference: {
            latestWkid: 3857,
            wkid: 102100
          },
          x: 925151,
          y: 5956309,
          z: 3871
        },
        heading: 203,
        tilt: 72
      }
    });

    //  建立一个二维视图渲染显示2D Map实例
    var mapView = new MapView({
      container: "overviewDiv", //将二维地图放进对应div中
      map: overviewMap,
      constraints: {
        rotationEnabled: false
      }
    });

    //移除默认的组件
    mapView.ui.components = [];

    mapView.when(function() {
      mainView.when(function() {
        setup();
      });
    });

    function setup() {
      //创建一个几何图形
      const extent3Dgraphic = new Graphic({
        geometry: null,
        symbol: {
          type: "simple-fill",
          color: [0, 0, 0, 0.5],
          outline: null
        }
      });
      mapView.graphics.add(extent3Dgraphic); //将矩形图形加到二维地图中
    
      watchUtils.init(mainView, "extent", function(extent) {
        //3D视图稳定不变时，调整总览视图位置
        if (mainView.stationary) {
          mapView.goTo({
            center: mainView.center,
            scale:
              mainView.scale * 2 *
              Math.max(
                mainView.width / mapView.width,
                mainView.height / mapView.height
              )
          });
        }
        extent3Dgraphic.geometry = extent;
      });
    }
  });

欢迎关注我的公众号。
在这里插入图片描述

遥感与地理信息

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
arcgis for js——3.2D与3D地图联动显示

1.html文件<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/> <title>2D与3D地图联动</titl...
复制链接

扫一扫