的OpenLayers 4只显示了1/4 SVG图像的
问题描述:
我想在4.3.3的OpenLayers标记与SVG图标坐标:的OpenLayers 4只显示了1/4 SVG图像的
import ControllerRecordIcon from '../icons/entypo/controller-record.svg';
vector.setStyle(new Style({
image: new IconStyle({
scale: 0.5,
src: ControllerRecordIcon
})
}));
map.addLayer(vector);
图标从Entypo包,这是代码:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M10,3c-3.866,0-7,3.133-7,7c0,3.865,3.134,7,7,7s7-3.135,7-7C17,6.133,13.866,3,10,3z"/>
</svg>
您可以在附加图像中看到问题。只有左上角的四分之一图标可见,并且不以坐标为中心(红点标记坐标)。缩放不起作用,图标变小,但仍然只显示图像的1/4并且不居中。
我尝试了Icon API的多个参数,但它们没有任何区别,或者图标完全消失。
答
<svg version="1.1" id="Record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='20' height='20' xml:space="preserve">
<path d="M10,3c-3.866,0-7,3.133-7,7c0,3.865,3.134,7,7,7s7-3.135,7-7C17,6.133,13.866,3,10,3z"/>
</svg>
使用这一个
谢谢,Chandu!现在我可以正确地看到图标。另一个问题出现了 - 它现在不会保持在坐标上,而是与zoom一起移动:[视频附件](https://monosnap.com/file/mi8Xs1jFzSxTh3RfWUGsRjsIa4p4Jr) 这是因为Openlayers Feature/Icon的配置不正确其他? – Patryk
好吧,我解决了 - entypo图标是20x20px,将您的代码更改为'width = '20'height ='20''的技巧 – Patryk