1. 首页
  2. 问答
  3. 使用ArcGIS Javascript API设置自定义底图的详细级别3.17

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

2016-09-06 82 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

相关问题

 相关问题