Question

当我合并2个地图级别（部门和Arrondissment）的边界颜色时，鼠标悬停对第2层（Arrondissment）做错了

Arrondissment Layer上的我的错误是这样的

悬停应该像

一样进行

为了合并边框颜色，我在Arrondissment标签上应用了以下逻辑：

1.Draw Arrondissment坐标绘制

2.Draw部门跟在他们后面（如叠加）

使部门透明（降低不透明度）

此程序很好地混合了边框，但是Hover on仍然按照部门级别进行。

这是svg矢量Map和每个地图块由坐标组成创建地图的代码是复杂而冗长的，这就是我不认为可以发布所有内容的原因

这是Main函数，它创建Bundary并为每个Map Map添加颜色

 //path
    for (var obj in mapObj.paths) {

        var rObj = R.path(pathData[mapObj.paths[obj].path]).attr(attr);
        //if url found the assign
        if(mapObj.paths[obj].url !=null){
            //rObj.attr({"href":mapObj.paths[obj].url});
            if(mapObj.paths[obj].url.indexOf("alert") > 0){
                rObj.attr({"href":mapObj.paths[obj].url});
            }
            else{
                rObj.dblclick(function(e){
                    loadMap(this.data("qStr"));

                });

                rObj.click(function(e){

                    showPopup(this,currX,currY);     
                    loadExternalData();
                });
            }
        }
        else{
            rObj.click(function(e){

                showPopup(this,currX,currY);     

            });
        }


        rObj.data("qStr", mapObj.paths[obj].url);
        rObj.data("key", mapObj.paths[obj].key);
        rObj.data("mType", mapObj.paths[obj].mType);
        rObj.data("type", mapObj.paths[obj].type);
        rObj.data("sTitle", mapObj.paths[obj].title);
        rObj.data("name", mapObj.name);
        rObj.data("showhide", "show");
        rObj.data("zoom", mapObj.zoom);
        rObj.data("parentId", mapObj.parentId);
        rObj.data("title", mapObj.title);
        rObj.color = Raphael.getColor();

        rObj.data("hoverFill", "#3e5f43");
        rObj.data("fill", "#fff");
        rObj.data("childId", mapObj.paths[obj].key);
        if(mapObj.paths[obj].cName=="city"){
            rObj.data("className",mapObj.paths[obj].cName);
            rObj[0].setAttribute('class', mapObj.paths[obj].cName);
        }
        else
        {
            rObj.data("className", mapObj.cName == "" ? mapObj.paths[obj].cName : mapObj.cName);
            rObj[0].setAttribute('class', mapObj.cName == "" ? mapObj.paths[obj].cName : mapObj.cName);
        }
        rObj.hover(animateOver, animateOut);
        rObj[0].id = mapObj.paths[obj].key;
        rObj[0].style.cursor = "pointer";

        rObj[0].setAttribute('title', mapObj.cName);
        rObj[0].setAttribute('data-toggle', "tooltip");
        rObj[0].setAttribute('data-placement', "left");

        if (mapObj.zoom == 1) {

            var box = rObj.getBBox();
            var currPaperPosition = panZoom.getCurrentPosition();
            var currPaperZoom = panZoom.getCurrentZoom();

            var currHeight = R.height * (1 - currPaperZoom * 0.1);

            rObj.animate({
                transform: "t" + xdif + "," + ydif + "s" + mapZoom
            }, 100);

        }

    }


}

我只需要将较低层的悬停属性放在上层。这可以通过Css和其他任何技术完成吗？

Answer 1

在谷歌地图或用于管理事件检查的组件中，如果部门的z-index高于与Arrondissment相关的部分...否则托管中的鼠标悬停事件形成错误的多边形..如果需要你可以根据你的需要通过setOption或类似的方式改变动态。

 yourPolygonObj.setOptions({ zIndex: 200 });

合并2个地图级别的边界颜色

1 个答案: