我使用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>
答案 0 :(得分：1)
始终建议我们使用webmap / item id而不是webmap json。
一旦你能够获得webmap id或item id，那么使用下面的代码就可以使用webmap -
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>
注意： - 按照其中的评论更新代码
希望这会对您有所帮助：）
答案 1 :(得分：0)
好吧，正如我在片段代码中看到的，webmap json并不包含infowindow / popup配置设置，因为我认为它在你的样本中不可见。
但推荐的方式是创建一个在线esri webmap，它将为您处理所有这些复杂情况。 并在webmap中添加您的esri地图服务器。之后配置图层的弹出窗口。
创建一个webmap是一个非常简单的过程，下面是执行此操作的步骤 -
来源网址： - http://doc.arcgis.com/en/arcgis-online/reference/what-is-web-map.htm
源步骤： - http://doc.arcgis.com/en/arcgis-online/get-started/get-started-with-maps.htm
如果您需要更多信息，请告知我，我会相应更新。
希望这会对您有所帮助：）
答案 2 :(得分：0)
你误用了“esri / urlUtils”模块，它主要是provides utility methods to work with content from ArcGIS.com。 因此，您无法使用其createMap方法使用本地arcgis服务器地图服务创建地图，而应通过arcgis.com发布操作图层，并获取地图项id.see how to Publish hosted feature layers by csv or featurelayer 。
1.使用“esri / urlUtils”模块创建地图
您可以使用“esri / urlUtils”模块的creatMap方法使用json或itemid创建地图。
1）通过json创建web地图，完整代码见
developers.arcgis.com/javascript/3/jssamples/ags_createwebmapitem.html
webmap.itemData = {
"operationalLayers": [{
"url": "xxx",// your map service goes here
"visibility": true,
"opacity": 0.75,
"title": "Soil Survey Map",
"itemId": "xx"//your map item id in arcgis.com
}],...
注意：JSON应在arcgis.com
中包含您的操作层项ID 2）按itemid（推荐）创建网络地图，完整代码见
developers.arcgis.com/javascript/3/jssamples/ags_createwebmapid.html
ready(function () {
parser.parse();
//if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
//arcgisUtils.arcgisUrl = "https://pathto/portal/sharing/content/items";
arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20", "map").then(function (response) {
//update the app
dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
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();
});
});
2.add popup，对于一些样本，请参阅developers.arcgis.com/javascript/3/jssamples/#search/Popup
如果要显示很多地图，则应使用featurelayer将数据添加到地图中。有关详细信息，请参阅ags js api文档。