1. 首頁
  2. 問答
  3. 使用ArcGIS Javascript API設置自定義底圖的詳細級別3.17

使用ArcGIS Javascript API設置自定義底圖的詳細級別3.17

2016-09-06 67 views
2

我試圖在使用ArcGIS Javascript API 3.17的幾個自定義底圖上實現詳細圖層（LOD）。其中一個用於較少細節，另外兩個用於更多細節，但覆蓋不同的區域。我遇到了問題，但頁面未加載（對於Firefox和IE）。任何人都可以看到我不是什麼？請注意，我在這裏使用了一些示例服務。另外，我在我的真實實施中添加了一些動態要素圖層，我沒有在這裏列出。使用ArcGIS Javascript API設置自定義底圖的詳細級別3.17

var map; 
var extent; 
var baseMapLayerPPT; 
var baseMapLayerPoly; 
var customLods = []; 
var loadCount = 0; 

require([ 
    "esri/geometry/Extent","esri/map", "esri/dijit/Search", "esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/domReady!" 
], function (Extent, Map, Search, DynamicMapServiceLayer, FeatureLayer, InfoTemplate) { 

    baseMapLayerPoly = new esri.layers.ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", { 
    displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] 
    }); 

    baseMapLayerPoly.on("load", addLods); 

    baseMapLayerPPT = new ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", { 
    displayLevels: [11, 12, 13, 14, 15 ], 
    //opacity : 0.75 
    }); 

    extent = new esri.geometry.Extent({ 
    "xmin":-91070.37,"ymin":7988806.64,"xmax":301214.62,"ymax":8227343.05, 
    "spatialReference":{"wkid":3297} 
    }); 

    // popuplate an array with zoom levels 
    function addLods(evt) { 
    customLods = customLods.concat(evt.layer.tileInfo.lods); 
    loadCount++; 
    if (loadCount === 2) { 
     initMap(); 
    } 
    } 

    // create the map and use the custom zoom levels 
    function initMap() { 
    map = new Map("mapDiv", { 
     center: [-150, -17], 
     zoom: 9, 
     lods : customLods 
    }); 
    map.on("extent-change", changeScale); 
    map.addLayers([baseMapLayerPoly,baseMapLayerPPT); 
    } 

    //Report which layer is being shown 
    function changeScale(evt) { 
    dom.byId("scale").innerHTML = "Level: <i>" + evt.lod.level; 
    if (evt.lod.level < 11) { 
     dom.byId("visibleLayer").innerHTML = "Layer: <i>Imagery</i>"; 
    } else if (evt.lod.level == 11) { 
     // both layers are loaded 
     dom.byId("visibleLayer").innerHTML = "<i>Both layers currently visible</i>"; 
    } else { 
     dom.byId("visibleLayer").innerHTML = "Layer: <i>Streets</i>"; 
    } 
    } 


});

來源

2016-09-06 user25976

+0

我覺得你的代碼是不完整的，功能'addLods'只調用一次，所以'initMap'不會被調用。請用正確的代碼編輯。 –

+0

你可以爲它創建jsfiddle ... –

+0

添加完整的代碼atleast ..以及HTML和所有.. –

回答

0

