时间戳

首页 > 解决方案 > HERE Maps API for JavaScript 中的道路标签图层

here-api - HERE Maps API for JavaScript 中的道路标签图层

问题描述

我正在尝试使用 HERE Maps API for JavaScript 将矢量图添加到网页。我一直在使用下面的样式代码来渲染超级简约的样式，类似于此链接顶部的第四张图片（只有道路和水域图层的图片）。

sources:
    omv:
        type: OMV
        max_zoom: 17
        min_display_zoom: 1
# global description of the map, in this example
# the map background color is white
scene:
    background:
        color: [1.000, 1.000, 1.000, 1.00]

# section contains the style information for the layers
# that are present on the map
layers:
    # user defined name of the rendering layer
    water_areas:
        # the section defines where the rendering layer takes
        # its data from source: omv is mandatory for the Vector Tile API
        # layer: water specifies what vector layer is taken
        # for the rendering see REST API documentation for the
        # list of available layers.
        data: {source: omv, layer: water}
        # section defines how to render the layer
        draw:
            polygons:
                order: 1 # z-order of the layer
                color: [0.055, 0.604, 0.914, 1.00]
    road:
        data: {source: omv, layer: roads}
        draw:
            lines:
                order: 2
                color: [0.561, 0.561, 0.561, 1.00]
                width: 15

不难弄清楚如何添加诸如 geoshape 叠加层和 UI 控件以及平移之类的东西，但我无法成功添加的一件事是道路标签。（这似乎很容易。）

我试图从其他文档示例中获取道路标签图层的代码，但它总是会破坏地图（仅将我的地理形状留在白色背景上）。这可能是因为始终有全局变量附加到标签的语言或填充颜色，但是当我尝试引入所有全局变量设置和引用时，地图仍然损坏。

所以我的问题是，有没有人知道一种简单/万无一失的方法来将道路标签添加到具有如此简约风格的 HERE 地图中？我想我正在寻找使该图层可见所需的最低属性。谢谢！

标签： here-apicartography

解决方案

为了更好地返工（删除部分/添加您的）矢量样式以利用在线编辑器地图样式编辑器（它允许您立即查看更改），然后在您的 Web 应用程序中加载经过修改的样式 yaml 文件，例如：

function setStyle(map) {
        // get the vector provider from the base layer
        var provider = map.getBaseLayer().getProvider();
        // Create the style object from the YAML configuration.
        // First argument is the style path and the second is the base URL to use for
        // resolving relative URLs in the style like textures, fonts.
        // all referenced resources relative to the base path https://js.api.here.com/v3/3.1/styles/omv.
        var style = new H.map.Style('URL/to/your.yaml',
            'https://js.api.here.com/v3/3.1/styles/omv/');
        // set the style on the existing layer
        provider.setStyle(style);
    }

请参阅https://jsfiddle.net/qw64zL85/上的示例 使用带有 road_labels 的 yaml 示例文件：只有 yaml 文本

推荐阅读