zoukankan      html  css  js  c++  java
  • arcgis api for javascript之加载图层

    arcgis api for javascript之加载图层

    图层种类有很多种:查看api

    查看专题原文
    这里写图片描述
    这里写图片描述

    加载切片实例TileLayer

     <script>
        require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/TileLayer",
            "dojo/dom",
            "dojo/on",
            "dojo/domReady!"
          ],
          function(
            Map, SceneView, TileLayer, dom, on
          ) {
    
            /*****************************************************************
             定义图层
             *****************************************************************/
            var transportationLayer = new TileLayer({
              url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",//arcgisserver切片图层地址      
              id: "streets",// 唯一id,指map中添加的图层id是唯一的
              visible: false//默认是否显示 
            });
    
            var housingLayer = new TileLayer({
              url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
              id: "ny-housing",
              opacity: 0.9//透明度
            });
    
            /*****************************************************************
             * 初始化Map时直接添加
             *****************************************************************/
            var map = new Map({
              basemap: "oceans",
              layers: [housingLayer]
            });
    
            /*****************************************************************
             * 通过Map对象的方法添加图层
             *****************************************************************/
            map.add(transportationLayer);
    
            var view = new SceneView({
              container: "viewDiv",
              map: map
            });
    
            /*****************************************************************
             监听地图视图初始化过程
             *****************************************************************/
            view.on("layerview-create", function(event) {
              if (event.layer.id === "ny-housing") {
                // 判断当前加载的图层属性
                console.log("LayerView for male population created!", event.layerView);
              }
              if (event.layer.id === "streets") {
                //判断当前加载的图层属性
                console.log("LayerView for streets created!", event.layerView);
              }
            });
    
            /*****************************************************************
             监听图层加载完成事件,缩放到图层范围
             *****************************************************************/
            view.when(function() {
              housingLayer.when(function() {//es6语法
                view.goTo(housingLayer.fullExtent);
              });
            });
    
            var streetsLayerToggle = dom.byId("streetsLayer");
    
            /*****************************************************************
             *控制图层显示与隐藏
             *******************************************************************/
            on(streetsLayerToggle, "change", function() {
              transportationLayer.visible = streetsLayerToggle.checked;
            });
          });
      </script>

    不同图层具有独自的属性和方法以及适用的服务,按需进行选择。
    比如加载ogc标准的其他地图服务的wms,wmts切片服务,加载大量点数据的PointCloudLayer图层等等

    GIS开发https://www.giserdqy.comGIS,WebGIS,ArcGIS,OpenLayers,Leaflet,Geoserver,PostGIS,BIM,空间大数据,GeoAI技术分享
  • 相关阅读:
    不同数据类型在不同编译器下字节大小
    gbk/utf8/gb2312 编码中汉字字母数字所占字节数
    剑指Offer-12 矩阵中的路径
    螺旋矩阵(数组)问题(网易考点)
    C++ 多继承导致的指针偏移问题
    面试题--链表实现插入排序
    C++ 二叉树的深度优先遍历(前中后序)以及广度优先遍历
    (转)软连接和硬链接作用以及区别
    TCP/IP网络五层结构理解以及数据传输流程的理解图示
    常考知识点:进程与线程,多进程与多线程
  • 原文地址:https://www.cnblogs.com/dqygiser/p/10464009.html
Copyright © 2011-2022 走看看