Leaflet文档阅读笔记-Markers With Custom Icons笔记
生活随笔
收集整理的這篇文章主要介紹了
Leaflet文档阅读笔记-Markers With Custom Icons笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
?
官方解析
博主例子
?
官方解析
這個內容主要是把自定義圖片，放到地圖上，并且還可以增加陰影圖片，以及點擊圖片后的彈出事件。
官方是準備了下面這4張圖片：
使用下面這種方式可以單獨設置，自定義圖標
var greenIcon = L.icon({iconUrl: 'leaf-green.png',shadowUrl: 'leaf-shadow.png',iconSize: [38, 95], // size of the iconshadowSize: [50, 64], // size of the shadowiconAnchor: [22, 94], // point of the icon which will correspond to marker's locationshadowAnchor: [4, 62], // the same for the shadowpopupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor });隨后增加到地圖上：
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);運行截圖如下：
在后面本人的例子中！
這里目前暫時把iconAnchor設置為[圖片的寬度/2，圖片的高度]
下面是定義一個類，然后簡單調用的例子:
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.");最后帖下官方全部代碼！
<!DOCTYPE html> <html> <head><title>Custom Icons Tutorial - Leaflet</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.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/><script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script><style>html, body {height: 100%;margin: 0;}#map {width: 600px;height: 400px;}</style></head> <body><div id='map'></div><script>var map = L.map('map').setView([51.5, -0.09], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);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}).bindPopup("I am a green leaf.").addTo(map);L.marker([51.495, -0.083], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);L.marker([51.49, -0.1], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);</script></body> </html>?
博主例子
這里采用本地的GIS服務，搭建方式看此博文，在此不再贅述
https://blog.csdn.net/qq78442761/article/details/100581622
程序運行截圖如下：
并且還增加了彈窗響應
函數和理論都是上面官方的，在此不多說，直接上代碼！
<!DOCTYPE html> <html> <head><title>Hello Test4</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="leaflet.css" /><script src="leaflet.js"></script> <script src="leaflet-tilelayer-wmts-src.js"></script><script src="echarts.js"></script><style>html, body {height: 100%;margin: 0;}#map {width: 100%;height: 100%;}.chart{width: 600px;height: 300px;background-color: #fff;}</style></head> <body><div id='map'></div><script type="text/javascript">var ign = new L.TileLayer.WMTS( "http://XXX,XXX,XXX,XXX:8080/geoserver/gwc/service/wmts" ,{layer: 'GG_9:gg_9',tilematrixset: "EPSG:900913",Format : 'image/png',TileMatrix: 'EPSG:900913:8'});var map = L.map('map', {minZoom: 6,maxZoom: 7}).setView([32, 118], 7);L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);map.addLayer(ign);map.invalidateSize(true);var popup = L.popup();function onMapClick(e) {popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(map);}map.on('click', onMapClick);//新加的代碼var marker1 = L.icon({iconUrl: "img/marker1.png",iconSize: [128, 128],iconAnchor: [64, 128]});L.marker([32.3, 118.8], {icon: marker1}).addTo(map).bindPopup("南京的BOSS");var marker2 = L.icon({iconUrl: "img/marker2.png",iconSize: [128, 128],iconAnchor: [64, 128]});L.marker([31.4, 121.4], {icon: marker2}).addTo(map).bindPopup("上海的BOSS");var marker3 = L.icon({iconUrl: "img/marker3.png",iconSize: [128, 128],iconAnchor: [64, 128]});L.marker([34.7, 119.2], {icon: marker3}).addTo(map).bindPopup("連云港BOSS");//新添加法var OtherIcon = L.Icon.extend({options:{iconSize: [128, 128],iconAnchor: [64, 128]}});var marker4 = new OtherIcon({iconUrl: 'img/marker4.png'});var marker5 = new OtherIcon({iconUrl: 'img/marker5.png'});L.marker([34.9, 113.6], {icon: marker4}).addTo(map).bindPopup("鄭州BOSS");L.marker([30.8, 114.3], {icon: marker5}).addTo(map).bindPopup("武漢BOSS");//新加的代碼</script></body> </html>?
總結
以上是生活随笔為你收集整理的Leaflet文档阅读笔记-Markers With Custom Icons笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 云主机开放端口笔记-mysql远程连接需
- 下一篇： Leaflet文档阅读笔记-Zoom l