шаблон листовки.пытаясь добавить шаблон пути не работает

Question

на основе документации здесь leaflet.pattern

я могу создавать свои собственные шаблоны, вот пример

Я сделал те же шаги, что и в примере для нашего пользовательского шаблона. я только изменил элемент d (связанный с svg path). но все пошло не так, как я ожидал.

любая помощь будет благодарна.

Вот код:

   var mapCenter = new L.LatLng(50.68, -120.34);

    var baseLayer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });

    var _map = new L.Map("map", {
        center: mapCenter,
        zoom: 14,
        layers: [baseLayer]
    });

    var shape = new L.PatternPath({
        d: 'M10 0 L7 20 L25 20 Z',
        fill: true
    });

    var pattern = new L.Pattern({width:50, height:50});
    pattern.addShape(shape);
    pattern.addTo(_map);

    var circle = new L.Circle(mapCenter, 400.0, {
        fillPattern: pattern,
        fillOpacity: 1.0});
    circle.addTo(_map);

Я только изменился ( d: 'M10 0 L7 20 L25 20 Z') до ('m206.38471,149.50017a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828')

любая помощь будет благодарна

Answer 1

Вы можете исправить это, сделав положение x и y вашего svg-пути таким же, как и положения образца x и y.Я поместил два пути в один файл SVG и открыл его с помощью онлайн-редактора .Как вы можете видеть на этом скриншоте, образец пути расположен в верхнем левом углу, но ваш путь находится в середине. После установки его положения так же, как значения образца: 6px, шаблон -1px отображается так:

используемый путь: m8.278722,2.394142a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828

Если вы уменьшите путь, он будет отображаться так:

используемый путь: m7.27872,1.318623a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245