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);
                                            });  //隐藏弹窗      
                
                

这就是我做出来的东西

并不是这个代码下载直接可以使用的,还需要改一下,我只是把我实现的思路说了一下,想下载代码就可以实现的,请去看上述的github的链接。http://github.com/nickcam/PopupExtended

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LH的苏小花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值