Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to load online slice Map in Leaflet

2025-01-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Internet Technology >

Share

Shulou(Shulou.com)06/01 Report--

这篇文章主要介绍Leaflet中如何加载在线切片地图,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

Leaflet是适用于桌面端和移动端交互地图的开源JavaScript类库。JS库的大小经过压缩后有38k左右,拥有开发者需要的全部地图功能。

Leaflet保持着简单、性能和实用性的设计思想。可以在所有主要的桌面和移动端平台上高效的运转,可以扩展插件,它有一个漂亮、易用和文档清晰的API,有一个简单、易读的源代码。

Leaflet可以加载在线的地图切片,下边列举一个加载esri在线的街道图和大数据底图:

//定义esri的卫星图地址var Esri_WorldImagery = L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri - Source: Esri, i-cubed, USDA, USGS'});//定义esri的大数据图地址 var Esri_DarkGreyCanvas = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', { subdomains: "1234" });//设置图层组var baseLayers = {"卫星图": Esri_WorldImagery,"虚化底图": Esri_DarkGreyCanvas};//初始化leaflet地图,加载影像地址和缩放级别var map = L.map('map', {layers: [Esri_WorldImagery],minZoom: 2,maxBounds: [[-90, -180],[90, 180]]});//在图层控制的控件上显示两个地图图层,并添加到地图var layerControl = L.control.layers(baseLayers);layerControl.addTo(map);return {map: map,layerControl: layerControl};

//加载图层的效果图

That's all for "How to load online slice maps in Leaflet." Thanks for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Internet Technology

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report