openlayers，绘制云彩，带有自定义笔划的多边形
[英]openlayers, drawing clouds, polygon with customized stroke
问题描述
我正在使用openlayers 6，我需要在地图上绘制带有半圆形笔划或线串的多边形，只要我可以修改它的类型并不重要（添加和删除点，拉伸，收缩它） . 我对 Openlayers 的了解非常有限，所以我请求指导，我怎么可能做到这一点
1 个解决方案
解决方案1
0 2022-07-11 12:14:16
您可以使用自定义样式来更改显示的几何图形，类似于https://openlayers.org/en/latest/examples/polygon-styles.html但将多边形环的段替换为半圆弧。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css"> <style> html, body, .map { margin: 0; padding: 0; width: 100%; height: 100%; } </style> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <script> var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); var source = new ol.source.Vector({wrapX: false}); var style = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 3 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }), geometry: function (feature) { var geometry = feature.getGeometry(); if (geometry.getType() === 'Polygon') { var coordinates = geometry.getCoordinates(true)[0]; var arcs = []; for (let i = 0, len = coordinates.length - 1; i < len; ++i) { var center = [ (coordinates[i + 1][0] + coordinates[i][0]) / 2, (coordinates[i + 1][1] + coordinates[i][1]) / 2 ]; var dx = coordinates[i + 1][0] - coordinates[i][0]; var dy = coordinates[i + 1][1] - coordinates[i][1]; var radius = Math.sqrt(dx * dx + dy * dy) / 2; var angle = Math.atan2(-dy, -dx); var sides = 32; arcs = arcs.concat( ol.geom.Polygon.fromCircle( new ol.geom.Circle(center, radius), sides, angle ).getCoordinates(true)[0].slice(0, sides / 2) ); } return new ol.geom.Polygon([arcs.concat([arcs[0]])]); } else { return geometry; } } }); var vector = new ol.layer.Vector({ source: source, style: style }); var map = new ol.Map({ layers: [raster, vector], target: 'map', view: new ol.View({ center: [-11000000, 4600000], zoom: 4 }) }); var modify = new ol.interaction.Modify({source: source}); map.addInteraction(modify); var draw = new ol.interaction.Draw({ source: source, type: 'Polygon', style: style }); map.addInteraction(draw); var snap = new ol.interaction.Snap({source: source}); map.addInteraction(snap); </script> </body> </html>
椭圆弧的第二个例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css"> <style> html, body, .map { margin: 0; padding: 0; width: 100%; height: 100%; } </style> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <script> var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); var source = new ol.source.Vector({wrapX: false}); var style = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 3 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }), geometry: function (feature) { var geometry = feature.getGeometry(); if (geometry.getType() === 'Polygon') { var coordinates = geometry.getCoordinates(true)[0]; var arcs = []; for (let i = 0, len = coordinates.length - 1; i < len; ++i) { var center = [ (coordinates[i + 1][0] + coordinates[i][0]) / 2, (coordinates[i + 1][1] + coordinates[i][1]) / 2 ]; var dx = coordinates[i + 1][0] - coordinates[i][0]; var dy = coordinates[i + 1][1] - coordinates[i][1]; var radius = Math.sqrt(dx * dx + dy * dy) / 2; var angle = Math.atan2(-dy, -dx); var sides = 32; var circle = ol.geom.Polygon.fromCircle( new ol.geom.Circle(center, radius), sides, angle ); circle.rotate(-angle, center); circle.scale(1, 0.5, center); circle.rotate(angle, center); arcs = arcs.concat( circle.getCoordinates(true)[0].slice(0, sides / 2) ); } return new ol.geom.Polygon([arcs.concat([arcs[0]])]); } else { return geometry; } } }); var vector = new ol.layer.Vector({ source: source, style: style }); var map = new ol.Map({ layers: [raster, vector], target: 'map', view: new ol.View({ center: [-11000000, 4600000], zoom: 4 }) }); var modify = new ol.interaction.Modify({source: source}); map.addInteraction(modify); var draw = new ol.interaction.Draw({ source: source, type: 'Polygon', style: style }); map.addInteraction(draw); var snap = new ol.interaction.Snap({source: source}); map.addInteraction(snap); </script> </body> </html>
OpenLayers 创建复杂的样式（一侧有孔和笔划的多边形）
[英]OpenLayers creating a complex style (polygon with a hole and a stroke on one side)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.