学习 leaflet-2
Posted craller
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习 leaflet-2相关的知识,希望对你有一定的参考价值。
接着是处理事件
例子是用户点击地图,导致地图触发‘click‘
事件
map.on(‘click‘, function(e) { alert(e.latlng); } );
Leaflet通过引用来处理事件侦听器,因此如果您想要添加侦听器并将其删除,请将其定义为一个函数:
function onClick(e) { ... } map.on(‘click‘, onClick); map.off(‘click‘, onClick);
这里我们可以写成:
function onMapClick(e) { alert("You clicked the map at " + e.latlng); } mymap.on(‘click‘, onMapClick);
监听器函数的第一个参数是一个事件对象 - 它包含有关发生事件的有用信息。例如,地图点击事件对象(e
在上例中)具有latlng
属性,该属性是发生点击的位置。
改进一下示例 点击地图,你会看到弹出的坐标:
function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(mymap); } mymap.on(‘click‘, onMapClick);
进入新的阶段--------------------------------------------------------------------------------------------------********
针对iPhone,iPad或android手机等移动设备调整的全屏地图,以及如何轻松检测并使用当前用户位置。
准备新的页面,像前面那个页面一样引入css和js
这里我们需要告诉移动浏览器禁用不必要的页面缩放,并通过在head
html部分或HTML页面中放置以下行来将其设置为实际大小
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
并且为了使我们的地图div
元素延伸到所有可用空间(全屏),我们可以使用下面的CSS代码
body { padding: 0; margin: 0; } html, body, #map { height: 100%; width: 100vw; }
初始化地图并且获取地图,像上一个页面一样
var map = L.map(‘map‘).fitWorld(); map.locate({setView: true, maxZoom: 16}); L.tileLayer(‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY3JhbGxlciIsImEiOiJjamdib3VwZ2kxN25kMzNtcXluaGowOXNmIn0.aPgP5OMOI0P4SU1OnN5i_Q‘, { attribution: ‘Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ? <a href="http://mapbox.com">Mapbox</a>‘, maxZoom: 18, id: ‘mapbox.streets‘ }).addTo(map);
这里的mapid是我的 也可以自己申请
地理位置获取:locate 用于将地图视图缩放到检测到的位置
map.locate({setView: true, maxZoom: 16});
在自动设置地图视图时,我们在此指定16作为最大缩放。只要用户同意共享位置并且浏览器检测到该位置,地图就会将视图设置为该位置。
locationfound
和locationerror
事件:
locationfound:在检测到的位置添加一个标记,通过locationfound
在locateAndSetView
调用之前向事件添加一个事件监听器来显示弹出窗口中的准确性:
function onLocationFound(e) { var radius = e.accuracy / 2; L.marker(e.latlng).addTo(map) .bindPopup("You are within " + radius + " meters from this point").openPopup(); L.circle(e.latlng, radius).addTo(map); } map.on(‘locationfound‘, onLocationFound);
但是,如果地理位置失败,则显示错误消息也会很好:
function onLocationError(e) { alert(e.message); } map.on(‘locationerror‘, onLocationError);
如果您将setView
选项设置为true并且地理位置失败,则会将视图设置为全局。
下一个示例------------------------------------------------------------------------------------------------------****
自定义图标的标记
定义自己的图标以供放置在地图上的标记使用。
要制作自定义图标,我们通常需要两个图像 - 实际图标图像和其阴影图像。
创建图标:
Leaflet中的标记图标由L.Icon对象定义,在创建标记时作为选项传递。先创建一个黄色的叶子图标:
var yellowIcon = L.icon({ iconUrl: ‘http://leafletjs.com/examples/custom-icons/leaf-orange.png‘, shadowUrl: ‘http://leafletjs.com/examples/custom-icons/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 });
在地图上放此标记:
L.marker([51.5,0.09],icon:{yellowIcon}).addTo(map)
定义一个图标类:
如果我们需要创建多个共同点的图标呢?那就要我们自己定义自己的包含共享选项的图标类,继承自L.Icon
!
var LeafIcon = L.Icon.extend({ options: { shadowUrl: ‘leaf-shadow.png‘, iconSize: [38, 95], shadowSize: [50, 64], iconAnchor: [22, 94], shadowAnchor: [4, 62], popupAnchor: [-3, -76] } });
现在可以从这个类中创建所有三个叶子图标并使用它们:
var greenIcon = new LeafIcon({iconUrl: ‘leaf-green.png‘}),
redIcon = new LeafIcon({iconUrl: ‘leaf-red.png‘}),
orangeIcon = new LeafIcon({iconUrl: ‘leaf-orange.png‘});
最终在地图上放置一些带有这些图标的标记:
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf."); L.marker([51.495, -0.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf."); L.marker([51.49, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");
ok 图标放置完成
以上是关于学习 leaflet-2的主要内容,如果未能解决你的问题,请参考以下文章