修復OpenLayers中的圖標大小3

我現在搜索了2個小時，但目前還不清楚OL3中是否有可能。我想我的圖標是固定的大小（不是屏幕，而是我使用的圖像映射）。我的意思是，它應該覆蓋相同的區域，即使我縮小了，並且不覆蓋地圖的一半（比如我使用的是圓多邊形，但是我有複雜的圖標，所以我必須將它用作點要素）。有沒有解決辦法？像QGIS：MAP UNITS一樣。修復OpenLayers中的圖標大小3

我已經有這些：

var jelekStyle = function(feature, resolution) { 
       if(feature.get('tipus')=== 'falu') { 
        icon = '00_ikonok/falu.png', 
        size = [115, 233], 
        scale = 0.05, 
        anchor = [0.5,46]; 
       } else if(feature.get('tipus')=== 'puszta') { 
        image = '00_ikonok/puszta.png'; 
       } ... 
       } 

        return [new ol.style.Style({ 
        image: new ol.style.Icon({ 
         src: icon, 
         scale: scale, 
         size: size, 
         anchor: anchor, 
         anchorXUnits: 'fraction', 
         anchorYUnits: 'pixels' 
         }) 
        })]; 
       };

...

var jelek = new ol.layer.Vector({ 
        source: new ol.source.Vector({ 
        url: 'sopron_honlap/json/Gorog-Kerekes_Sopron_jelek_GeoJSON.geojson', 
        format: new ol.format.GeoJSON() 
        }), 
        updateWhileAnimating: true, 
        updateWhileInteracting: true, 
        style: jelekStyle 
       });

來源

2017-09-05 Reka F.

是，有一個解決方案。在圖層上的style函數中，您必須按參考分辨率除以渲染分辨率來縮放圖標大小。

要在用戶交互過程中更新樣式，請使用updateWhileInteracting: true和updateWhileAnimating: true配置圖層。這裏是整個代碼：

var iconFeature = new ol.Feature(new ol.geom.Point([0, 0])); 
 

 
var iconStyle = new ol.style.Style({ 
 
    image: new ol.style.Icon({ 
 
    anchor: [0.5, 46], 
 
    anchorXUnits: 'fraction', 
 
    anchorYUnits: 'pixels', 
 
    src: 'https://openlayers.org/en/v4.3.2/examples/data/icon.png' 
 
    }) 
 
}); 
 

 
var vectorSource = new ol.source.Vector({ 
 
    features: [iconFeature] 
 
}); 
 

 
var vectorLayer = new ol.layer.Vector({ 
 
    source: vectorSource, 
 
    updateWhileAnimating: true, 
 
    updateWhileInteracting: true, 
 
    style: function(feature, resolution) { 
 
    iconStyle.getImage().setScale(map.getView().getResolutionForZoom(3)/resolution); 
 
    return iconStyle; 
 
    } 
 
}); 
 

 
var rasterLayer = new ol.layer.Tile({ 
 
    source: new ol.source.TileJSON({ 
 
    url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure', 
 
    crossOrigin: '' 
 
    }) 
 
}); 
 

 
var map = new ol.Map({ 
 
    layers: [rasterLayer, vectorLayer], 
 
    target: 'map', 
 
    view: new ol.View({ 
 
    center: [0, 0], 
 
    zoom: 3 
 
    }) 
 
});

html, body, #map { 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<!DOCTYPE html> 
 
<head> 
 
    <link rel="stylesheet" href="https://openlayers.org/en/v4.3.2/css/ol.css"> 
 
    <script src="https://openlayers.org/en/v4.3.2/build/ol.js"></script> 
 

 
</head> 
 
<body> 
 
    <div id="map" class="map"></div> 
 
</body>

來源

2017-09-07 00:00:08 ahocevar

修復OpenLayers中的圖標大小3

回答

相關問題