自定義的矢量形狀的標記3

我有一個的OpenLayers 3地圖上我顯示各種數據。其中之一是顯示附近雷達發現的小船。目前我正在將船展示爲一個簡單的矢量Circle。我想把它展示爲一個像小船一樣的矢量。自定義的矢量形狀的標記3

據我瞭解，我最好的選擇是使用*。PNG圖標，做這樣的事情：

style: new ol.style.Icon({ 
    image: new ol.style.Icon(({ 
    anchor: [0.5, 0.5], 
    anchorXUnits: 'fraction', 
    anchorYUnits: 'fraction', 
    opacity: 1, 
    scale: 1, 
    src: '/Content/images/boat.png', 
    rotation: 0 
    })) 
});

這工作，但我想有那並不是一個矢量當我放大/縮小時，可以縮放比例。我的一些不同的數據目前的解決方案是顯示一個矩形，但縮放在縮放：

var style = (function() { 
    function (feature, resolution) { 
    // font size 
    if (resolution > 0.4) var fontSize = '12px'; 
    else var fontSize = '14px'; 

    var temperature = feature.get('temperature') || '-'; 
    temperature = temperature.replace(/,/g, '.'); 

    return [new ol.style.Style({ 
    fill: fill, 
    stroke: stroke, 
    text: new ol.style.Text({ 
     font: 'bold ' + fontSize + ' helvetica,sans-serif', 
     text: Math.round(temperature * 100)/100 + '°C', 
     fill: new ol.style.Fill({ color: '#000' }) 
    }), 
    geometry: function (feature) { 
     var startingCoordinates = feature.getGeometry().getCoordinates(); 
     var coordinates = [[ 
      [startingCoordinates[0] + 0, startingCoordinates[1] + 0], 
      [startingCoordinates[0] + 33, startingCoordinates[1] + 0], 
      [startingCoordinates[0] + 33, startingCoordinates[1] + (-11.35)], 
      [startingCoordinates[0] + 0, startingCoordinates[1] + (-11.35)], 
      [startingCoordinates[0] + 0, startingCoordinates[1] + 0] 
     ]]; 

     return new ol.geom.Polygon(coordinates); 
     } 
    })] 
    } 
})()

是否有這比使用startingCoordinates +（常數*分辨率）一個更好的解決辦法？使用vector與png有什麼顯着的性能差異？謝謝

編輯：經過與我的幾個同事諮詢後，我基本上試圖有這個http://openlayers.org/en/v3.5.0/examples/regularshape.html，但具有自定義的形狀。

編輯2：實際上更多這樣的http://dev.openlayers.org/examples/graphic-name.html'閃電'，'矩形'和'教會'的命名符號是用戶定義的。

來源

2015-05-15 DyslexicDcuk

有什麼用圖標的問題？圖標的大小以像素指定。放大或縮小時尺寸不會改變。所以我不明白爲什麼你的意思是「這可行，但我想有一個矢量，當我放大/縮小時不會縮放」。 – erilem

好，使用圖標是一個可能的解決方案，但後來我不得不做出很多不同種類OBJETS和不同顏色的狀態圖標。通過編程生成的矢量圖標，我可以根據它們是否處於危險中或者它們是否可能對其他人造成危險而改變其顏色。此外，我真的很想了解更多關於ol3的信息，我確信有更簡單的方法可以做到這一點。 – DyslexicDcuk

@erilem如果您有興趣，請添加（可能）更好的解釋。 – DyslexicDcuk

這是多麼我已經做到了，它類似於原來的，但沒有我不得不制定出的座標應該是什麼，我只是提供這是多麼大的像素，讓地圖計算出的其餘部分。

geometry: function (feature) { 
    var startingCoordinates =feature.getGeometry().getCoordinates(); 
    var pixel = map.getPixelFromCoordinate(startingCoordinates); 
    var p1,p2,p3,p4,polyCoords=[],sizex=90, sizey=30; 
    p1 = pixel; 
    p2 = [pixel[0]+sizex,p1[1]]; 
    p3 = [pixel[0]+sizex,pixel[1]+sizey]; 
    p4 = [pixel[0],pixel[1]+sizey]; 
    var p = [p1,p2,p3,p4,p1]; 
    for (var c = 0; c < 5;c++){ 
     polyCoords.push(map.getCoordinateFromPixel(p[c])); 
    } 

    return new ol.geom.Polygon([polyCoords]); 
}

這給了我一個矩形，這是我想要的。

來源

2017-06-14 12:56:13 Status420

自定義的矢量形狀的標記3

回答

相關問題