1

序章

リーフレット API を使用して、2 つのイメージ オーバーレイ (マップに追加) を使用するアプリケーションを作成しています。

問題

2 つのイメージ オーバーレイをロードして、固定境界でマップします。これで、イメージオーバーレイ、つまり次と前を切り替えるコントロールを配置しました

関数 BringToFront(); を使用しました。これらのコントロールの背後にある....

しかし、長方形のようなものを描画してイメージオーバーレイを切り替えると、イメージまたはポイントに描画された形状が失われるか、外観が失われると思います...これを解決する方法がわかりません.....

実装が不完全なスクリプトの一部 

var map = L.map('map', {
                    minZoom: 1,
                    maxZoom: 4,
                    center: [0, 0],
                    zoom: 0,
                    crs: L.CRS.Simple
                });

                // dimensions of the image
                var w = 3200,
                    h = 1900,
                    url = 'assets/img/isbimg.jpg';
                url1 = 'assets/img/fjmap.png';
                // calculate the edges of the image, in coordinate space
                var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
                var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
                var bounds = new L.LatLngBounds(southWest, northEast);

                var featureGroup = L.featureGroup().addTo(map);

                var drawControl = new L.Control.Draw({
                    edit: {
                        featureGroup: featureGroup
                    },
                    draw: {
                        polygon: true,
                        polyline: true,
                        rectangle: true,
                        circle: true,
                        marker: true
                    }
                }).addTo(map);


                map.on('draw:created', showPolygonArea);
                map.on('draw:edited', showPolygonAreaEdited);
                // add the image overlay,
                // so that it covers the entire map

                var iii = L.imageOverlay(url1, bounds);
                var jjj = L.imageOverlay(url, bounds);
                var ggg = iii.addTo(map);
                var hhh = jjj.addTo(map);

                jjj.addTo(map);
                $('#layerControl').on('click', function layerControl() {
                    ggg.bringToFront();
                    return this;
                });

                $('#layerControl2').on('click', function layerControl2() {
                    hhh.bringToFront();
                    return this;
                });

描画されたベクトルまたは問題を引き起こす imageoverlay の状態を保存していないことはわかっています。この問題を解決する方法や、id を imageoverlay に設定する方法はありますか ???

誰かがそれについて考えている場合は、助けてください。どんな種類の助けや参考文献もいただければ幸いです....時間をありがとう

4

1 に答える 1

1

正反対のことを行うことで機能させることができます: 見たいイメージレイヤーを前面に移動する代わりに、他のイメージレイヤーを背面に移動する必要があります:

$('#layerControl').on('click', function layerControl() {
    // ggg.bringToFront();
    hhh.bringToBack();
    return this;
});

$('#layerControl2').on('click', function layerControl2() {
    // hhh.bringToFront();
    ggg.bringToBack();
    return this;
});

Plunker の実際の例を次に示します: http://plnkr.co/edit/3Hd9FR?p=preview

個人的には、 のメソッドを呼び出した後に のメソッドを呼び出してもうまくいくと期待していましたが、bringToFrontどういうわけかそうではありません。画像とフィーチャレイヤーは両方ともリーフレットのオーバーレイ ペインに含まれているため、これも機能するはずです。時間ができたら、さらにテストを行う必要があります。L.FeatureLayerbringToFrontL.ImageOverlay

于 2015-09-03T07:17:01.127 に答える