leaflet加载瓦片地图_leaflet加载在线地图资源-CSDN文库

共213个文件

png：107个

jpg：103个

css：1个

需积分: 15 69 浏览量 2022-08-09 17:23:58 上传评论收藏 2.12MB RAR 举报

Leaflet是一个轻量级的JavaScript库，用于在网页上创建交互式地图。它以其易用性和灵活性而受到广泛的欢迎，尤其适合开发WebGIS应用。在本文中，我们将深入探讨如何使用Leaflet加载瓦片地图以及添加Marker。我们要了解什么是瓦片地图。瓦片地图是一种将大范围地理信息分割成小块（通常为256x256像素的图像），这些小块被称为瓦片，然后根据需要动态加载。这种方式可以有效地减少地图加载时间和提高性能。在Leaflet中，我们可以通过L.TileLayer类来加载瓦片地图。以下是一个基本示例： ```javascript var map = L.map('mapid').setView([51.505, -0.09], 13); // OpenStreetMap是免费的公开地图源 var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); ``` 这段代码创建了一个地图对象，并设置了初始视图。然后，通过调用L.tileLayer函数，我们定义了瓦片的URL模板和属性，最后将这个瓦片图层添加到地图上。接下来，我们讨论如何在地图上添加Marker。Marker是Leaflet中表示地图上特定位置的图形元素。以下是如何创建和添加Marker的代码： ```javascript var marker = L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS3 popup.<br> Easily customizable.') .openPopup(); ``` 这里，我们创建了一个Marker，设置了它的坐标，将其添加到地图上，并绑定了一个弹出窗口（Popup）显示文本信息。`openPopup()`方法使得Marker加载时弹出窗口自动打开。除了基本的Marker，Leaflet还支持自定义图标，你可以通过L.Icon类创建自己的图标样式： ```javascript var customIcon = L.icon({ iconUrl: 'path/to/your/custom-icon.png', iconSize: [38, 95], iconAnchor: [22, 94], popupAnchor: [-3, -76] }); var customMarker = L.marker([51.5, -0.09], {icon: customIcon}).addTo(map); ``` 在这个例子中，我们创建了一个新的图标对象，指定了图标图片路径、大小、锚点位置，然后创建了一个使用该图标的Marker。 Leaflet提供了一套强大且易于使用的API，使开发者能够轻松地在网页上实现瓦片地图的加载和交互功能。结合Marker和其他组件，你可以构建出各种复杂且功能丰富的地图应用。在实际项目中，你还可以探索更多的Leaflet插件和扩展，以满足更多定制化需求。

资源详情

资源评论

资源推荐

收起资源包目录

leaflet 加载瓦片地图（213个子文件）

leaflet.css 14KB

index.html 3KB

388.jpg 7KB

387.jpg 7KB

194.jpg 7KB

385.jpg 7KB

384.jpg 7KB

191.jpg 7KB

192.jpg 7KB

386.jpg 7KB

193.jpg 7KB

95.jpg 7KB

388.jpg 7KB

383.jpg 7KB

386.jpg 7KB

191.jpg 7KB

385.jpg 7KB

193.jpg 6KB

191.jpg 6KB

383.jpg 6KB

387.jpg 6KB

386.jpg 6KB

384.jpg 6KB

383.jpg 6KB

96.jpg 6KB

95.jpg 6KB

385.jpg 6KB

191.jpg 6KB

386.jpg 6KB

388.jpg 6KB

386.jpg 6KB

193.jpg 6KB

192.jpg 6KB

191.jpg 6KB

385.jpg 6KB

387.jpg 6KB

95.jpg 6KB

387.jpg 6KB

383.jpg 6KB

96.jpg 6KB

387.jpg 6KB

385.jpg 6KB

384.jpg 6KB

191.jpg 6KB

383.jpg 6KB

387.jpg 6KB

383.jpg 6KB

385.jpg 6KB

192.jpg 6KB

383.jpg 6KB

385.jpg 6KB

386.jpg 6KB

384.jpg 6KB

386.jpg 6KB

388.jpg 6KB

384.jpg 6KB

387.jpg 6KB

193.jpg 6KB

384.jpg 6KB

387.jpg 6KB

384.jpg 6KB

193.jpg 6KB

383.jpg 6KB

192.jpg 6KB

193.jpg 6KB

192.jpg 6KB

384.jpg 6KB

385.jpg 6KB

386.jpg 6KB

385.jpg 6KB

387.jpg 6KB

384.jpg 6KB

383.jpg 6KB

96.jpg 6KB

194.jpg 6KB

386.jpg 6KB

388.jpg 6KB

387.jpg 5KB

388.jpg 5KB

389.jpg 5KB

194.jpg 4KB

97.jpg 4KB

388.jpg 4KB

97.jpg 4KB

389.jpg 4KB

194.jpg 3KB

389.jpg 3KB

388.jpg 3KB

389.jpg 3KB

388.jpg 3KB

389.jpg 3KB

共 213 条

<!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.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script> <style> html, body { height: 100%; margin: 0; } #map { width: 900px; height: 900px; } .leaflet-container{ background: rgba(0,0,0,0); } </style> </head> <body> <div id='map'></div> <script> // 限制地图展示范围 var corner1 = L.latLng(41.22820, 126.05230), //设置左上角经纬度 corner2 = L.latLng(39.62679, 123.03930), //设置右下点经纬度 bounds = L.latLngBounds(corner1, corner2); //构建视图限制范围 var mymap = L.map('map',{maxZoom:10,minZoom:8,maxBounds: bounds}).setView([40.476203, 124.348755], 9); var mapLayers = L.layerGroup([ L.tileLayer('./satellite/{z}/{x}/{y}.jpg', { // maxZoom: 20, // minZoom: 3, }), L.tileLayer( './overlay/{z}/{x}/{y}.png', { // maxZoom: 20, // maxNativeZoom: 18, // minZoom: 3, opacity: 0.8 }) ]).addTo(mymap) let markerArr=[ { lat:40.476203, lng:124.348755, link:'http://www.JD.com', iconURL:'leaf-green.png', },{ lat:40.56203, lng:124.348755, link:'http://www.taobao.com', iconURL:'leaf-red.png', },{ lat:40.476203, lng:124.48755, link:'http://www.baidu.com', iconURL:'leaf-orange.png', }, ] for (var i =0 ; i < markerArr.length; i++) { let obj=markerArr[i]; //自定义图标展示在地图上 var greenIcon = L.icon({ iconUrl: obj.iconURL, 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 }); L.marker([obj.lat, obj.lng], {icon: greenIcon}).addTo(mymap).on('click', function (e){ // alert(obj.link) window.location.href=obj.link }) } </script> </body> </html>