使用 ArcGIS Javascript API 3.17 设置自定义底图的详细信息级别答案

【问题标题】：Set up levels of details for custom basemaps using ArcGIS Javascript API 3.17使用 ArcGIS Javascript API 3.17 设置自定义底图的详细信息级别
【发布时间】：2017-01-14 07:09:24
【问题描述】：

我正在尝试使用 ArcGIS Javascript API 3.17 在一些自定义底图上实现细节图层 (LOD)。一个用于较少细节，另外两个用于更多细节，但覆盖不同的区域。我遇到了问题，但是页面没有加载（对于 Firefox 和 IE）。谁能看到我没有的东西？请注意，我在这里使用了一些示例服务。此外，我在我的实际实现中添加了一些动态特征层，我没有在这里包含。

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>";
    }
  }


});

【问题讨论】：

我认为你的代码不完整，函数addLods只被调用一次，所以initMap不会被调用。请使用正确的代码进行编辑。
你可以为它创建jsfiddle吗...
至少添加完整的代码......连同 HTML 和所有......

标签： javascript arcgis arcgis-js-api

【解决方案1】：

好吧，我在上面的代码中发现了一些错误 -

在 require ArcGISTiledMapServiceLayer 中没有提到。
initMap(); 没有被这条线触发 - baseMapLayerPoly.on("load", addLods);
缺少关闭后备箱map.addLayers([baseMapLayerPoly,baseMapLayerPPT);
lods : customLods 导致另一个错误
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>

希望对您有所帮助:)

【讨论】：

【解决方案2】：

您共享的代码存在一些问题。正如 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 添加到地图中。它不是底图。如果你需要一张底图，你需要按照这个 sn-p 所示添加它。

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>

【讨论】：