jsapi 3.x如何实现:可同时存在多个,不与图层绑定而是用代码弹出,样式可完全自定义的弹窗?

1.可同时存在多个(官网的要绑定到map的infowindow属性那就只能存在一个)
2.不需与图层绑定,而是用代码传入坐标弹出,也可以用代码关闭
3.内容的html与css完全可自定义(也就是jsapi只提供一个空白的div)

如果4.x有解决方案亦可

谢谢!!
已邀请:

mushroom

赞同来自:

binghuan123 - 80后

赞同来自:

可以自己扩展GraphicsLayer 和Graphic,使用dojo.declare声明自己的类,继承原生的类,重写_draw方法,继承GraphicsLayer 类的_draw方法写生成容器并定位的方法。继承Graphic类的_draw里面构建自己的内容。然后注意在自定义的layer里面控制图层平移或缩放的时候先隐藏元素,操作结束后重新计算位置并显示。
下面给个简单的例子,第一个是继承GraphicsLayer的重写方法,第二个是继承Graphic的重写方法
_draw: function (graphic, force){
            var map = this._map;
            var mapDiv = document.getElementById(map.id); 
            var visibleRect = map.__visibleRect;

            if (!mapDiv) return;
            var screenPoint = null;
            if (this.panExtent)
                screenPoint = esri.geometry.toScreenPoint(this.panExtent, map.width, map.height, graphic.geometry);
            else
                screenPoint = esri.geometry.toScreenPoint(map.extent, map.width, map.height, graphic.geometry);
            var width = graphic.getWidth();
            var height = graphic.getHeight();
            var x = screenPoint.x - width / 2;
            var y = screenPoint.y - height / 2;

            var pieDiv = graphic.containerDiv;

            if (pieDiv) {
                pieDiv.style.top = y + "px";
                pieDiv.style.left = x + "px";
                return;
            }
            pieDiv = document.createElement("div");
            pieDiv.id = graphic.id ? graphic.id : ("chartElement" + this.graphics.length);
            graphic.id = pieDiv.id;

            pieDiv.style.position = "absolute";

            pieDiv.style.top = y + "px";
            pieDiv.style.left = x + "px";

            pieDiv.style.width = graphic.getWidth() + "px";
            pieDiv.style.height = graphic.getHeight() + "px";
            pieDiv.style.margin = "0px";
            pieDiv.style.padding = "0px";
            mapDiv.appendChild(pieDiv);
            graphic.containerDiv = pieDiv;
            graphic._draw(pieDiv);
        }
 
//重写graphic的_draw方法
        _draw: function (container) {
            var labelHtml = '';
            var labelContent = container;
            if (this.attribute) {               
                labelHtml +='自定义的 根据属性拼接的html'
            }
            labelContent.innerHTML = labelHtml;

        },

cannel

赞同来自:

要回复问题请先登录注册