官方解析

这个内容主要是把自定义图片，放到地图上，并且还可以增加阴影图片，以及点击图片后的弹出事件。

官方是准备了下面这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: '&copy; <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笔记相关推荐

Leaflet文档阅读笔记-Quick Start Guide笔记
目录网络加载JS和CSS 初始化地图在地图上做标记在地图上点击事件获得坐标个人对这篇文档的体会网络加载JS和CSS 先要加载css,然后在加载js <link rel="st ...
Leaflet文档阅读笔记- Showing video files解析
目录官方解析博主例子官方解析这里,官方首先告诉我们,当<video>这个标签还没出现的时候,在web上展示视频是很艰巨的.现在有了这个标签,只需要如下代码就能在web页面上展示视频 ...
Leaflet文档阅读笔记-Extending Leaflet: Handlers and Controls笔记
目录官方解析博主栗子官方解析 Leaflet 1.0中出现了处理者这个新概念,处理浏览器里的dom事件单击,双击,地图滑动及map状态的改变. 当处理者启动时调用addHooks()函数,未启动 ...
Leaflet文档阅读笔记-Zoom levels笔记
目录官方解析博主例子官方解析把地图放缩锁定到0级 var map = L.map('map', {minZoom: 0,maxZoom: 0 });var cartodbAttribution ...
Leaflet文档阅读笔记-Using GeoJSON with Leaflet笔记
目录官方解析博主例子官方解析个人觉得这官方教程给得是相当的好,因为功能非常的强大,在此记录下,方便以后使用,以后肯定会经常用到! 此节将会学到从GeoJson对象中创建且调用map vecto ...
Leaflet文档阅读笔记-Leaflet on Mobile笔记
目录 CSS和HTML改如何设置定位功能 CSS和HTML改如何设置如下的设置: body {padding: 0;margin: 0; } html, body, #map {height: 1 ...
Qt文档阅读笔记-共享库的创建与调用
使用共享库的符号这个符号可以作用在变量.类.函数中,并且这些都可以被调用端使用. 在编译共享库中,需要使用export符号.在使用端调用的时候使用import符号. 这里是本人从文档中记录的笔记,大 ...
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图 QHeightMapSurfaceDataProxy:是Q3DSurface的一个基本代理类. 他是专门加载高度图. 高度图是没有X, ...
Qt文档阅读笔记-Rotations Example相关
Rotations Example文档阅读笔记使用这种方式,对y轴和z轴进行旋转. QQuaternion yRotation = QQuaternion::fromAxisAndAngle(0.0 ...

Leaflet文档阅读笔记-Markers With Custom Icons笔记

官方解析

博主例子

Leaflet文档阅读笔记-Markers With Custom Icons笔记相关推荐

最新文章

热门文章