嗯，我在上面的代碼中觀察到的幾個誤區 -

  1. 在需要ArcGISTiledMapServiceLayer沒有提到。
  2. initMap();未被此行觸發 - baseMapLayerPoly.on("load", addLods);
  3. 關閉鬥提缺少map.addLayers([baseMapLayerPoly,baseMapLayerPPT);
  4. lods : customLods導致另一個錯誤
  5. map.on("extent-change", changeScale);是造成錯誤，因爲HTML是不存在...

後糾正以上問題以下是工作代碼： -

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> 
 
    <title>Simple Map</title> 
 
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css"> 
 
    <style> 
 
     html, 
 
     body, 
 
     #map { 
 
      height: 100%; 
 
      margin: 0; 
 
      padding: 0; 
 
     } 
 
    </style> 
 
    <script src="https://js.arcgis.com/3.17/"></script> 
 
    <script> 
 
     var map; 
 
     var extent; 
 
     var baseMapLayerPPT; 
 
     var baseMapLayerPoly; 
 
     var customLods = []; 
 
     var loadCount = 0; 
 

 
     require([ 
 
        "esri/geometry/Extent", "esri/map", "esri/dijit/Search", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/domReady!" 
 
       ], function(Extent, Map, Search, ArcGISTiledMapServiceLayer, DynamicMapServiceLayer, FeatureLayer, InfoTemplate) { 
 

 
        baseMapLayerPoly = new ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", { 
 
         displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] 
 
        }); 
 

 
        baseMapLayerPoly.on("load", addLods); 
 

 
        baseMapLayerPPT = new ArcGISTiledMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", { 
 
         displayLevels: [11, 12, 13, 14, 15], 
 
         //opacity : 0.75 
 
        }); 
 
        initMap(); 
 
        extent = new Extent({ 
 
         "xmin": -91070.37, 
 
         "ymin": 7988806.64, 
 
         "xmax": 301214.62, 
 
         "ymax": 8227343.05, 
 
         "spatialReference": { 
 
          "wkid": 3297 
 
         } 
 
        }); 
 

 
        // popuplate an array with zoom levels 
 
        function addLods(evt) { 
 
         customLods = customLods.concat(evt.layer.tileInfo.lods); 
 
         loadCount++; 
 
         if (loadCount === 2) { 
 
          initMap(); 
 
         } 
 
        } 
 

 
        // create the map and use the custom zoom levels 
 
        function initMap() { 
 
         map = new Map("map", { 
 
          center: [-150, -17], 
 
          zoom: 9//, 
 
          //lods: customLods 
 
         }); 
 
         //map.on("extent-change", changeScale); 
 
         map.addLayers([baseMapLayerPoly, baseMapLayerPPT]); 
 
         } 
 

 
         //Report which layer is being shown 
 
         function changeScale(evt) { 
 
          dom.byId("scale").innerHTML = "Level: <i>" + evt.lod.level; 
 
          if (evt.lod.level < 11) { 
 
           dom.byId("visibleLayer").innerHTML = "Layer: <i>Imagery</i>"; 
 
          } else if (evt.lod.level == 11) { 
 
           // both layers are loaded 
 
           dom.byId("visibleLayer").innerHTML = "<i>Both layers currently visible</i>"; 
 
          } else { 
 
           dom.byId("visibleLayer").innerHTML = "Layer: <i>Streets</i>"; 
 
          } 
 
         } 
 

 

 
        }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="map"></div> 
 
</body> 
 

 
</html>

希望這將幫助你:)

來源

2016-09-07 11:55:04

0

有與你有共同的代碼的幾個問題。正如Vikas指出的那樣，有一些語法錯誤。地圖會自動從更新縮放級別的第一層/底圖中加載，而不需要明確更新。如果你需要它與圖層不同，你可以從層獲得LOD，就像你正在嘗試的那樣，或者像下面這樣在javascript中創建它。您可以從服務頁面輕鬆獲取LOD的詳細信息。

var tilelods = [ 
    { 
    "level": 0, 
    "resolution": 156543.03392800014, 
    "scale": 5.91657527591555E8 
    }, 
    { 
    "level": 1, 
    "resolution": 78271.51696399994, 
    "scale": 2.95828763795777E8 
    }, 
    { 
    "level": 2, 
    "resolution": 39135.75848200009, 
    "scale": 1.47914381897889E8 
    }, 
    . 
    . 
    . 
    { 
    "level": 15, 
    "resolution": 4.77731426794937, 
    "scale": 18055.954822 
    } 
]; 
map = new Map("mapDiv", { 
    center: [-150, -17], 
    zoom: 9, 
    lods : tilelods 
});

確保你沒有重複關卡/ lods。

根據共享的代碼，您只需將ArcGISTiledMapServiceLayer添加到地圖即可。它不是底圖。如果您需要基本地圖，則需要按照此代碼段中所示添加它。

var map; 
 
     require(["esri/geometry/Extent", "esri/map", "esri/dijit/Basemap", "esri/dijit/BasemapLayer", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/domReady!"], 
 
       function(Extent, Map, Basemap, BasemapLayer, FeatureLayer, InfoTemplate) { 
 

 
      var baseMap = new Basemap({ 
 
       id: "CustomBaseMap", 
 
       layers : [ 
 
        new BasemapLayer({ url : "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", 
 
            displayLevels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }), 
 
        new BasemapLayer({ url : "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", 
 
            displayLevels: [11, 12, 13, 14, 15] })    
 
       ] 
 
      }); 
 
      
 
      map = new Map("map", { 
 
      center: [-150, -17], 
 
      zoom: 9//, 
 
      }); 
 
      map.setBasemap(baseMap) 
 
      
 

 
     });
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css"> 
 
<style> 
 
     html, 
 
     body, 
 
     #map { 
 
      height: 100%; 
 
      margin: 0; 
 
      padding: 0; 
 
     } 
 
    </style> 
 
    <script src="https://js.arcgis.com/3.17/"></script> 
 
<div id="map"></div>

來源

2016-09-07 14:09:55

相關問題

 相關問題