如何使用純 Javascript 在豎琴 Gl 中擠出 geojson 多邊形？

Question

我們正在嘗試使用 harp gl 來替換 geojson 的自定義構建工具。 我想用擠壓多邊形技術來可視化我的多邊形。 來自 MapBox GL，我能夠在我的 geojson feature.properties 上有兩個屬性，稱為高度和基本高度。 所以我有一些用於測試的 GeoJson。 我似乎無法顯示擠出的多邊形。 我正在使用https://unpkg.com/@@here/harp.gl/dist/harp.js源在 Javascript 中寫這個。 我可以在我的 map 上渲染點。 只是不是這些多邊形。 （暫時忽略牆壁，我想先看地板）

我想要實現的（這就是它在 MapBox 中的樣子）：

function 用於重置建築數據：

    resetBuildings: function (data) {
        const dataProvider = new harp.GeoJsonDataProvider("buildings", data);
        var geoJsonBuildingDataSource;
        if (this.mapView.getDataSourceByName("buildings") == null) {
            geoJsonBuildingDataSource = new harp.VectorTileDataSource({
                dataProvider,
                name: "buildings",
                styleSetName: "geojson",
            });
            this.mapView.addDataSource(geoJsonBuildingDataSource);
        }
        else { geoJsonBuildingDataSource = this.mapView.getDataSourceByName("buildings") }
        const theme = {
            styles: {
                geojson: this.getStyleSet()
            },
        };
        geoJsonBuildingDataSource.setTheme(theme);

我的樣式集定義（？）：

    getStyleSet: function(){
        return [
            {
                when: ["==", ["geometry-type"], "Polygon"],
                technique: "extruded",
                renderOrder: 1000,
                constantHeight: true,
                color: "#FF0000",
                transparent: false,
                opacity: 0.8,
                lineWidth: 1,
                lineColor: "#003344",
                height: ["number", ["get", "base_height"], 10],
                floorHeight: ["number", ["get", "base_height"], 0]
            }
        ];
    }

我的測試 GeoJson: {"type":"FeatureCollection","features":[{"id":"6223a3f0-2835-4ad8-8456-3ccbefc0d19c","type":"Feature","properties":{"level":1,"name":"base","height":0.2,"base_height":0,"color":"grey","message":"","coordinates":null},"geometry":{"type":"Polygon","coordinates":[[[174.81047388530345,-36.909499151794726],[174.81050337403076,-36.90965937993286],[174.8107788255581,-36.909634193592254],[174.8107567090126,-36.9094734295196],[174.81047388530345,-36.909499151794726]]]}},{"id":"a0583d91-f038-4d6e-8e32-99db806982bc","type":"Feature","properties":{"level":0,"name":"Wall","height":5,"base_height":0.2,"color":"blue","message":"","coordinates":null},"geometry":{"type":"LineString","coordinates":[[174.8104752256997,-36.909499687675165],[174.81075804940883,-36.90947396540121],[174.81078083615245,-36.90963526535126],[174.81050337403076,-36.909658844053574],[174.81049399125453,-36.909598825525144],[174.81050337403076,-36.909658844053574],[174.81078083615245,-36.90963526535126],[174.81075804940883,-36.90947396540121],[174.8104752256997,-36.909499687675165]]}},{"id":"ec219095-8891-440b-9fea-2db9cf74c7e0","type":"Feature","properties":{"level":0,"name":"Wall","height":5,"base_height":0.2,"color":"blue","message":"","coordinates":null},"geometry":{"type":"LineString","coordinates":[[174.8104752256997,-36.90950022355558],[174.81048594887454,-36.909558634520565],[174.8104752256997,-36.90950022355558]]}},{"id":"628a2754-c1b6-43a4-975b-eb45084d3853","type":"Feature","properties":{"level":1,"name":"base","height":0.2,"base_height":0,"color":"grey","message":"","coordinates":null},"geometry":{"type":"Polygon","coordinates":[[[174.8106367829821,-36.909648805405354],[174.81078191913713,-36.90963279956284],[174.81078129891483,-36.909646601064004],[174.81085540198825,-36.90961396183521],[174.81089173813234,-36.90967024159831],[174.81086324249378,-36.90968392941179],[174.8108926788683,-36.909721493301554],[174.8109264286474,-36.90971335389515],[174.81098518665493,-36.909814312925626],[174.81076392360183,-36.90990054860199],[174.81063578104482,-36.90969921056885],[174.8106354709525,-36.909651008673336],[174.8106367829821,-36.909648805405354]]]}},{"id":"d5a1c90d-295e-463b-9530-7643e411ca38","type":"Feature","properties":{"level":0,"name":"Wall","height":5,"base_height":0.2,"color":"blue","message":"","coordinates":null},"geometry":{"type":"LineString","coordinates":[[174.81063687126533,-36.909700434854784],[174.81076318373476,-36.90989889886059],[174.8109779359279,-36.90981381148965],[174.81076318373476,-36.90989889886059],[174.81063687126533,-36.909700434854784]]}}]} {"type":"FeatureCollection","features":[{"id":"6223a3f0-2835-4ad8-8456-3ccbefc0d19c","type":"Feature","properties":{"level":1,"name":"base","height":0.2,"base_height":0,"color":"grey","message":"","coordinates":null},"geometry":{"type":"Polygon","coordinates":[[[174.81047388530345,-36.909499151794726],[174.81050337403076,-36.90965937993286],[174.8107788255581,-36.909634193592254],[174.8107567090126,-36.9094734295196],[174.81047388530345,-36.909499151794726]]]}},{"id":"a0583d91-f038-4d6e-8e32-99db806982bc","type":"Feature","properties":{"level":0,"name":"Wall","height":5,"base_height":0.2,"color":"blue","message":"","coordinates":null},"geometry":{"type":"LineString","coordinates":[[174.8104752256997,-36.909499687675165],[174.81075804940883,-36.90947396540121],[174.81078083615245,-36.90963526535126],[174.81050337403076,-36.909658844053574],[174.81049399125453,-36.909598825525144],[174.81050337403076,-36.909658844053574],[174.81078083615245,-36.90963526535126],[174.81075804940883,-36.90947396540121],[174.8104752256997,-36.909499687675165]]}},{"id":"ec219095-8891-440b-9fea-2db9cf74c7e0","type":"Feature","properties":{"level":0,"name":"Wall","height":5,"base_height":0.2,"color":"blue","message":"","coordinates":null},"geometry":{"type":"LineString","coordinates":[[174.8104752256997,-36.90950022355558],[174.81048594887454,-36.909558634520565],[174.8104752256997,-36.90950022355558]]}},{"id":"628a2754-c1b6-43a4-975b-eb45084d3853","type":"Feature","properties":{"level":1,"name":"base","height":0.2,"base_height":0,"color":"grey","message":"","coordinates":null},"geometry":{"type":"Polygon","coordinates":[[[174.8106367829821,-36.909648805405354],[174.81078191913713,-36.90963279956284],[174.81078129891483,-36.909646601064004],[174.81085540198825,-36.90961396183521],[174.81089173813234,-36.90967024159831],[174.81086324249378,-36.90968392941179],[174.8108926788683,-36.909721493301554],[174.8109264286474,-36.90971335389515],[174.81098518665493,-36.909814312925626],[174.81076392360183,-36.90990054860199],[174.81063578104482,-36.90969921056885],[174.8106354709525,-36.909651008673336],[174.8106367829821,-36.909648805405354]]]}},{"id":"d5a1c90d-295e-463b-9530-7643e411ca38","type":"Feature","properties":{"level":0,"name":"Wall","height":5,"base_height":0.2,"color":"blue","message":"","coordinates":null},"geometry":{"type":"LineString","coordinates":[[174.81063687126533,-36.909700434854784],[174.81076318373476,-36.90989889886059],[174.8109779359279,-36.90981381148965],[174.81076318373476,-36.90989889886059],[174.81063687126533,-36.909700434854784]]}}]}

先感謝您！

Answer 1

我想到了。 我使用了錯誤的數據源。 我需要使用 FeaturesDataSource。 我的樣式集定義也是錯誤的，我沒有將其設置為 map 主題。

我現在如何初始化 map：

        this.styleSet = this.getStyleSet();
        hereMapsHelper.geoJsonObj = JSON.parse(GeoJson);
        const canvas = document.getElementById(mapContainerId);
        var options = {
            canvas,
            theme: {
                extends: "https://unpkg.com/@here/harp-map-theme@latest/resources/berlin_tilezen_base.json",
                styles: {
                    geojson: this.styleSet,
                }
            }
        }
        var map = new harp.MapView(options);

function 用於建築物：

    resetBuildings: function (data) {
        var geoJsonBuildingDataSource;
        if (this.mapView.getDataSourceByName("buildings") != null) {
            var existingBuildingDataSource = this.mapView.getDataSourceByName("buildings")
            this.mapView.removeDataSource(existingBuildingDataSource);
        }
        geoJsonBuildingDataSource = new harp.FeaturesDataSource({
            geojson: data,
            name: "buildings",
            styleSetName: "geojson",
            maxGeometryHeight: 30000
        });
        this.mapView.addDataSource(geoJsonBuildingDataSource);
    },

Function 定義樣式集：

    getStyleSet: function () {
        const color = new THREE.Color("blue");
        const colorString = "#" + color.getHexString();
        return [
            {
                description: "geoJson property-based style",
                when: ["==", ["geometry-type"], "Polygon"],
                technique: "extruded-polygon",
                renderOrder: 1000,
                height: ["number", ["get", "base_height"], 10],
                floorHeight: ["number", ["get", "base_height"], 0],
                attr: {
                    color: colorString,
                    transparent: true,
                    opacity: 0.8,
                    boundaryWalls: false,
                    constantHeight: true,
                    lineWidth: 1,
                    lineColor: "#003344",
                    emissive: colorString,
                    emissiveIntensity: 0.45
                },
            },
            {
                description: "geoJson property-based style",
                when: ["==", ["geometry-type"], "Point"],
                technique: "circles",
                renderOrder: 2000,
                color: "#00FF00",
                size: 15,
            }
        ];
    },

這只會渲染地板，因為我還沒有定義牆壁的樣式。 但它的進步！