在Harp-GL地球仪上放置标记

Question

我试图用这里和harp.gl构建一个带有标记(比如谷歌地图上的标记)的地球仪。这些标记是SVG-图像，需要从它们的文件中加载。它们还需要是可点击的，并附加一些元数据，比如ID。

所以我的问题是：

• 显示这些标记的最佳方法是什么？
• 我怎么才能让他们点击？(光线投射？)
• 有没有办法附加一些元数据？

提前谢谢！

编辑：澄清，这些标记是存储在SVG-文件中的SVG-图像，需要作为标记加载和显示.

数据是由API提供的，因此我尝试将其添加为它自己的点，就像立方体示例一样，并尝试将其转换为GeoJSON和FeatureSets：

    const geojsonPoints: {type:  "FeatureCollection", features: Feature[]} = {  type: "FeatureCollection",
        features: [
        ]
    };
    for(let i = 0; i < locationdata.length; i++) {
        geojsonPoints.features.push({
            type: "Feature",
            id: i.toString(),
            geometry: {
                type: "Point",
                coordinates: [locationdata[i]["lonlat"][1], locationdata[i]["lonlat"][0]]
            },
            properties: locationdata[i]
        })
    }
    const features: MapViewFeature[] = [];
    for(let i = 0; i < locationdata.length; i++) {
        features.push(new MapViewPointFeature([locationdata[i]["lonlat"][1], locationdata[i]["lonlat"][0]], locationdata[i]))
    }

当我尝试添加GeoJSON层时，我得到一个无法加载decoder.min.js的错误，但是我这样配置它：

const mapView = new MapView({
        canvas: this.canvas,
        projection: sphereProjection,
        theme: {
            extends: pluginpath + "/js/harp.gl-example/dist/resources/berlin_tilezen_base_globe.json",
            styles: {
                geojson: this.getStyleSet()
            }
        },
        decoderUrl: pluginpath + "/js/harp.gl-example/dist/decoder.bundle.js"
    });

pluginpath是一个包含前缀的变量，因为js-文件夹并不像所有示例一样直接位于根目录中。

总之:我需要将API提供的数据作为标记来显示。这些标记应该是前面提到的SVG-图像，这些标记应该是可点击的。

编辑2:我尝试修改这个示例以显示SVG标记。第一步起作用了，我只是在需要的位置显示示例中的多维数据集，但无法用标记替换多维数据集。我使用了three.js网站的这两份文档，但它们对我没有用：

• https://threejs.org/docs/#examples/en/renderers/SVGRenderer
• https://threejs.org/docs/#examples/en/loaders/SVGLoader

我没有收到任何错误，SVG只是没有出现。

Answer 1

不支持直接加载svg，但可以使用base64编码的svg映像，例如：

const imageString =
"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgaWQ9Imx1aS1pY29uLWRlc3RpbmF0aW9ucGluLW9uZGFyay1zb2xpZC1sYXJnZSIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4IDQ4IgoJIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0ibHVpLWljb24tZGVzdGluYXRpb25waW4tb25kYXJrLXNvbGlkLWxhcmdlLWJvdW5kaW5nLWJveCIgb3BhY2l0eT0iMCI+CgkJPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQ3LDF2NDZIMVYxSDQ3IE00OCwwSDB2NDhoNDhWMEw0OCwweiIvPgoJPC9nPgoJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yNCwyQzEzLjg3MDgsMiw1LjY2NjcsMTAuMTU4NCw1LjY2NjcsMjAuMjIzMwoJCWMwLDUuMDMyNSwyLjA1MzMsOS41ODg0LDUuMzcxNywxMi44ODgzTDI0LDQ2bDEyLjk2MTctMTIuODg4M2MzLjMxODMtMy4zLDUuMzcxNy03Ljg1NTgsNS4zNzE3LTEyLjg4ODMKCQlDNDIuMzMzMywxMC4xNTg0LDM0LjEyOTIsMiwyNCwyeiBNMjQsMjVjLTIuNzY1LDAtNS0yLjIzNS01LTVzMi4yMzUtNSw1LTVzNSwyLjIzNSw1LDVTMjYuNzY1LDI1LDI0LDI1eiIvPgo8L2c+Cjwvc3ZnPgo=";

然后，可以在样式定义中使用此图像，如下所示：

            styles: {
                geojson: [
                    {
                        when: ["==", ["geometry-type"], "Point"],
                        technique: "labeled-icon",
                        attr: {
                            text: ["get", "text"],
                            textMayOverlap: true,
                            size: 14,
                            imageTexture: "custom-icon",
                            screenHeight: 32,
                            iconScale: 0.5,
                            distanceScale: 1,
                            iconYOffset: 20
                        }
                    }
                ]
            },
            images: {
                "custom-icon": {
                    url: imageString,
                    preload: true
                }
            },
            imageTextures: [
                {
                    name: "custom-icon",
                    image: "custom-icon"
                }
            ]

Answer 2

简单地说一下，一般来说，最好一次问一个问题。我将集中讨论你的第一个关于添加标记的问题。我们的教程有一个关于添加标记的部分，https://developer.here.com/tutorials/harpgl/#add-data。在本例中，它假设GeoJSON数据。您没有提到您有什么样的文件，所以我不知道它是否是GeoJSON。

我想说的是-首先描述你有什么样的文件，数据是什么样子的。然后从添加标记的角度来看我链接到的示例。然后-和我们分享你的尝试。