我正在尝试使用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>";
}
}
});
答案 0 :(得分：0)
好吧，我在上面的代码中发现了一些错误 -
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>
希望这会对您有所帮助：）
答案 1 :(得分：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>