如何解决阻止弹出模板在ArcGIS 4.16 Angular 10中显示多个功能
我在地图上集成了特定图层的弹出窗口。有时,poup显示分页(featureNavigation)多个数据。有时它无法显示数据,或者服务实际返回的数据不匹配。
var popupTrailheads = {
title: "ID: {ID}",content: this.getcustomcontent.bind(this),};
// Add layer special layer
this.layer_fifteen = new FeatureLayer({
url: `${this.esriURL}/15`,visible: true,outFields: ['*'],popupTemplate: popupTrailheads,});
getcustomcontent(feature) {
// The popup content will become here from angular service
return `<div>content</div>`;
}
我有几种方法可以解决此问题。 1)此图层的弹出窗口仅在特定的缩放级别启用。否则将不会显示弹出窗口。 2)在地图上的点击应仅触发一个点。 (我相信单击该图层会触发多个点,这就是它显示多个要素详细信息的原因。)
能否请您提出一个想法,如何在特定的缩放级别启用弹出窗口,或在地图上单击一次仅选择一项功能。
谢谢。
解决方法
因此,在某些条件下(例如视图的缩放级别),有多种方法可以启用弹出窗口。
在我为您制作的示例中,只有在缩放比例大于10时才打开弹出窗口。
<!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>PopupTemplate - Auto Open False</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.15/"></script>
<style>
html,body,#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
var populationChange;
require(["esri/Map","esri/views/MapView","esri/layers/Layer"],function (
Map,MapView,Layer
) {
var map = new Map({
basemap: "dark-gray"
});
var view = new MapView({
container: "viewDiv",map: map,zoom: 7,center: [-87,34]
});
var highlightSelect = null;
Layer.fromPortalItem({
portalItem: {
id: "e8f85b4982a24210b9c8aa20ba4e1bf7"
}
}).then(function (layer) {
map.add(layer);
var popupTemplate = {
title: "Population in {NAME}",outFields: ["*"],content: [{
type: 'fields',fieldInfos: [
{
fieldName: "POP2010",format: {
digitSeparator: true,places: 0
},visible: false
},{
fieldName: "POP10_SQMI",places: 2
}
},{
fieldName: "POP2013",places: 0
}
},{
fieldName: "POP13_SQMI",places: 2
}
}
]
}],};
layer.popupTemplate = popupTemplate;
function populationChange(feature) {
var div = document.createElement("div");
var upArrow =
'<svg width="16" height="16" ><polygon points="14.14 7.07 7.07 0 0 7.07 4.07 7.07 4.07 16 10.07 16 10.07 7.07 14.14 7.07" style="fill:green"/></svg>';
var downArrow =
'<svg width="16" height="16"><polygon points="0 8.93 7.07 16 14.14 8.93 10.07 8.93 10.07 0 4.07 0 4.07 8.93 0 8.93" style="fill:red"/></svg>';
var diff =
feature.graphic.attributes.POP2013 -
feature.graphic.attributes.POP2010;
var pctChange = (diff * 100) / feature.graphic.attributes.POP2010;
var arrow = diff > 0 ? upArrow : downArrow;
div.innerHTML =
"As of 2010,the total population in this area was <b>" +
feature.graphic.attributes.POP2010 +
"</b> and the density was <b>" +
feature.graphic.attributes.POP10_SQMI +
"</b> sq mi. As of 2013,the total population was <b>" +
feature.graphic.attributes.POP2013 +
"</b> and the density was <b>" +
feature.graphic.attributes.POP13_SQMI +
"</b> sq mi. <br/> <br/>" +
"Percent change is " +
arrow +
"<span style='color: " +
(pctChange < 0 ? "red" : "green") +
";'>" +
pctChange.toFixed(3) +
"%</span>";
return div;
}
view.popup.autoOpenEnabled = false; // <- disable view popup auto open
view.on("click",function (event) { // <- listen to view click event
if (event.button === 0) { // <- check that was left button or touch
console.log(view.zoom);
if (view.zoom > 10) { // <- zoom related condition to open popup
view.popup.open({ // <- open popup
location: event.mapPoint,// <- use map point of the click event
fetchFeatures: true // <- fetch the selected features (if any)
});
} else {
window.alert(`Popup display zoom lower than 10 .. Zoom in buddy! .. (Current zoom ${view.zoom})`);
}
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
有关只在弹出窗口中显示一个结果,您可以这样隐藏导航,
view.popup.visibleElements.featureNavigation = false;
现在,如果您真正想要的只是获得一个结果,那么我建议使用view
方法hitTest
,该方法只会获得各层的最高结果。您可以在点击处理程序内部执行此操作,并且仅在需要层的任何结果时打开。为此,您需要设置featFeatures: false
,并设置具有匹配项的功能。
仅作为注释,它可能会使用户检索所有可能的功能之一而感到古怪或困惑。我认为您的内容可能有问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。