自定义的矢量形状的标记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

回答

相关问题