0

私は、リーフレット プラグインを使用するアプリケーションBeta_Hereを使用しています。すべてのライブラリは、少数 (css 関連) を除いてローカルです。

アプリケーションライブの使用

最初のビュー: このアプリケーションは、ユーザーからの入力を取得し、それに応じて距離計算式を設定します....

2 番目のビュー : 9 などの入力を入力すると、2 番目のビューが読み込まれ、形状を描画できます。

序章

2 つのイメージ オーバーレイ (レイヤー) をロードするスクリプトをセットアップしました。右上から切り替えて、左下から描画または測定できます。

問題

図形を描画したり、画像にマーカーを配置したりすると、コントロールはほぼ完璧に機能しますが、レイヤーを切り替えると、問題が発生します....すべての図形が背景に移動するか、(消えたように見えます)

主な質問

図面が画像ではなくマップコンテナにバインドされていることがわかる方法がある場合、図面とマーカーを特定のレイヤー（imageoverlay）にバインドするにはどうすればよいですか.....（私がやっていると感じたら許してくださいレイヤーに関する知識が限られているため、何かばかげているので、ここで質問を思いつきました....

誰かがこの問題を解決する方法について考えている場合は、助けてください。または、あらゆる種類の参考資料をいただければ幸いです...お時間をいただきありがとうございます

作業スクリプト

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,
                    mainurl = 'assets/img/isbimg.jpg';
                childurl = '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
                L.control.layers({
                    Main: L.imageOverlay(mainurl, bounds),
                    Child: L.imageOverlay(childurl, bounds)
                }, null, { collapsed: false }).addTo(map);

                L.control.nanomeasure({ nanometersPerPixel: 10000 }).addTo(map);

                // tell leaflet that the map is exactly as big as the image
                map.setMaxBounds(bounds);

                L.tileLayer({
                    attribution: '<a href="http://smartminds.co">SmartMinds</a>',
                    maxZoom: 18
                }).addTo(map);

                //polygon area customization
                function showPolygonAreaEdited(e) {
                    e.layers.eachLayer(function (layer) {
                        showPolygonArea({ layer: layer });
                    });
                }
                function showPolygonArea(e) {
                    var userInputCustom = prompt("Please enter image name : choose between a to f");
                    featureGroup.addLayer(e.layer);
                    e.layer.bindPopup("<div style='width:200px;height:200px;background-image: url(assets/img/" + userInputCustom + ".png);background-size: 195px 195px;;background-repeat: no-repeat;'></div>");
                    e.layer.openPopup();
                }

            });
4

1 に答える 1

1

それらFeatureGroupとImageOverlayペアを にL.LayerGroup含めます。その後、これらのグループを切り替えることができます。次に、現在選択されているグループを追跡し、フィーチャをそのグループのフィーチャ レイヤーに追加できます。コメントを介してコードを使用すると、より適切に説明できます。

基本的なマップ、特別なことは何もありません:

var map = L.map('map', {
  'center': [0, 0],
  'zoom': 1,
  'layers': [
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      'attribution': 'Map data &copy; OpenStreetMap contributors'
    })
  ]
});

// Bounds for the map and imageoverlays    
var bounds = L.latLngBounds([[40.712216, -74.22655],[40.773941, -74.12544]]);

// Set bounds on the map
map.fitBounds(bounds);

グループ化部分:

// New layergroup, note it's not added to the map yet
var layerGroup = new L.LayerGroup(),
    imageOverlayUrl = 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Overlay 1&w=294&h=238',
    // New imageoverlay added to the layergroup
    imageOverlay = new L.ImageOverlay(imageOverlayUrl, bounds).addTo(layerGroup),
    // New featuregroup added to the layergroup
    featureGroup = new L.FeatureGroup().addTo(layerGroup);

// Second layergroup not added to the map yet
var layerGroup2 = new L.LayerGroup(),
    imageOverlayUrl2 = 'https://placeholdit.imgix.net/~text?txtsize=33&txt=Overlay 2&w=294&h=238',
    // New imageoverlay added to the second layergroup
    imageOverlay2 = new L.imageOverlay(imageOverlayUrl2, bounds).addTo(layerGroup2),
    // New featuregroup added to the second layergroup
    featureGroup2 = new L.FeatureGroup().addTo(layerGroup2);

両方のレイヤーグループがベースレイヤーとして追加されたデフォルトの drawcontrol と layercontrol:

var layerControl = new L.control.layers({
  'Group 1': layerGroup,
  'Group 2': layerGroup2
}).addTo(map);

var drawControl = new L.Control.Draw().addTo(map);

ここで魔法が起こります ;) :

// Variable to hold the selected layergroup's featuregroup.
var currentFeatureGroup;

// Catch the layer change event
map.on('baselayerchange', function (layersControlEvent) {
  // Loop over the layers contained in the current group
  layersControlEvent.layer.eachLayer(function (layer) {
    // If it's the imageoverlay make sure it's in the background
    if (layer instanceof L.ImageOverlay) {
      layer.bringToBack();
    // If not then it's the featuregroup, reference with variable.
    } else {
      currentFeatureGroup = layer;
    }
  });
});

// Catch draw created event    
map.on('draw:created', function (e) {
    // Store created feature into the current featuregroup
    currentFeatureGroup.addLayer(e.layer);
});

それでおしまい。例としてのかなり基本的なものですが、あなたがやりたいことをします。実際の実装は、たとえば、描画してベースレイヤー/オーバーレイが選択されていない場合に失敗するなど、エラー処理により異なるように見えます。プレビュー

于 2015-09-03T17:13:45.723 に答える