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

Question

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

所以我的问题是：

• 显示这些标记的最佳方式是什么？
• 如何使它们可点击？ （光线投射？）
• 有没有办法附加一些元数据？

提前致谢！

编辑： 澄清一下，标记是存储在 SVG 文件中的 SVG 图像，需要加载并显示为标记。

数据由 API 提供，因此我尝试像 Cube-Example 一样将其添加为自己的点，并尝试将其转换为 GeoJSON 和 FeatureSet：

    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-Layer 时，我收到无法加载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： 我尝试修改此 example 以显示 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。

我想说 - 首先描述您拥有什么样的文件，数据的外观。然后看一下我在添加标记方面链接到的示例。然后 - 与我们分享您的尝试。