Openlayers 7 - 使用自定义几何样式修改 lineString
[英]Openlayers 7 - modify lineString with custom geometry style
问题描述
I am working with openlayers 7 and I have a LineString with a style function that takes the LineString and makes it curved.
我正在使用 openlayers 7，我有一个风格为 function 的 LineString，它采用 LineString 并使其弯曲。 Now i want to be able to modify this LineString feature, add, delete and drag vertices which works fine.现在我希望能够修改这个 LineString 功能，添加、删除和拖动顶点，这些都可以正常工作。 The problem is the modify interaction hovers over the LineString not its Style, I have tried to use geometryFunction instead of Style geometry the hover works perfectly but the modifying isn't working as it should, so is there any solution to that or should I create my own modify function问题是修改交互悬停在 LineString 而不是它的 Style 上，我尝试使用 geometryFunction 而不是 Style 几何 hover 工作完美，但修改没有按预期工作，所以有什么解决方案或者我应该创建我自己修改 function
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./libs/v6.0.0-dist/ol.css" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div id="popup-container">
<p id="popup-coordinates"></p>
</div>
<div id="js-map" class="map"></div>
<script src="./libs/v6.0.0-dist/ol.js"></script>
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
<script>
window.onload = init;
function init() {
const map = new ol.Map({
view: new ol.View({
center: [-12080385, 7567433],
zoom: 3,
maxZoom: 6,
minZoom: 2,
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
target: 'js-map',
keyboardEventTarget: document,
});
const vectorSource = new ol.source.Vector();
const vectoreLayer = new ol.layer.Vector({
source: vectorSource,
});
map.addLayer(vectoreLayer);
// Draw Interaction
const drawInteraction = new ol.interaction.Draw({
source: vectorSource,
type: 'LineString',
style: (feature) => {
feature.setStyle(() => {
return [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#000000',
width: 2,
}),
geometry: () => {
return new ol.geom.LineString(
turf.getCoords(
turf.bezierSpline(
turf.lineString(
feature.getGeometry().getCoordinates()
)
)
)
);
},
}),
];
});
},
});
drawInteraction.on('drawend', () => {
map.removeInteraction(drawInteraction);
});
map.addInteraction(drawInteraction);
map.addInteraction(
new ol.interaction.Modify({
source: vectorSource,
})
);
}
</script>
</body>
</html>
1 个解决方案
解决方案1
0 2022-09-23 10:55:57
A bezier curve is defined by its control points, so the modify behaviour is correct, but that is not obvious to the user.贝塞尔曲线由其控制点定义，因此修改行为是正确的，但这对用户来说并不明显。 You could make it clearer by showing the original control line in the modify style:您可以通过在修改样式中显示原始控制线来使其更清晰：
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> html, body, .map { margin: 0; padding: 0; width: 100%; height: 100%; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css" /> </head> <body> <div id="popup-container"> <p id="popup-coordinates"></p> </div> <div id="js-map" class="map"></div> <script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script> <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script> <script> window.onload = init; function init() { const map = new ol.Map({ view: new ol.View({ center: [-12080385, 7567433], zoom: 3, maxZoom: 6, minZoom: 2, }), layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), }), ], target: 'js-map', keyboardEventTarget: document, }); const drawStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#000000', width: 2, }), }); const style = (feature) => { drawStyle.setGeometry( new ol.geom.LineString( turf.getCoords( turf.bezierSpline( turf.lineString( feature.getGeometry().getCoordinates() ) ) ) ) ); return drawStyle; }; const vectorSource = new ol.source.Vector(); const vectoreLayer = new ol.layer.Vector({ source: vectorSource, style: style, }); map.addLayer(vectoreLayer); // Draw Interaction const drawInteraction = new ol.interaction.Draw({ source: vectorSource, type: 'LineString', style: style, }); drawInteraction.on('drawend', () => { map.removeInteraction(drawInteraction); }); map.addInteraction(drawInteraction); const defaultStyle = new ol.interaction.Modify({source: vectorSource}).getOverlay().getStyleFunction(); const modifyStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#000000', width: 2, lineDash: [1, 3], lineCap: 'butt', }), }); map.addInteraction( new ol.interaction.Modify({ source: vectorSource, style: (feature) => { modifyStyle.setGeometry(feature.get('features')[0].getGeometry()); return [modifyStyle, defaultStyle(feature)[0]]; } }) ); } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.