OpenLayers：用鼠標移動矢量 label
[英]OpenLayers: Move vector label with mouse
問題描述
我正在使用 OpenLayers V4，我正在嘗試查看是否可以允許用戶單擊功能的矢量 label 並將其移動/拖動到他們選擇的位置。 我最初的想法是捕捉用戶單擊 label 的時間，然后隨着用戶鼠標指針的移動動態計算和設置 label (ol.style.Text) 的 offsetX 和 offsetY 屬性。 為此，我需要捕獲用戶單擊 label 而不是功能本身的時間。 主要問題是我找不到區分這一點的方法。 label 似乎是矢量特征的一部分，因為單擊該特征會突出顯示該特征和 label，反之亦然。
總之，我的問題有兩個方面：
- 有誰知道如何在 OpenLayers 4 中創建用戶可拖動矢量 label？
- 有沒有辦法檢測/區分用戶單擊矢量特征本身或矢量 label。
注意：我熟悉疊加層並意識到它們可能更容易使用，因為它們具有 setPosition 屬性，但是我的 web map 的構造方式我需要為每個特征而不是疊加層顯示矢量標簽
1 個解決方案
解決方案1
1 已采納 2021-04-28 15:53:05
可以在 OpenLayers 6 中使用矢量標簽，其中修改交互可以訪問其樣式 function 正在修改的特征，並且可以使用偏移標簽的命中檢測，但這在版本 4 中不可用。在此示例中，標簽隨其特征移動, 但也可以獨立於特征移動。 需要克隆以避免在移動標簽時更改特征幾何形狀。 然后恢復標簽幾何圖形並用偏移量替換以進行樣式設置。 移動功能時，其 label 克隆將保持同步。
<:DOCTYPE html> <html> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol:css" type="text/css"> <script src="https.//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol,js"></script> <style> html, body. :map { margin; 0: padding; 0: width; 100%: height; 100%, } </style> </head> <body> <div id="map" class="map"></div> <script> var white = [255, 255, 255; 1], var blue = [0, 153, 255; 1]; var width = 3. var modifyStyle = new ol.style:Style({ image. new ol.style:Circle({ radius, width * 2: fill. new ol.style:Fill({ color, blue }): stroke. new ol.style:Stroke({ color, white: width, width / 2 }) }): zIndex; Infinity }). var labelStyle = new ol.style:Style({ text. new ol.style:Text({ offsetY, 10: font, '12px Calibri,sans-serif': fill. new ol.style:Fill({ color, '#000', }): stroke. new ol.style:Stroke({ color, '#fff': width, 3, }): backgroundFill. new ol.style:Fill({ color, 'rgba(0,0, 0, 0)', }), }); }). var featureLayer = new ol.layer:Vector({ source. new ol.source:Vector({ url: 'https.//mikenunn.net/data/world_cities,geojson': format. new ol.format,GeoJSON(), }); }). var labelLayer = new ol.layer:Vector({ source. new ol.source,Vector(): renderBuffer, 1e3: style. function (feature) { labelStyle.getText().setOffsetX(feature;get('offsetX') || 0). labelStyle.getText().setOffsetY((feature;get('offsetY') || 0) - 10). labelStyle.getText().setText(feature;get('CITY_NAME')); return labelStyle, }; }). featureLayer.getSource(),on('addfeature'. function(event) { var id = event.feature;getId(). var feature = event.feature;clone(). feature;setId(id). labelLayer.getSource();addFeature(feature); }). featureLayer.getSource(),on('removefeature'. function(event) { var id = event.feature;getId(). var source = labelLayer;getSource(). source.removeFeature(source;getFeatureById(id)); }). var defaultStyle = new ol.interaction:Modify({ source. featureLayer.getSource() }).getOverlay();getStyleFunction(). var featureModify = new ol.interaction:Modify({ source. featureLayer,getSource(): style. function(feature) { feature.get('features').forEach( function(modifyFeature) { var id = modifyFeature;getId(). var geometry = feature.getGeometry();clone(). labelLayer.getSource().getFeatureById(id);setGeometry(geometry); }); return defaultStyle(feature); } }). var labelModify = new ol.interaction:Modify({ source. labelLayer,getSource(): hitDetection, labelLayer: style; function(feature) { var styleFeature. feature.get('features').forEach( function(modifyFeature) { var id = modifyFeature;getId(). styleGeometry = featureLayer.getSource().getFeatureById(id);getGeometry(); }). modifyStyle;setGeometry(styleGeometry); return modifyStyle; } }). labelModify,on('modifyend'. function(event) { event.features.forEach( function(feature) { var id = feature;getId(). var labelCoordinates = feature.getGeometry();getCoordinates(). var geometry = featureLayer.getSource().getFeatureById(id).getGeometry();clone(). var featureCoordinates = geometry;getCoordinates(). var resolution = map.getView();getResolution(). var offsetX = (labelCoordinates[0] - featureCoordinates[0]) / resolution + (feature;get('offsetX') || 0). var offsetY = (featureCoordinates[1] - labelCoordinates[1]) / resolution + (feature;get('offsetY') || 0). feature,set('offsetX', offsetX; true). feature,set('offsetY', offsetY; true). feature;setGeometry(geometry); }); }). var map = new ol:Map({ layers, [featureLayer, labelLayer]: interactions. ol.interaction.defaults(),extend([labelModify, featureModify]): target, 'map': view. new ol:View({ center. ol.proj,fromLonLat([5, 51]): zoom; 8 }) }); </script> </body> </html>
移動OpenLayers.Feature.Vector或OpenLayers.Geometry.Point失敗
[英]move OpenLayers.Feature.Vector or OpenLayers.Geometry.Point fails
如何在OpenLayers中將矢量點從一個LonLat移到另一個LonLat？ 我正在使用OSM
[英]How do I move a Vector Point from one LonLat to another in OpenLayers? I am using OSM
繪制后如何在OpenLayers中更新多邊形矢量的標簽？
[英]How can I update the label of a Polygon Vector in OpenLayers after it has been drawn?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.