我已经使用arcgis javascript api示例在网络上显示了我的地图。在示例中，它显示了一个弹出窗口，但在我这边却没有。现在我想添加弹出窗口。我希望当用户单击不同类型的土壤时，将打开一个弹出窗口并显示图层的属性
<!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>Create web map from JSON</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css" />
<link rel="stylesheet" href="css/layout.css"/>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/dom",
"esri/map",
"esri/geometry/Extent",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"dojo/domReady!"
], function(
parser,
ready,
BorderContainer,
ContentPane,
dom,
Map,
Extent,
urlUtils,
arcgisUtils,
Legend,
Scalebar
) {
ready(function(){
parser.parse();
var webmap = {};
webmap.item = {
"title":"Soil Map",
"snippet": "This map shows the Soil types",
"extent": [[73.94251383600005, 31.02571637300008],[74.05297753900004, 31.11529292900019]]
};
webmap.itemData = {
"operationalLayers": [{
"url": "http://localhost:6080/arcgis/rest/services/Soil_Maps/soil_map/MapServer",
"visibility": true,
"opacity": 0.75,
"title": "Soil Survey Map",
}],
"baseMap": {
"baseMapLayers": [{
"opacity": 1,
"visibility": true,
"url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"
},{
"isReference": true,
"opacity": 1,
"visibility": true,
"url": "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
}],
"title": "World_Terrain_Base"
},
"version": "1.1"
};
dom.byId("title").innerHTML = webmap.item.title;
dom.byId("subtitle").innerHTML = webmap.item.snippet;
arcgisUtils.createMap(webmap,"map").then(function(response){
var map = response.map;
//add the scalebar
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
//add the legend. Note that we use the utility method getLegendLayers to get
//the layers to display in the legend from the createMap response.
var legendLayers = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map,
layerInfos: legendLayers
},"legend");
legendDijit.startup();
});
});
});
</script> </head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
<div id="subtitle"></div>
</div>
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
<div id="legend"></div>
</div>
</div>
</body>
</html>最佳答案
始终建议我们使用webmap / item id代替webmap json。
一旦您能够获取网络地图ID或商品ID，然后使用以下代码即可使用网络地图-
require([
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/dom",
"esri/map",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"dojo/domReady!"
], function(
parser,
ready,
BorderContainer,
ContentPane,
dom,
Map,
urlUtils,
arcgisUtils,
Legend,
Scalebar
) {
ready(function(){
parser.parse();
//***** change webmapid only
arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20","map").then(function(response){
var map = response.map;
//add the scalebar
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
//add the legend. Note that we use the utility method getLegendLayers to get
//the layers to display in the legend from the createMap response.
var legendLayers = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map,
layerInfos: legendLayers
},"legend");
legendDijit.startup();
});
});
});<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<link rel="stylesheet" href="https://developers.arcgis.com/javascript/3/samples/ags_createwebmapid/css/layout.css">
<script src="https://js.arcgis.com/3.20/"></script>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
<div id="legend"></div>
</div>
</div>
</body>注意：-根据其中的注释更新代码
希望这对您有帮助:)
关于javascript - 网络 map 上的弹出窗口，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44451488/