扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍Leaflet中如何加载在线切片地图,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联建站专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、网站设计、外贸网站建设、鞍山网络推广、微信小程序、鞍山网络营销、鞍山企业策划、鞍山品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联建站为所有大学生创业者提供鞍山建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
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 };
//加载图层的效果图
以上是“Leaflet中如何加载在线切片地图”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流