我有一个OpenLayers 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 +(constant * resolution)更好的解决方案?使用矢量与png是否存在重大性能差异?谢谢
编辑:在咨询了我的几个同事之后,我基本上正在尝试使用自定义形状来实现 http://openlayers.org/en/v3.5.0/examples/regularshape.html。
编辑2:实际上更像是这个 http://dev.openlayers.org/examples/graphic-name.html“命名符号“闪电”,“矩形”和“教堂”是用户定义的。”