如何使用dijit / form / Select更改网页上显示的地图？
[英]How to use a dijit /form/Select to change maps displayed on a webpage?
问题描述
我正在尝试建立一个网页，当用户从下拉列表中选择地图时，该网页将显示地图及其相关的图例。 我设法使页面具有想要的格式和设计，甚至一次只显示一张地图。 但是，我遇到的问题是我试图创建一个if循环，该循环将根据用户在下拉菜单中选择的内容运行特定的公式。 在尝试在循环中使用该公式之前，我使用的公式效果很好，但是现在它似乎根本不起作用，并且页面上唯一显示的是下拉菜单本身。 我所有的格式，标签和地图数据都消失了。 我的一个朋友说我可能需要在每次运行该函数后使用“ 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>
1 个解决方案
解决方案1
0 2018-03-15 18:16:57
我试图重新编写您的代码，但是今天没时间了。 我只补充目前的答案，也许会对您有所帮助。 一句话-您确实需要销毁小部件，但图例存在问题-它销毁了其参考节点。 但是我目前没有解决方法或解决方案。
无论如何，请看看我能为您提供的建议。 希望你能理解我的想法。 我还有很多其他方法可以实现，但我只是想改进您的代码，而不是从头开始。
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>
我测试了它，它以某种方式起作用，但仅适用于第一负载。 因此代码仍需改进。
祝好运。 如果有时间，我会在第二天编辑答案。
如何设置程序化dijit.form.select下拉菜单的样式
[英]How to style the drop down menu of a programmatic dijit.form.select
如何动态构造和设置dijit.form.select小部件的选项？
[英]How to dynamically construct and set options for dijit.form.select widget?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用dijit / form / TimeTextBox？
如何在`dijit / form / Select`中禁用选项的焦点？
如何使用不带表的Dojo Dijit select？
如何对dijit / form / ComboBox使用queryExpr
如何设置程序化dijit.form.select下拉菜单的样式
如何在Dojo中刷新dijit / form / Select的商店？
如何从dijit / form / select中删除所有选项？
如何设置dijit.form.Select的宽度？
如何动态构造和设置dijit.form.select小部件的选项？
如何禁用dijit.form.Select中的单个选项？
相关标签