how do I create a transparent circle with adjustable radius on a map in openlayers 3

问题

I am wanting to put a map with certain controls in a html document page, so that visitors can select a distance radius around their location.

One of the controls I need is a semi transparent circle with a line from the centre to the edge. I want this circle to be adjustable using the mouse from the outer edge and keep its scale and position on the map when zooming or panning...

I am using Django as my back end. I'd also like to know if I'd need to use javascript to accomplish this?

I have decided to use Openlayers 3, but have never used it before today and would like to get this task out of the way so as to understand it better and become more confident so I can build more apps and hopefully help others in the future.

Any brain boxes out there?

Any help or collaboration would be much appreciated...

Thanks to you all in advance!

Chris

EDIT: I have managed to put postcode search form and a map on the page, but am now a little stumped on how to add a circle to the arrangement...

This is what I have so far;

<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>

I am using python-django to parse long, lat and zoom into the code... how would I get a circle to render on the same map centered around the long, lat chords?

if you need more information on how to recreate what I have so far then please let me know what you need and I will be happy to provide it.

Thanks again!

回答1:

Out of the box, OpenLayers only supports mouse-modification for Polygons, not circles.

I'm sure it is possible to write code that modifies circles, but that code does not exist yet in OpenLayers (as of 3.17.x).

You could create a class like ol.interaction.Modify, and make it support circles. See the source code to see how they modify Polygons, and modify it to support Circles.

来源：https://stackoverflow.com/questions/34247884/how-do-i-create-a-transparent-circle-with-adjustable-radius-on-a-map-in-openlaye

标签

javascript

openlayers-3