0

如下代码所示，我创建vector-tile-layers了一个样式功能。我要做的是使每个功能都是可点击的，这样当我单击特定功能时，会出现一个弹出窗口，其中显示一些信息。如下面的代码 2 部分所示，我创建了叠加层和弹出窗口，它们工作正常，如下面发布的图像所示。但我想将它链接到矢量平铺源的每个单个特征到地图侦听this.map.on 器，我希望当我单击下面发布的图像中显示的任何单元格时，会弹出一个显示有关该单元格的信息的弹出窗口，而不仅仅是位置。请让我知道我该如何实现

代码1：

public visualisePolygonsAsMVTTiles(zoneToken,siteId,threshold,visualisation_operation_id){
return new VectorTileLayer({
    source: new VectorTileSource({
        format: new MVT(),
        url: environment.LocalHostForMVTTileForZXYWS + zoneToken + "/" + siteId + "/" + threshold + "/" + visualisation_operation_id + "/{z}/{x}/{y}",
    }),
    opacity: .4,
    style: function (feature){
        // console.log("MVTTileAsFeature:",feature)
        let fillColor
        let strokeColor
        let text = ""
        if (feature.get(environment.KEY_OF_MVT_FEATURE_IS_TREATMENT) == true) {
            if (feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_TREATMENT) >= 0 && feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_TREATMENT) <= 12.5){
                text = feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_TREATMENT) + "%"
                fillColor = '#ff0000'
                strokeColor = '#000000'
            } else if (feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_TREATMENT) > 12.5 && feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_TREATMENT) <= 15) {
                text = feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_TREATMENT) + "%"
                fillColor = '#fd4900'
                strokeColor = '#000000'
            } else if (feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_TREATMENT) > 15 && feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_TREATMENT) <= 27.5) {
                text = feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_TREATMENT) + "%"
                fillColor = '#f66d00'
                strokeColor = '#000000'
            } else {
                console.log("ERROR. Unhandled condition")
            }
        } else if (feature.get(environment.KEY_OF_MVT_FEATURE_IS_BUFFER)  == true) {
            if (feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_BUFFER) >= 0 && feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_BUFFER) <= 12.5){
                text = feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_BUFFER) + "%"
                fillColor = '#ff0000'
                strokeColor = '#000000'
            } else if (feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_BUFFER) > 12.5 && feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_BUFFER) <= 15) {
                text = feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_BUFFER) + "%"
                fillColor = '#fd4900'
                strokeColor = '#000000'
            } else if (feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_BUFFER) > 15 && feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_BUFFER) <= 27.5) {
                text = feature.get(environment.KEY_OF_MVT_FOR_CELLS_REPRESENTATIVE_TO_BUFFER) + "%"
                fillColor = '#f66d00'
                strokeColor = '#000000'
            } else {
                console.log("ERROR. Unhandled condition")
            }
        }
        
        return new Style({
            fill: new Fill({
                color: fillColor
                }),
            stroke: new Stroke({
                color: strokeColor,
                lineDash: [1],
                width:1,
                }),
                text: new Text({
                font: 'Normal 12px Arial',
                text: ''+text,
                fill: new Fill({
                    color: '#000000'
                }),
                stroke: new Stroke({
                    color: '#000000',
                    width: 0
                }),
                })
            })
    }
    });
}

代码2：

    const container = document.getElementById('gridCellInfoPopupDiv');
    const content = document.getElementById('gridCellInfoPopup-content');
    const closer = document.getElementById('gridCellInfoPopup-closer');
    /**
     * Create an overlay to anchor the popup to the map.
     */
    const overlay = new Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
        duration: 250,
        },
    });
    closer.onclick = function () {
    overlay.setPosition(undefined);
    closer.blur();
        return false;
    };
this.map.on('singleclick', function (evt) {
        console.log(evt.coordinate)
        console.log(evt.originalEvent)
        console.log(evt.pixel)
        const coordinate = evt.coordinate;
        const hdms = toStringHDMS(toLonLat(coordinate));
        
        content.innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>';
        overlay.setPosition(coordinate);
    });
    this.map.addOverlay(overlay)
}

图片：

在此处输入图像描述

4

0 回答 0