leaflet - 将图层和图层控件添加到自定义地图?
问题描述
我正在尝试为游戏构建自定义地图并在其上放置标记,我的地图和我的标记也在工作,但我想制作一组标记,我不明白该怎么做,我已经尝试过这个例子的网站,但没有成功,我得到了一个白屏......:图层控制传单教程
这是我的代码,它在没有图层组和图层控件的情况下工作,有人可以告诉我怎么做吗?谢谢 !
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>
解决方案
@阿达旺。您需要在 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 来展示层的工作原理?点击这里
推荐阅读
- gateway - 由于凭证名称,使用 SDS 的 Istio Ingress Gateway 失败
- data-structures - 求解线性规划中的负系数
- git - 如何将远程分支重置为旧提交
- vba - 如何从表格中填充报表中的未绑定文本?
- excel - 当在该范围内添加值时,有没有办法让范围自动排序?
- python - 如何使用字典理解有条件地替换键
- tableau-api - 如何在与正在计算的字段相同的工作表中隐藏 Table Calc 中的空白列?(画面)
- python - 在 Ubuntu 上安装 Python
- javascript - 为什么我收到 TypeError:无法读取未定义的属性“长度”?
- javascript - javascript - 菜单在页面加载时打开