OpenLayers 3中的自定义矢量形状标记
我有一张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 +(常量*分辨率)更好的解决方案吗？在使用向量和png时是否存在显著的性能差异？谢谢
编辑：在咨询了我的几个同事之后，我基本上是想拥有这个http://openlayers.org/en/v3.5.0/examples/regularshape.html，但是有一个自定义的形状。
EDIT2:实际上更像这个http://dev.openlayers.org/examples/graphic-name.html‘命名符号“闪电”、“矩形”和“教堂”是用户定义的。
回答 2
Stack Overflow用户
发布于 2019-02-02 19:07:14
我知道这是一个老问题，但回答别人，因为这是最高的结果，而我正在研究如何做到这一点。
我的解决方案是使用一个数据:image/ svg +xml和一个svg，以提供一个可以编程生成的图标
new ol.style.Style({
image: new ol.style.Icon({
// svg of an equilateral triangle 25px wide at the base
src: `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="21.65" width="25" id="canvas"><polygon points="0,0 25,0 12.5,21.65" style="fill:rgba(0,0,0,1);"></polygon></svg>')}`,
}),
})注意:您在一个数据url中对svg进行了不需要base64编码，但是对于非webkit浏览器，您确实需要encodeURIComponent()它。
Stack Overflow用户
发布于 2017-06-14 12:56:13
这就是我所做的，它类似于原来的，但我不需要计算出坐标应该是什么，我只是提供它有多大的像素，让地图计算其余的。
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]);
} 这给了我一个长方形，这就是我想要的。
https://stackoverflow.com/questions/30255779
复制相似问题
腾讯云开发者
