将SVG覆盖添加到诺基亚HERE地图

Question

我正在使用诺基亚地图，我想在地图上添加一个额外的可视化图形层。由于交互、操作和自定义HERE api创建的图形的可能性有限，因此我想使用d3.js/SVG进行可视化。

我的直接和显而易见的解决方案是在地图顶部添加一个绝对定位的SVG元素，并为其提供相同的尺寸。但当然，这需要所有的可能性来与地图交互。有没有什么解决方案可以在地图上添加一个覆盖图，让我在地图上添加SVG，同时保持地图的完整交互性(平移、缩放、点击)？此外，还应该可以与SVG进行交互。

我知道有一个is a possibility来添加一个由瓦片服务器提供的自定义瓦片覆盖到这里的地图，但这并不是我真正想要的。我正在寻找像谷歌提供的the solution来解决这个问题。一组自定义图层，它们始终与相应的地图同步，并具有自己的初始化、绘制和删除方法。这里的地图也有类似的东西吗？

Answer 1

我想你想要的是类。这个类提供了一个绑定到特定区域的地面覆盖，该区域提供了一个draw()方法。我认为attach()方法等同于初始化，您可以使用update()刷新覆盖图。

根据您的用例，我还发现了以下关于SVG、Images和HERE Maps的有用技术

对于锚定到点并且不调整大小的SVG标记，使用：

• Alternatively重写

1. 类，并使用低级图形命令进行写入，从而为锚定到点的标记的渲染增加灵活性。如下所示：
2. To添加绑定到特定区域的图像使用类
3. 从TMS (切片地图服务)添加一系列平铺图像如果缩放行对您很有用，并且您想自己编写基于的内容，请尝试使用this example类，它将SVG与256x256像素标记组合在一起。

请注意，用于JavaScript的HERE Maps API仅支持SVG Tiny。

Answer 2

从这里开始，像旧的nokia.maps.map.provider.CanvasProvider这样的类在新的v3应用编程接口中甚至不可用。

您最好的选择是使用custom providers在Leaflet上加载地图瓦片。然后你只需要加载这个Custom Overlay类，你就可以绘制D3，WebGL，任何你需要的东西了。Leaflet仅从提供程序加载tiles，并公开一些简单的API。您不需要处理任何提供程序的API。

但不要忘记将您的app_id和app_code添加到provider类中。