问是否将图层和图层控件添加到自定义地图？
EN

Stack Overflow用户

提问于 2018-06-07 18:46:05

回答 1查看 740关注 0票数 0

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

这是我的代码，它可以在没有图层组和图层控件的情况下工作，有没有人可以教我怎么做？谢谢！

https://jsfiddle.net/x8q4eomd/5/

    <!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>

leaflet

回答 1

Stack Overflow用户

发布于 2018-06-07 23:18:39

@Adawong。你需要在Javascript中设置它，才能像这样在leaflet中添加多个层。

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

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50739264

复制

相似问题

问是否将图层和图层控件添加到自定义地图？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否将图层和图层控件添加到自定义地图？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否将图层和图层控件添加到自定义地图？
EN