空间数据可视化：ArcGIS JavaScript API 二三维数据一体化

Posted 2020-07-10 GeoWin_CAU

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了空间数据可视化：ArcGIS JavaScript API 二三维数据一体化相关的知识，希望对你有一定的参考价值。

ESRI不愧为GIS业界巨头，从本科起就开始接触ArcGIS系列，桌面端从ArcMap 到 ArcPro，服务端从ArcIMS 到 ArcServer，无不体现了这个了不起的公司在与时俱进、不断创新。现在的一些列产品好多我都没有用过，像 portal，pro，webbuilder.........网络GIS 现在好像是只更新javascript了，GIS与计算机的关系，都被ESRI公司的产品体现的淋漓尽致。今天来劲，就看了下新的API，果然是集美貌与才华于一身的API……

先上个官方的案例，使劲点这里

算了，直接上代码……（每天进步一点点，最后你会发现……与梦想，越来越远！！！）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Get started with layers - 4.0</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
  <script src="https://js.arcgis.com/4.0/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    
    #layerToggle {
      top: 20px;
      right: 20px;
      position: absolute;
      z-index: 99;
      background-color: white;
      border-radius: 8px;
      padding: 10px;
      opacity: 0.75;
    }
  </style>

  <script>
    require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/TileLayer",
        "dojo/dom",
        "dojo/on",
        "dojo/domReady!"
      ],
      function(
        Map, SceneView, TileLayer, dom, on
      ) {

        /*****************************************************************
         * Create two TileLayer instances. One pointing to a
         * cached map service depicting U.S. male population and the other
         * pointing to a layer of roads and highways.
         *****************************************************************/
        var transportationLyr = new TileLayer({
          url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
          // This property can be used to uniquely identify the layer
          id: "streets",
          visible: false
        });

        var housingLyr = new TileLayer({
          url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
          id: "ny-housing",
          opacity: 0.9
        });

        /*****************************************************************
         * Layers may be added to the map in the map's constructor
         *****************************************************************/
        var map = new Map({
          basemap: "oceans",
          layers: [housingLyr]
        });

        /*****************************************************************
         * Or they may be added to the map using map.add()
         *****************************************************************/
        map.add(transportationLyr);

        var view = new SceneView({
          container: "viewDiv",
          map: map
        });

        /*****************************************************************
         * The map handles the layers' data while the view and layer views
         * take care of renderering the layers
         *****************************************************************/
        view.on("layerview-create", function(evt) {
          if (evt.layer.id === "ny-housing") {
            // Explore the properties of the population layer's layer view here
            console.log("LayerView for male population created!", evt.layerView);
          }
          if (evt.layer.id === "streets") {
            // Explore the properties of the transportation layer's layer view here
            console.log("LayerView for streets created!", evt.layerView);
          }
        });

        /*****************************************************************
         * Layers are promises that resolve when loaded, or when all their
         * properties may be accessed. Once the population layer has loaded,
         * the view will animate to it's initial extent.
         *****************************************************************/
        view.then(function() {
          housingLyr.then(function() {
            view.goTo(housingLyr.fullExtent);
          });
        });

        var streetsLyrToggle = dom.byId("streetsLyr");

        /*****************************************************************
         * The visible property on the layer can be used to toggle the
         * layer's visibility in the view. When the visibility is turned off
         * the layer is still part of the map, which means you can access
         * its properties and perform analysis even though it isn't visible.
         *******************************************************************/
        on(streetsLyrToggle, "change", function() {
          transportationLyr.visible = streetsLyrToggle.checked;
        });
      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <span id="layerToggle">
    <input type="checkbox" id="streetsLyr"> Transportation
  </span>
</body>
</html>

以上是关于空间数据可视化：ArcGIS JavaScript API 二三维数据一体化的主要内容，如果未能解决你的问题，请参考以下文章

如何将数据在arcgis用地图可视化显示

第十四章：ArcGIS三维分析

arcgis有没有3d可视化工具？在哪？怎么用

ArcGIS入门教程（8）——空间数据符号化

重大更新，ArcGIS API for JavaScript 4.10 强势来袭