Question

我在这里有些疑惑。我使用的是JavaScript API Here 3版本，我需要创建一个与Google地图可用的图纸管理器（http://biostall.com/demos/google-maps-v3-api-codeigniter-library/drawingmanager）相同的样式。

基本上它可以工作，以便用户在地图上多次点击，并创建一个由用户点击定义的多边形。可以修改此多边形，因为用户将移动多边形顶点的位置。

在这里或某些代码中有一些准备好的东西你可以给我一个关于这个问题的方向吗？

我的地图基本上遵循Here文档的相同想法：

var platform = new H.service.Platform ({ 'app_id' 'MY_ID'
         'App_code' 'MY_APP_CODE'});
var defaultLayers = platform.createDefaultLayers = ();
var map = new H.Map (document.getElementById ( 'mapContainer'
       defaultLayers.normal.map);

Answer 1

据我所知，动态多边形没有现成的功能。你必须从头开始实现它。要开始，您可能会查看以下用户交互示例：

https://developer.here.com/api-explorer/maps-js/markers/draggable-marker

当您根据需要进行设置（添加标记，移动标记，移除标记等）时，您可以查看此示例以找出有关多边形的内容：

https://developer.here.com/api-explorer/maps-js/geoshapes/polygon-on-the-map

据我所知，从API参考开始，无论何时拖动标记，您都应该能够重新创建条带并将其设置在多边形上。那么多边形应该重新绘制。

https://developer.here.com/javascript-apis/documentation/v3/maps/topics_api_nlp/h-map-polygon.html#h-map-polygon__setstrip

Answer 2

好吧，到2020年6月为止，这里的地图仍然没有内置的“绘图管理器”，但是我确实设法在不滚动自己的情况下进行了工作。

首先使用leaflet.js库生成此处地图https://leafletjs.com/ 然后使用诸如https://geoman.io/leaflet-geoman

之类的绘图功能的传单插件

这是一个可行的示例，只需替换here maps api键即可。

<!DOCTYPE html>
<html lang="en">
   <head>
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
      <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />
      <style>
         html,body{
         width:100%;
         height:100%;
         padding:0;
         margin:0;
         }
         #mapContainer{
         width:100%;
         height:100%;
         }
      </style>
   </head>
   <body>
      <div id="mapContainer"></div>
      <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
      <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
      <script>
         var map = L.map('mapContainer', {
           center: [  -29.529838,  24.810199],
           zoom: 6
         });
         var HERE_MAPS_API_KEY = "xxxxxxx"; //replace with your API Key 
         var layer = L.tileLayer("https://2.base.maps.ls.hereapi.com/maptile/2.1/maptile/newest/normal.day.transit/{z}/{x}/{y}/512/png8?apiKey="+HERE_MAPS_API_KEY+"&ppi=320" , { styleId: 997 }).addTo(map);
         map.pm.addControls({
            position: 'topleft'
         });
         map.attributionControl.addAttribution('&copy; HERE MAPS');
      </script>
   </body>
</html>

DrawingManager Here Maps创建动态多边形[Javascript v3]

2 个答案: