最近在做项目的时候用到了MapImageLayer,主要是通过url调用人家写好的管线服务。
当时因为不知道怎么通过MapImageLayer实现点击管道出现管道信息的弹窗,因此又在MapImageLayer的基础上使用了FeatureLayer,由于MapImageLayer里url封装的是一个layer集合,它会返回多个子layer,这些layer依靠不同的id进行识别和区分,因此当子layer较多时,需要实例化的FeatureLayer就比较多;当时用FeatureLayer实例化这些子layer是为了实现弹窗功能,也就是FeatureLayer里面的popupTemplate属性,但是要使用这个属性,还需要按照子layer中返回的字段(Fields)进行弹窗内容模板的设计,如果子layer和子layer中的字段比较多的时候,代码数可能达到几千行;
后来我对MapImageLayer的API和Sample进行研究,发现其实只需要几十行代码就可以实现弹窗功能了:
1.使用mapView对点击事件进行监听
2.使用IdentifyParameters接收点击位置的参数,使用identify的identify方法进入总layer中进行参数的分析,this.url就是MapImageLayer中用到的url;
3.根据获得的字段,开始设计HTML模板,if语句是处理不同点击位置的,比如下面就是区分点击到了管道(有feature属性)和点击到了其它的位置(没有feature属性)
注:本代码中this.mapView和mapView交替使用,但是这是因为两者是一样的,原本mapView使用一个局部变量,this.mapView是获取到mapView的全局变量;viewDiv是一个div的id,这个div我用来展示地图。
this.mapView.on("click", (event) => {
document.getElementById("viewDiv").style.cursor = "wait";
// console.log(this.mapView, "000000000000000");
let query = new IdentifyParameters();
this.mapPoint = event.mapPoint;
query.geometry = event.mapPoint;
query.mapExtent = mapView.extent;
query.tolerance = 5;
query.returnGeometry = true;
query.layerIds = [0];
query.width = mapView.width;
query.height = mapView.height;
identify
.identify(this.url, query)
.then((res) => {
console.log(res, "222222");
// console.log(res.results[0].feature.attributes, "1111111111111111");
let results = res.results;
return results.map(function (result) {
if (result.feature) {
let feature = result.feature;
var data = result.feature.attributes;
var html = "";
for (var key in data) {
html += "<b>" + key + ": " + "</b>" + data[key] + "</br>";
// console.log(key, data[key])
}
// console.log(html)
feature.popupTemplate = {
// autocasts as new PopupTemplate()
title: "{CODE}",
content: html,
}; // feature.popupTemplate
return feature;
} else {
return {};
}
}); // results.map
}) // then
.then(this.showPopup);
}); // mapView.on
4.showPopup也是一个自定义方法:
showPopup(response) {
if (response.length > 0) {
console.log(this.mapView, "2222222222222222");
this.mapView.popup.open({
features: response,
location: this.mapPoint,
});
}
document.getElementById("viewDiv").style.cursor = "auto";
}