0

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

Komok
  • 105
  • Посмотрите тут: https://ru.stackoverflow.com/questions/646634/%D0%9F%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B8%D1%82%D1%8C-svg-%D0%B2-%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B5-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-use/646643#646643 – Crantisz May 13 '17 at 13:31
  • мало помогло :( – Komok May 16 '17 at 10:06

1 Answers1

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;
});
Komok
  • 105