时间戳

首页 > 解决方案 > HERE maps API for JS - 标记和多边形的 Z-index

javascript - HERE maps API for JS - 标记和多边形的 Z-index

问题描述

我正在尝试为标记和可拖动的多点多边形设置 z-index，但多边形总是在标记下创建。当地图上有很多标记时，不可能抓住多边形的角落。ZIndex 仅适用于表单标记或多边形，但我无法设置常见的 ZIndex 将标记放置在多边形下。

在此处输入图像描述

标签： javascripthere-api

解决方案

适用于 JavaScript 的 HERE Maps API 中的渲染顺序会评估地图对象，然后在单独的通道中渲染空间对象、标记和 DOM 标记。这意味着空间、标记和 DOM 标记不能混合使用。空间对象在主场景地理空间中渲染，并像任何其他地图图层一样绘制。渲染所有地图图层后，Maps API 渲染所有标记（普通标记），最后渲染所有 DomMarkers。这就是为什么标记位于空间对象之上的原因。

但是，空间对象（折线、多边形）和 H.map.Marker 对象 - 基于画布机会的所有地图对象都可以在地图上按顶部或底部顺序显示。您可以创建LocalObjectProvider并添加分层对象。例如，为空间对象（例如圆形、多边形等）、H.map.Marker 和具有相同类型对象的另一层创建一个图层，并使用语句“ map.getLayers().add(layer ); "。最后添加的图层将始终位于顶部 - 无论是圆形、折线或多边形等还是 H.map.Marker 类型。

链接解释 LocalObjectProvider https://developer.here.com/documentation/maps/3.1.22.1/api_reference/H.map.provider.LocalObjectProvider.html

这是一个例子：

function addPolylineToMap(map) {
  var lineString = new H.geo.LineString();
  lineString.pushPoint({lat:53.3477, lng:-6.2597});
  lineString.pushPoint({lat:51.5008, lng:-0.1224});
  lineString.pushPoint({lat:48.8567, lng:2.3508});
  lineString.pushPoint({lat:52.5166, lng:13.3833});
  
  //create a provider and a layer that are placed above the marker object layer
      objectProvider = new H.map.provider.LocalObjectProvider();
      objectLayer = new H.map.layer.ObjectLayer(objectProvider);
      // add a polygon to this provider and the polygon will appear above the marker
      objectProvider.getRootGroup().addObject(new H.map.Polygon(
    lineString, { style: { lineWidth: 4, strokeColor: 'red' }, zIndex: 999}
  ));
      // add the layer to the map
      map.getLayers().add(objectLayer);

请检查以下链接中的工作示例： https ://jsfiddle.net/raj0665/s1dpq9fv/19/

此外，当您有大量数据要在地图上显示时，您可以检查聚类示例。聚类算法通过将屏幕上彼此靠近的两个或多个点折叠成单个聚类点来对数据点进行分组。 https://developer.here.com/documentation/examples/maps-js/clustering/marker-clustering

推荐阅读