Question

我正在开发一个开放的地图项目，并且正在尝试创建一个地图，使网站访问者能够使用一些信息输入字段向地图添加标记（所有人都可以在批准后看到标记）。

我发现OpenLayers和Leaflet看起来都很有希望，并花了一些时间将basic maps放在一起，但经过大量搜索后，我一直无法找到允许访问者向地图添加新标记的任何内容用这两个工具制作。任何人都知道这是否可行〜或者是否有另一个开源工具可以更好地用于此应用程序？我在HTML // CSS中很扎实，并且知道JQUERY的基础知识 - 但是我不熟悉javascript，所以如果有更多的插件播放工具更喜欢，但如果没有，我愿意这样做努力学习......

谢谢！

Answer 1

是的，你可以查看https://openlayers.org/en/latest/examples/draw-features.html在地图矢量图层上绘制要素（点/线/多边形）然后，您可以获取该功能并将其保存在数据库中，并在以后根据您的业务逻辑重现它。

您可以在上面的示例中保存图形，例如javascript：

            var features = source.getSource().getFeatures();

获取Point的坐标：

            var lonlat = features[0].getGeometry().getCoordinates();

            var longitude = lonlat[0];
            var latitude = lonlat[1];

但正如ghybs所说，你也需要做后期工作。

Answer 2

您需要在 LEAFLET 中使用，但是此解决方案在 NUXTjs 中将其添加到您的代码中：

@dblclick 给您事件方法并获取新的纬度点以存储在数据库中或执行以下操作：

<div id="map-wrap" style="height: 100vh">
    <no-ssr>
      <l-map :zoom="13" :center="[-16.5002, -68.1493]" @dblclick="newMarkerbyClient">
        <l-tile-layer
          url="https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png"
        ></l-tile-layer>
        <l-marker :lat-lng="[xPosition, yPosition]"></l-marker>
      </l-map>
    </no-ssr>
  </div>

然后您编写脚本

data() {
  return {
    xPosition: -16.5002,
    yPosition: -68.1493,
  }
},    
methods: {
  newMarkerbyClient(e) {
    console.log("x: " + e.latlng.lat + " y:" + e.latlng.lng);
    this.xPosition = e.latlng.lat;
    this.yPosition = e.latlng.lng;
    //xPosition and yPosition are you new point provided by client and you can do anything with this
  }
}

关于玻利维亚

的信息

如何允许访问者在Openlayers或Leaflet中添加新标记

2 个答案: