Мне нужно на карте, использую openLayers3, отобразить маркеры. Хочу использовать SVG спрайт symbol. Использовал SVG все хорошо, но хочется все таки использовать SVG symbol, т.к. иcпотльзую в html . Желательно без использования фреймворков для работы с SVG.
1 ответ
В итоге svg скопировал в js и там работаю с ним как с текстом, может кому пригодится. Так задаю стиль:
function setStyleSvg(type,color,scale){
var svg=svgIcon.getSvg([['location',color],[type,'rgb(100,100,100)',true]]);
var style=new ol.style.Style({
image: new ol.style.Icon( {
src:'data:image/svg+xml;utf8,'+svg,
scale: scale,
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
})
});
return style;
};
собственно так формирую svg в angularJs:
app.factory('svgIcon',function(){
var size=[500,500];
var cssClass="unit";
var viewBox="0 0 2000 2000";
const closeTag='</svg>';
var insert='';
function icons(icon,color,label){
var out;
var offset=(label)?-250:0;
switch(icon){
case 'truck':out+=`<path viewBox="0 0 1024 538" transform="translate(448,`+(731+offset)+`)" fill="`+color+`" stroke="rgb(0,0,0)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1" d="...."/>
`;
break;
case 'drill':out+=`....`;
break;
case 'excavator':out+=`....`;
break;
}
return out;
}
this.setClass=(className)=>{
cssClass=className;
};
this.setViewBox=(set)=>{
viewBox=set;
};
this.setInsert=(set)=>{
insert=set;
};
this.getSvg=(arr)=>{//([[type,color,label],[type,color,label]....])
try {
var svg=`<svg width="500" height="500" viewBox="`+viewBox+`" `+insert+` class="`+cssClass+`" version="1.1" xmlns="http://www.w3.org/2000/svg">`;
for (var i = 0; i < arr.length; i++) {
svg+=icons(arr[i][0],arr[i][1],arr[i][2]);
}
svg+=closeTag;
return svg;
} catch (err) {
console.log('svg not create');
}
}
return this;
});