Question

我希望能够在地图上使用多个图层。每种类型的功能一层。

在添加多项功能之前，如何在图层级别区分我的兴趣？

这是我的解决方案。

首先我定义了许多变量：

    private olMap: ol.Map;

    private olView: ol.View;

    private olSource: ol.source.OSM;

    private olLayer: ol.layer.Tile;

    // layers

    private trenchLayer: ol.layer.Vector;

    private cableLayer: ol.layer.Vector;

    // vector lines

    private vectorLineLayer: ol.layer.Vector;


    private trenchVectorLine: ol.source.Vector;

    private cableVectorLine: ol.source.Vector;

    // styles

    private cableStyle: ol.style.Style;

    private trenchStyle: ol.style.Style;

然后我初始化主地图：

    initOpenLayersMap() {

        // Workout the center.
        var center = this.transformGeometry(this.getCabinetGeoLocation());

        // Initialize the view, this can be changed during the runtime.
        this.olView = new ol.View({
            center: <any>center,
            zoom: this.zoom
        });

        this.olSource = new ol.source.OSM();

        this.olLayer = new ol.layer.Tile({
            source: this.olSource
        });
        this.olLayer.set('name', 'mainMap');
        // Initialize the map, on the element.
        this.olMap = new ol.Map({
            target: 'ol-map',
            layers: [this.olLayer],
            view: this.olView
        });
    }

然后我初始化其他地图图层：

        this.trenchVectorLine = new ol.source.Vector({});

        this.trenchStyle = new ol.style.Style({
            fill: new ol.style.Fill({ color: black }),
            stroke: new ol.style.Stroke({ color: black, width: 2 })
        });

        this.trenchLayer = new ol.layer.Vector({
            source: this.trenchVectorLine,
            style: this.trenchStyle
        });
        this.trenchLayer.set('name', 'trenchLayer');
        this.addLayerToMap(this.trenchLayer);

然后我添加要映射的所有资产：

    const trenches: ITrench[] = this.$dom
            .filterByType(this.$dom.dom.assetsOrdered, 'trench')
            .filter(c => !!c.geoShape);
        for (const asset of trenches)
            this.drawLine(asset.geoShape, asset.id, this.trenchVectorLine);

有些是标记，有些是行：

            // cables & trenches
    drawLine(geoShape: any, assetId: string, vectorLine: ol.source.Vector) {

        const latLongGeometry = this.transformGeometry(geoShape);

        const featureLine = new ol.Feature({ geometry: new ol.geom.LineString(<any>latLongGeometry) });

        featureLine.setProperties({ 'name': assetId });

        vectorLine.addFeature(featureLine);
    }

    drawMarker(geoLocation: [number, number], assetId: string, type: string, layerVector: ol.layer.Vector) {

        const latLongGeometry = this.transformGeometry(geoLocation);

        var geom = new ol.geom.Point(<any>latLongGeometry);

        var feature = new ol.Feature(geom);

        if (type == "cabinet") {
            feature.setStyle([this.cabinetStyle]);
        }
        else {
            feature.setStyle([this.potStyle]);
        }
        feature.setProperties({
            'id': 1234, 
            'name': assetId
        });

        if (assetId != null) {
            feature.setId(assetId);
        }

        layerVector['getSource']().addFeature(feature);
    }

一切似乎都有效。我希望我没有遗漏任何东西。

OpenLayers 3 - 我对图层和矢量感到困惑

0 个答案: