Openlayers 7 - 使用自定義幾何樣式修改 lineString

Question

我正在使用 openlayers 7，我有一個風格為 function 的 LineString，它采用 LineString 並使其彎曲。 現在我希望能夠修改這個 LineString 功能，添加、刪除和拖動頂點，這些都可以正常工作。 問題是修改交互懸停在 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>

Answer 1

貝塞爾曲線由其控制點定義，因此修改行為是正確的，但這對用戶來說並不明顯。 您可以通過在修改樣式中顯示原始控制線來使其更清晰：

 <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>

Openlayers 7 - 使用自定義幾何樣式修改 lineString

問題描述

1 個解決方案

解決方案1
0 2022-09-23 10:55:57

Openlayers 7 - 使用自定義幾何樣式修改 lineString

問題描述

1 個解決方案

解決方案1 0 2022-09-23 10:55:57

解決方案1
0 2022-09-23 10:55:57