我正在尝试设置一个网页，当用户从下拉列表中选择 map 时，该网页将显示 map 及其相关图例。我设法使页面具有我正在寻找的格式和设计，它甚至一次显示一张 map 。但是，我遇到的问题是我正在尝试创建一个 if 循环，该循环将根据用户在下拉菜单中选择的内容运行特定的公式。在我尝试在循环中使用它之前，我使用的公式非常有效，但现在它似乎根本不起作用，页面上唯一显示的是下拉菜单本身。我所有的格式、选项卡和 map 数据都不见了。我的一个 friend 说我可能需要在每次运行该函数后使用“destroy()”，然后使用“create()”来重新加载新数据，但我不确定该怎么做？我觉得我已经接近答案了，但似乎看不出我哪里出错了。我对这一切还很陌生，所以如果您能提供任何帮助和解释，我将不胜感激!
<!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>Lab 6</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<script src="https://js.arcgis.com/3.23/" data-dojo-config="async:true"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dojo/dom",
"esri/map",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"dojo/domReady!"
], function (
parser,
ready,
BorderContainer,
TabContainer,
ContentPane,
dom,
Map,
urlUtils,
arcgisUtils,
Legend,
Scalebar
)
function maplink(display){
var maplink;
if (display == "Chicago Youth"){
maplink = ready(function () {
parser.parse();
arcgisUtils.createMap("c63cdcbbba034b62a2f3becac021b0a8", "map").then(function (response) {
dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
var map = response.map;
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
var legendLayers = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map,
layerInfos: legendLayers
}, "legend");
legendDijit.startup();
});
});
});
else if (display == "USA Median"){
maplink = ready(function () {
parser.parse();
arcgisUtils.createMap("1e79439598494713b553f990a4040886", "map").then(function (response) {
dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
var map = response.map;
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
var legendLayers = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map,
layerInfos: legendLayers
}, "legend");
legendDijit.startup();
});
});
});
else if (display == "Topo"){
maplink = var topMap;
require(["esri/map", "dojo/domReady!"], function(topMap) {
map = new topMap("map", {
basemap: "topo",
center: [-95.71, 37.09],
zoom: 5
});
});
});
return maplink;}
</script>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica";
}
#header {
background-color: #E8E8E8;
height: 65px;
margin: 5px 5px;
}
#mainWindow {
width: 100%;
height: 100%;
}
#title {
padding-top: 2px;
padding-left: 10px;
font-size: 18pt;
font-weight: 700;
}
#subtitle {
font-size: small;
padding-left: 40px;
}
#leftPane {
background-color: #E8E8E8;
margin: 5px;
width: 25%;
}
#map {
margin: 5px;
padding: 0;
}
</style>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
</div>
<div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
<div data-dojo-type="dijit/layout/TabContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props= "title: 'Map Selection',selected:'true'">
<select id="maplink" data-dojo-type="dijit/form/Select">
<option value="Chicago Youth" selected >Chicago Youth Population</option>
<option value="USA Median">USA Median Household Income</option>
<option value="Topo">Topographic Map</option>
</select>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props= "title: 'Map Legend'">
<div id="legend"></div>
</div>
</div>
</div>
</body>
</html>最佳答案
我试图重新编写您的代码，但今天没时间了。我只是添加我目前的答案，也许它会对你有所帮助。 一句话-您确实需要销毁小部件，但是图例存在问题-它销毁了其引用节点。但我现在没有解决方法或解决方案。
无论如何，看看我能给你什么建议。希望你能明白我的想法。还有很多东西我会以其他方式实现，但我只是想改进您的代码，而不是从头开始。
require([
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dojo/dom",
"esri/map",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"dijit/registry",
"dojo/domReady!"
], function (
parser,
ready,
BorderContainer,
TabContainer,
ContentPane,
dom,
Map,
urlUtils,
arcgisUtils,
Legend,
Scalebar,
registry
) {
parser.parse()
ready(init)
const maps = {
'Chicago Youth': chikagoYouth,
'USA Median': usaMedian,
'Topo': topo
}
let legend
let scalebar
function createMap(response) {
//document.getElementById('map').innerHTML = ``;
if (legend) {
legend.destroy()
}
if (scalebar) {
scalebar.destroy()
}
dom.byId("title").innerHTML = response.itemInfo.item.title;
//dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet; not found it
var map = response.map;
scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
var legendLayers = arcgisUtils.getLegendLayers(response);
legend = new Legend({
map: map,
layerInfos: legendLayers
}, "legend");
legend.startup();
}
function chikagoYouth () {
console.log('Chicago Youth')
arcgisUtils.createMap("c63cdcbbba034b62a2f3becac021b0a8", "map").then(createMap);
}
function usaMedian () {
console.log('USA Median')
arcgisUtils.createMap("1e79439598494713b553f990a4040886", "map").then(createMap);
}
function topo () {
console.log('Topo')
// require(["esri/map", "dojo/domReady!"], function(topMap) {
// let map = new topMap("map", {
// basemap: "topo",
// center: [-95.71, 37.09],
// zoom: 5
// });
// });
}
function init() {
const mapSelect = registry.byId("maplink")
mapSelect.on('change', loadMap)
}
function loadMap(value) {
maps[value]()
}
});
</script>我测试了它，它以某种方式工作，但仅适用于第一次加载。所以代码还是有待完善。
祝你好运。如果我有时间，我会在接下来的几天编辑我的答案。
关于javascript - 如何使用 dijit/form/Select 更改网页上显示的 map ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49304510/