Question

我正在尝试为游戏构建自定义地图并在其上放置标记，我的地图正在工作，我的标记也在，但我想制作一组标记，我不明白该怎么做，我有尝试了网站的例子，但没有成功，我得到了一个白屏...：layers control leaflet tutorial

这是我的代码，它没有图层组和图层控件，有人可以告诉我该怎么办？谢谢！

    <!DOCTYPE html>
              <html>
<head>

    <title>Bless Online Map</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>


    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #map {
            width: 5400px;
            height: 5400px;
        }
    </style>


</head>
<body>

<div id='map'></div>

<script>

    var map = L.map('map', {
        crs: L.CRS.Simple,
        minZoom: -3
    });

    var yx = L.latLng;

    var xy = function(x, y) {
        if (L.Util.isArray(x)) {    // When doing xy([x, y]);
            return yx(x[1], x[0]);
        }
        return yx(y, x);  // When doing xy(x, y);
    };
var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

    var bounds = [xy(0, 0), xy(5400, 5400)];
    var image = L.imageOverlay('https://i.imgur.com/h5O086f.jpg', bounds).addTo(map);
    var sol      = xy(2260, 2158);
    var mizar    = xy( 3508, 2690);
    var kruegerZ = xy( 13.4,  56.5);
    var deneb    = xy(218.7,   8.3);

    L.marker(     sol).addTo(map).bindPopup(      'Donjon 1 ');
    L.marker(   mizar).addTo(map).bindPopup(    'Donjon 2');
    L.marker(kruegerZ).addTo(map).bindPopup('Donjon 3');
    L.marker(   deneb).addTo(map).bindPopup(    'Donjon 4');



    map.setView(xy(4000, 1000), 0);

</script>



</body>
</html>

Answer 1

@Adawong。您需要在Javascript中设置它以在传单中添加多个图层，

layers: {
            baselayers: {                    
                topo: {
                    name: "ArcGISStreets",
                    type: "agsBase",
                    layer: "Topographic",
                    visible: true
                },
                osm: {
                    name: 'OpenStreetMap',
                    url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    type: 'xyz'
                     }
            }

}

我在Angular-Leaflet-Directive项目中使用了这个图层，我创建了示例JSFiddle来展示图层的工作原理？ Click here

参考资料来源：Browse all sample Angular-Leaflet projects here

将图层和图层控件添加到自定义地图？

1 个答案: