0

Мне нужно на карте, использую openLayers3, отобразить маркеры. Хочу использовать SVG спрайт symbol. Использовал SVG все хорошо, но хочется все таки использовать SVG symbol, т.к. иcпотльзую в html . Желательно без использования фреймворков для работы с SVG.

2

1 ответ 1

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;
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.