Question

Openlayers矢量遮罩遮挡图标问题

1. Openlayers遮罩遮挡图标问题

问题：小比例尺下遮挡图标，地图放大，图标分析；

需求：想要小比例尺也实现图标和矢量图层的分离。

_.map(subTypeObj, function subtypefuc(featureProps) {
            let feature = new ol.Feature({
                geometry: new ol.geom.Point([parseFloat(featureProps["lgtd"]), parseFloat(featureProps["lttd"])]),
                obj_name: featureProps["stnm"],
                obj_code: featureProps["stcd"],
                center_x: parseFloat(featureProps["lgtd"]),
                center_y: parseFloat(featureProps["lttd"]),
                bas_name: featureProps["bsnm"],
                parentKey: fkey,
                parentName: fname,
                layer: subkey,
                detp_code: featureProps.detp,
                mainName: subName,
            });
            featuresArr.push(feature);
        })

        let pointVectorSource = new ol.source.Vector({
            features: featuresArr
        });

        // pointVectorSource.refresh({force:true});
        // pointVectorSource.refresh();
        // pointVectorSource.changed();

        let pointVectorLayer = new ol.layer.Vector({
            source: pointVectorSource,
            style: styleFunction,
            name: subkey,
            aliasName: subName,
            renderMode: 'image',
            parentKey: fkey,
            parentName: fname,
            strategies: [
                // new ol.Strategy.Fixed(),
                // new ol.Strategy.AnimatedCluster({
                //     distance: 45,
                //     animationMethod: ol.Easing.Expo.easeOut,
                //     animationDuration: 10
                // })
            ],
        });
        map.addLayer(pointVectorLayer);



/**
 *给地图设置样式
 *
 * @param {*} feature：待设置样式的地图feature要素
 * @returns 返回ol.style.Style对象
 */
function styleFunction(feature, resolution) {
    let map = getMap();
    
    let layername = feature.get("layer");
    let srcpath;
    if (layername) {
        srcpath = '/images/stimage/' + layername + '.svg';

    } else {
        srcpath = '/images/stimage/DDb.svg';
    }

    return new ol.style.Style({
        // image: new ol.style.Circle({
        //     radius: 5,
        //     fill: new ol.style.Fill({
        //         color: "#389BCD",
        //         opacity: 0.5
        //     })
        // }),

        image: new ol.style.Icon({
            //图标路径
            src: srcpath,
            anchor: [0.5, 1],
            anchorOrigin: "top-right", //锚点源
            anchorXUnits: "fraction", //锚点X值单位
            anchorYUnits: "pixels", //锚点Y值单位
            // anchor: [0.5, 60], //锚点
            scale: map.getView().getZoom() / 2,
            rotation: 0,        //旋转角度
            // sacle: 0.3,

            // size:[25,25],
            // offset:[0,0],
            // offsetOrigin: "top-right", //偏移原点
            // opacity: 0.75,

        }),
        text: new ol.style.Text({
            // text: height,
            textAlign: "left",
            offsetX: 5,
            fill: new ol.style.Fill({
                color: "#cd0500",
                opacity: 1
            }),
            stroke: new ol.style.Stroke({
                color: "#dd942e",
                width: 1
            }),
            font: " 14px SimHei"
        })
    });
}

Answer 1

这个是由于你的点符号固定了大小导致的，您可以尝试取消固定大小，随地图缩放。或者您也可以单独将符号作为一个layer添加到map最顶端

Comments

1.“取消固定大小，随地图缩放”是注释掉这行代码吧，scale: map.getView().getZoom() / 2,这样的话再小比例尺的时候图标会特别大；

---

2.“可以单独将符号作为一个layer添加到map最顶端”不现实，因为需求就是用矢量图层遮罩点图标的，点图标放到最上面，遮罩还起什么作用呢？