![](/img/trans.png)
[英]how do I create a transparent circle with adjustable radius on a map in openlayers 3
[英]How to create a circle based on the point on the map in Openlayers
我正在嘗試根據用戶點擊的點/坐標創建一個圓圈。 我知道如何創建一個點並找到了一個函數來創建一個基於該點的圓(如緩沖區/范圍環),但它似乎只適用於 x,y 點 (0,0)。 我嘗試使用 ol.proj.transform 將我的 lon 和 lat 坐標轉換為 X 和 Y,但它根本沒有渲染一個圓。
這就是我正在嘗試創建的
function createCircle(circleCenterX, circleCenterY, circleRadius, pointsToEnd) {
let angleToAdd = 360 / pointsToEnd;
let coords = [];
let angle = 0;
for (let i = 0; i < pointsToEnd; i++) {
angle += angleToAdd;
let coordX = circleCenterX + circleRadius * Math.cos(angle * Math.PI / 180);
let coordY = circleCenterY + circleRadius * Math.sin(angle * Math.PI / 180);
coords.push([coordX, coordY]);
}
return coords;
}
function addMarker(coordinates) {
console.log(coordinates);
var marker = new ol.Feature(new ol.geom.Point([708683.3598450683, 1850098.1965979263]));
marker.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'red'
})
})
}));
vectorSource.addFeature(marker);
}
function addCircle(coords) {
// var lonlat1 = ol.proj.transform([coords[0], coords[1]], 'EPSG:4326','EPSG:3857');
// console.log('var lonlat1',lonlat1)
var circleCoords = createCircle(708683.3598450683, 1850098.1965979263, 20, 180);
console.log(circleCoords);
var polygon = new ol.geom.Polygon([circleCoords]);
polygon.transform('EPSG:4326', 'EPSG:3857');
polygon = new ol.Feature(polygon);
vectorSource.addFeature(polygon);
}
您的問題是addMarker
函數采用 EPSG:3857 投影中的坐標, addCircle
函數采用 EPSG:4326 投影中的坐標。
如果要傳入相同的坐標,則必須使它們保持一致。
[708683.3598450683, 1850098.1965979263]
的圓圈沒有出現[708683.3598450683, 1850098.1965979263]
因為它離地圖很遠(緯度的最大值是 90 度)。
addCircle(ol.proj.toLonLat([708683.3598450683, 1850098.1965979263]));
addMarker([708683.3598450683, 1850098.1965979263]);
代碼片段:
var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 3 }) }); var layer = new ol.layer.Vector({ source: new ol.source.Vector({ projection: 'EPSG:4326', features: [] }), }); map.addLayer(layer); var vectorSource = layer.getSource(); function createCircle(circleCenterX, circleCenterY, circleRadius, pointsToEnd) { let angleToAdd = 360 / pointsToEnd; let coords = []; let angle = 0; for (let i = 0; i < pointsToEnd; i++) { angle += angleToAdd; let coordX = circleCenterX + circleRadius * Math.cos(angle * Math.PI / 180); let coordY = circleCenterY + circleRadius * Math.sin(angle * Math.PI / 180); coords.push([coordX, coordY]); } return coords; } function addMarker(coordinates) { console.log(coordinates); var marker = new ol.Feature(new ol.geom.Point(coordinates)); marker.setStyle(new ol.style.Style({ image: new ol.style.Circle({ radius: 5, fill: new ol.style.Fill({ color: 'red' }) }) })); vectorSource.addFeature(marker); } function addCircle(coords) { // var lonlat1 = ol.proj.transform([0, 0], 'EPSG:4326','EPSG:3857'); // console.log('var lonlat1',lonlat1) var circleCoords = createCircle(coords[0], coords[1], 20, 180); console.log(circleCoords); var polygon = new ol.geom.Polygon([circleCoords]); polygon.transform('EPSG:4326', 'EPSG:3857'); polygon = new ol.Feature(polygon); vectorSource.addFeature(polygon); } addCircle(ol.proj.toLonLat([708683.3598450683, 1850098.1965979263])); addMarker([708683.3598450683, 1850098.1965979263]);
html, body { height: 100%; width: 100%; padding: 0px; margin: 0px; } .map { height: 100%; width: 100%; }
<script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script> <link rel="stylesheet" type="text/css" href="https://openlayers.org/en/v6.4.3/css/ol.css" /> <div id="map" class="map"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.