Question

我想在html文档页面中放置带有某些控件的地图，以便访问者可以选择其位置周围的距离半径。

我需要的控件之一是半透明圆圈，从中心到边缘有一条直线。我希望这个圆圈可以使用鼠标从外边缘调整，并在缩放或平移时保持其在地图上的比例和位置......

我使用Django作为我的后端。我还想知道我是否需要使用javascript来完成此操作？

我已经决定使用Openlayers 3，但是在今天之前从未使用过它，并希望将此任务放在一边，以便更好地理解它并变得更加自信，这样我就可以构建更多应用程序并希望能够帮助其他人未来。

那里有脑袋？

非常感谢任何帮助或合作......

先谢谢你们！

克里斯

编辑：我已经设法在页面上放置了邮政编码搜索表单和地图，但现在我对如何在排列中添加圆圈感到有点困惑......

这是我到目前为止所拥有的;

<html lang="en">
  <head>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.12.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 500px;
        width: 80%;
        padding: 10px;
      }
    </style>
    <script src="http://openlayers.org/en/v3.12.0/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'osm'})})
                ],
          view: new ol.View({
          center: ol.proj.fromLonLat([{{ long }}, {{ lat }}]),
          zoom: {{ zoom }}
        })
      });
    </script>
  </body>
</html>

我正在使用python-django解析长，拉特和放大代码......我怎样才能在以长拉特和弦为中心的同一个地图上画圆圈？

如果您需要有关如何重新创建我目前所拥有的内容的更多信息，请告诉我您的需求，我将很乐意为您提供。

再次感谢！

Answer 1

开箱即用，OpenLayers仅支持多边形的鼠标修改，not circles。

我确信可以编写修改圈子的代码，但该代码在OpenLayers中尚不存在（从3.17.x开始）。

您可以创建类似ol.interaction.Modify的类，并使其支持圈子。请参阅source code以查看他们如何修改多边形，并将其修改为支持圈子。

如何在openlayers 3中的地图上创建半径可调的透明圆圈

1 个答案: