7

リーフレット API を使用するアプリケーションを使用しています。

序章

さまざまな種類のフェンスを描画する必要がありました。デコレータを使用すると、ポリラインに適切なビジュアルを適用できますが、あまり適用できません。

問題

破線、点線、またはプレーン ラインの代わりにツイスト ワイヤを表示したかったのですが、ツイスト ワイヤ ラインが画像になることはわかっていますが、カスタム CSS をポリラインに適用する方法がわかりません。

スクリプト例

         var fence2Icon = L.icon({
                            iconUrl: 'xxxx.png',
                            iconSize: [5, 20]
                            iconAnchor: [5, 18]
                        });

                        // Add coordinate to the polyline
                        var polylineFence2 = new L.Polyline([], { color: 'red' });
                    function fencePlace2(e) {
                        // New marker on coordinate, add it to the map
                new L.Marker(e.latlng, { icon: fence2Icon, draggable: false }).addTo(curr);
                        // Add coordinate to the polyline
               polylineFence2.addLatLng(e.latlng).addTo(curr);
            var decorator = L.polylineDecorator(polylineFence2, {
            patterns:[{offset:5,repeat:'20px',symbol:new L.Symbol.Dash({pixelSize:5})
                         }]
                    }).addTo(curr);
                    }    

                L.easyButton('fa-flash', function () {
                            $('.leaflet-container').css('cursor', 'crosshair');
                            map.on('click', fencePlace2);
                            polylineFence2 = new L.Polyline([], { color: 'red' });
                        }).addTo(map);

誰かがポリラインまたは別の方法について何か知っている場合は、助けてください. 御時間ありがとうございます：-）

4

2 に答える 2

18

ポリラインのオプションでクラスを追加できます...

var polyline = L.polyline(latlngs, { className: 'my_polyline' }).addTo(map);

CSSに独自の設定を追加します...

.my_polyline { 
  stroke: green;
  fill: none;
  stroke-dasharray: 10,10; 
  stroke-width: 5;  
}

以下に例を示します: http://jsfiddle.net/FranceImage/9dggfhnc/

一部のオプションに直接アクセスすることもできます...

var polyline = L.polyline(latlngs, { dashArray: '10,10' }).addTo(map);

パス オプションを参照してください

于 2015-10-01T11:10:42.807 に答える