如何在 openlayers 3 的地图上创建一个半径可调的透明圆
[英]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.
我想在 html 文档页面中放置带有某些控件的地图，以便访问者可以选择他们所在位置周围的距离半径。
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.我使用 Django 作为我的后端。 I'd also like to know if I'd need to use javascript to accomplish this?我还想知道是否需要使用 javascript 来完成此操作？
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.我已经决定使用 Openlayers 3，但在今天之前从未使用过它，我想把这个任务排除在外，以便更好地理解它并变得更有信心，这样我就可以构建更多的应用程序，并希望在未来帮助其他人。
Any brain boxes out there?有没有脑洞？
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?我正在使用 python-django 来解析 long, lat 并放大代码......我如何在以长、lat 和弦为中心的同一张地图上渲染一个圆圈？
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.如果您需要更多关于如何重新创建我目前所拥有的信息，请告诉我您需要什么，我将很乐意提供。
1 个解决方案
解决方案1
0 2016-07-04 15:16:00
Out of the box, OpenLayers only supports mouse-modification for Polygons, not circles .开箱即用，OpenLayers 仅支持鼠标修改 Polygons ， 不支持 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).我确信可以编写修改圆的代码，但 OpenLayers 中尚不存在该代码（截至 3.17.x）。
You could create a class like ol.interaction.Modify , and make it support circles.你可以创建一个像ol.interaction.Modify这样的类，并让它支持圆圈。 See the source code to see how they modify Polygons, and modify it to support Circles.查看源代码以了解它们如何修改 Polygons，并对其进行修改以支持 Circles。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.