天天看點

arcgis api for javascript之加載圖層arcgis api for javascript之加載圖層

版權聲明:本文為部落客原創文章,未經部落客允許不得轉載。 https://blog.csdn.net/gisdoer/article/details/82116422

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圖層等等

繼續閱讀