Настройка уровней детализации пользовательских базовых карт с помощью ArcGIS Javascript API 3.17

Я пытаюсь реализовать слои деталей (LOD) на нескольких настраиваемых базовых картах с помощью ArcGIS Javascript API 3.17. Один предназначен для меньшей детализации, а два других используются для большей детализации, но охватывают разные зоны. У меня возникают проблемы, но страница не загружается (для 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>";
    }
  }


});

javascript arcgis arcgis-js-api
person user25976    schedule 06.09.2016    source источник
comment
Я думаю, что ваш код не завершен, функция addLods вызывается только один раз, поэтому initMap не будет вызываться. Пожалуйста, отредактируйте, используя правильный код.   -  person T Kambi    schedule 07.09.2016
comment
вы можете создать для него jsfiddle ...   -  person Vikash Pandey    schedule 07.09.2016
comment
Добавьте хотя бы полный код ... вместе с HTML и всем ...   -  person Vikash Pandey    schedule 07.09.2016

Ответы (2)


arrow_upward
0
arrow_downward

Что ж, я заметил несколько ошибок в приведенном выше коде -

  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>

Надеюсь, это вам поможет :)

person Vikash Pandey    schedule 07.09.2016

arrow_upward
0
arrow_downward

Есть несколько проблем с кодом, которым вы поделились. Как указал Викас, есть несколько синтаксических ошибок. Карта автоматически обновляет уровни масштабирования, начиная с первого загруженного слоя / базовой карты, вам не нужно обновлять ее явно. Если вам нужно, чтобы он отличался от слоя, вы можете получить 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
});

Убедитесь, что вы не повторяете уровни / лоды.

В соответствии с предоставленным кодом вы просто добавляете 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>

person T Kambi    schedule 07.09.2016