如何在openlayers 3的地图上创建半径可调整的透明圆 [英] how do I create a transparent circle with adjustable radius on a map in openlayers 3
问题描述
我想将带有某些控件的地图放在html文档页面中，以便访问者可以选择围绕其位置的距离半径.
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...
我正在使用Django作为后端.我还想知道是否需要使用JavaScript来完成此操作?
I am using Django as my back end. I'd also like to know if I'd need to use javascript to accomplish this?
我已决定使用Openlayers 3，但直到今天为止从未使用过它，并且希望将这项任务排除在外，以便更好地理解它并变得更加自信，因此我可以构建更多应用程序并希望在未来.
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.
外面有大脑箱吗?
我已经设法在页面上放置了邮政编码搜索表单和地图，但是现在对如何在排列中添加圆圈感到有些困惑...
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>
我正在使用python-django解析经纬度，然后放大代码...我如何在以经纬度和弦为中心的同一张地图上绘制一个圆圈呢?
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.
推荐答案
Out of the box, OpenLayers only supports mouse-modification for Polygons, not circles.
我确定可以编写修改圆的代码，但是该代码在OpenLayers(自3.17.x版本起)中尚不存在.
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).
您可以创建类似ol.interaction.Modify的类，并使其支持圈子.请参阅源代码以了解如何他们修改了多边形，然后对其进行修改以支持圆形.
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.
这篇关于如何在openlayers 3的地图上创建半径可调整的透明圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
