问题描述
通过变量“ popupCustom”创建的弹出窗口中的内容显示的是字符串,而不是引用指定的字段{IN_COUNTRY}。我遵循了ArcGIS JS API弹出教程,但看不到我的错误是无法获取与该字段关联的属性。这是代码-非常感谢您的帮助!
*注意:“ Cyber_Areas”变量中的要素图层网址指向所引用要素类的REST URL。
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Search widget with multiple sources - 4.6</title>
<style>
html,body,#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
<script>
require([
"esri/Map","esri/views/MapView","esri/widgets/BasemapToggle","esri/widgets/Legend","esri/layers/TileLayer","esri/layers/FeatureLayer","esri/widgets/Search","esri/widgets/LayerList","esri/PopupTemplate","dojo/on","dojo/domready!"
],function(
Map,MapView,BasemapToggle,Legend,TileLayer,FeatureLayer,Search,LayerList,PopupTemplate,on
) {
var Cyber_Areas = new FeatureLayer({
url: "*inserturl*",outFields: ["IN_COUNTRY"],popupTemplate: popupCustom
});
var map = new Map({
basemap: "osm"
});
map.add(Cyber_Areas);
var view = new MapView({
container: "viewDiv",map: map,center: [-87.172865,34.077613],// lon,lat
zoom: 16
});
var searchWidget = new Search({
view: view,popupOpenOnSelect: false
});
view.ui.add(searchWidget,{
position: "top-left",index: 0
});
var popupCustom = searchWidget.on('select-result',function(evt){
//console.info(evt);
view.popup.open({
location: evt.result.feature.geometry,// location of the click on the view
title: "Service Availability:",// title displayed in the popup
content: "<p><b>{IN_COUNTRY}"
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
解决方法
在您的代码中,您正在混合弹出模板值和何时显示它。那是两件事。
首先,您没有正确设置图层的弹出模板。它应该是PopupTemplate
。
在我看来,在您编写的代码中,图层定义应该是这样的,
var Cyber_Areas = new FeatureLayer({
url: "*inserturl*",popupTemplate: {
outFields: ["IN_COUNTRY"],title: "Service Availability:",content: "<p><b>{IN_COUNTRY}</b></p>"
}
});
现在,如果您不希望弹出窗口具有默认行为(在功能上单击鼠标左键),则无法像这样禁用它,
view.popup.autoOpenEnabled = false; // <- disable view popup auto open
然后您可以在任何需要的地方打开它,
view.popup.open({ // <- open popup
location: evt.result.feature.geometry,// <- use map point of the event result
fetchFeatures: true // <- fetch the selected features (if any)
});
您必须了解,在弹出模板的内容中使用的字段与图层相关。这就是为什么我在视图的弹出窗口中设置以获取结果。