arcgis api for js 一次显示多个infowindow弹窗
featureLayer
因为在项目中遇到需要一次性显示多个弹窗,研究了近一个月完成了,但是还有不足的地方其中参考文件https://github.com/nickcam/PopupExtended
gitHub真的是个好东西
PopupExtended.js
主要下载的就是这个扩展文件
而且它本身的index.html也把实例写的很详细,一定要认真看例子。github对我来说,之前很陌生,看不懂关联的东西,也是子啊项目的逼迫下,摸索很多东西,所以我现在喜欢在github上查东西,你遇到的问题,踩得坑,基本在这个平台上都可以找到
首先你得layer要是featureLayer图层,因为我自己是这样写的,别的我不清楚
然后使用文档中的**new FeatureLayer(featureCollectionObject, options?)**创建featureLayer图层
var layerDefinition = {
"geometryType": "esriGeometryPoint",
"objectIdField": "Number",
"drawingInfo": {
"renderer": {
"type": "simple",
"symbol":null
//{
// "color": [0, 48, 161, 255],
// "size": 8,
// "type": "esriSMS",
// "style": "esriSMSCircle"
//}
}
},
"fields": [
{
"name": "Number ",
"alias": "Number ",
"type": "esriFieldTypeDouble"
}, {
"name": "Name ",
"alias": "Name ",
"type": "esriFieldTypeString "
}]
};
//组成featureLayer的JSON数据集。arcgis api官方文档上有
var featureCollection = {
"layerDefinition": layerDefinition,
"featureSet": {
"features": feature,
"geometryType": "esriGeometryPoint"
}
};
//这里就是你要显示的信息模板
var flTemplate = new PopupTemplate({
title: "泵房信息",
fieldInfos: [
{ fieldName: "Number", label: "编号:", visible: true },
{ fieldName: "Name", label: "名字:", visible: true },
{ fieldName: "AddressDetail", label: "具体位置:", visible: true }
]
});
//featureLayer图层
var featureLayer = new FeatureLayer(featureCollection, {
id: 'InfoFeatureLayer',
infoTemplate: flTemplate,
});
var featureCollection = {
"layerDefinition": layerDefinition,
"featureSet": {
"features": feature,//这里的feature是JSON类型的feature数据
"geometryType": "esriGeometryPoint"
}
map.addLayer(featureLayer);
feature示例,不能有用于本文档中(类似这种结果的feature的JSON数据)
var featuresJson = [
{
"attributes": {
"val": 5041,
"pscode": "150300000020",
"ObjectID": 0,
"pollutantcode": "A21026"
},
"geometry": {
"y": 3065908.71927414,
"spatialReference": {
"wkid": 4545
},
"x": 393946.35549645
}
},
{
"attributes": {
"val": 54471,
"pscode": "150600000082",
"ObjectID": 1,
"pollutantcode": "A21026"
},
"geometry": {
"y": 3065901.71927414,
"spatialReference": {
"wkid": 4545
},
"x": 393942.35549645
}
}
];
接下来就是使用PopupExtended的方法
首先你必须要引入这个PopupExtended.js文件
var extendedPopup = new PopupExtended({//这里面的参数可以修改,具体参照gitHub上的文档
extended: {
themeClass: "",
draggable: true,
defaultWidth: 250,
actions: [
],
hideOnOffClick: false,
multiple: true,
smallStyleWidthBreak: 768,
},
highlight: false,
}, dojo.create("div"));
// 加载到地图
extendedPopup.setMap(map);
map.infoWindow = extendedPopup;
feature.forEach(function (r) {
map.infoWindow.setFeatures([r]);
map.infoWindow.show(r.geometry);
});//显示弹窗
feature.forEach(function (r) {
map.infoWindow.hide(r);
}); //隐藏弹窗