二维地图 Leaflet知识
2021/5/24 10:27:49
本文主要是介绍二维地图 Leaflet知识,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
第一步:插入渲染元素
1 <div id="cesiumContainer"></div>
第二步:添加样式
1 #cesiumContainer { 2 position: absolute; 3 width: 100%; 4 height: 100%; 5 z-index: 10; 6 }
第三步:创建地图
1 let map = L.map('cesiumContainer',{ 2 center: [center_lat, center_lng], 3 crs: L.CRS.EPSG4326, 4 zoom: 8, 5 zoomControl: false, // 隐藏缩放按钮 6 });
第四步:添加底图
1 let img_url = 'http://t{s}.tianditu.gov.cn/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=87c942f4f4a2b17270f52f797df4537c'; 2 let cia_url = 'http://t{s}.tianditu.gov.cn/cia_c/wmts?&layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=87c942f4f4a2b17270f52f797df4537c'; 3 this.tileLayer = L.tileLayer(img_url, { 4 subdomains: [0, 1, 2, 3, 4, 5, 6, 7], // 天地图有7个服务节点,代码中不固定使用哪个节点的服务,而是随机决定从哪个节点请求服务,避免指定节点因故障等原因停止服务的风险 5 minZoom: 2, 6 maxZoom: 17, 7 zoomOffset: 1 8 }).addTo(map); // 影像图 9 let labelTileLayer = L.tileLayer(cia_url, { 10 subdomains: [0, 1, 2, 3, 4, 5, 6, 7], // 天地图有7个服务节点,代码中不固定使用哪个节点的服务,而是随机决定从哪个节点请求服务,避免指定节点因故障等原因停止服务的风险 11 minZoom: 11, 12 maxZoom: 17, 13 zoomOffset: 1 14 }).addTo(map); // 文字注记图
第五步:定位到相应范围
1 let latlngs = []; 2 latlngs.push([MaxMinXYData.miny,MaxMinXYData.minx]); 3 latlngs.push([MaxMinXYData.maxy,MaxMinXYData.minx]); 4 latlngs.push([MaxMinXYData.maxy,MaxMinXYData.maxx]); 5 latlngs.push([MaxMinXYData.maxy,MaxMinXYData.maxx]); 6 latlngs.push([MaxMinXYData.miny,MaxMinXYData.minx]); 7 var bound_Polygon = L.polyline(latlngs); 8 map.fitBounds(bound_Polygon.getBounds());
这篇关于二维地图 Leaflet知识的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-21订单系统资料入门教程:轻松管理你的订单
- 2024-09-21Java部署资料:新手入门教程
- 2024-09-21Java部署资料:新手入门教程
- 2024-09-21Java订单系统资料:新手入门教程与实战指南
- 2024-09-21Java管理系统资料入门教程
- 2024-09-21从零开始学习Java监控系统资料
- 2024-09-21Java就业项目资料:新手入门的必备教程
- 2024-09-21Java全端资料:初学者指南
- 2024-09-21Java全栈资料入门教程及资源汇总
- 2024-09-21Java日志系统资料入门教程