基于Leaflet的全景综合展示实战

众所周知，当前许多GIS类应用底图数据都是有层级限制。在一些需要高清晰的实景展示需求下，就必须要结合一些更接近真实的展示。比如倾斜摄影测量、Bim技术、全景展示技术。而从经济成本和时间成本上来比较，全景展示技术成本较低，制作流程简单（基于全景图片，可使用外部软件辅助生成，参见《实战!使用pano2vr生成html5全景页面》）。

通过本文可掌握如何使用LeafLet结合全景信息，构建真实的全景综合展示。模拟在地图上显示带了全景数据的marker，点击每个marker将调用具体的全景页面。

前端技术：Html5+JQuery2.3+Leaflet1.7.1+Layer2.3(弹窗)

第一步、Leaflet引入（详情参考：gis信息可视化之一Leaflet组件介绍）

L.CRS.CustomEPSG4326 = L.extend({}, L.CRS.Earth, {
   
       code: 'EPSG:4326',    projection: L.Projection.LonLat,    transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5),    scale: function (zoom) {
   
         return 256 * Math.pow(2, zoom - 1);    }  });
  //指定底图的投影，不能放在图层里面，否则坐标有偏移    var mymap = L.map('mapid',{crs:L.CRS.CustomEPSG4326}).setView([30.673828, 113.554688], 5);

这里顺便演示了如何在leaflet中使用经纬度投影的数据，如何做投影转换。

第二步、设置标签底图

//标签    L.tileLayer('http://localhost:8086/data/basemap_nowater/1-10label/{z}/{x}/{y}.png', {maxZoom: 10,minZoom:1,      id: 'mapbox/label',tileSize: 256,zoomOffset: -1    }).addTo(mymap);

第三步、准备全景数据接口

var local =["31.015279,121.552734","23.563987,115.708008","28.863918,112.587891","30.543339,112.983398","29.305561,103.535156"];var cityInfo = ["上海市","广州市","长沙市","武汉市","成都市"];

备注：以上数据仅供参考，实际使用可基于后台接口

第四步、设置标绘marker

var camareIcon = L.icon({
   
       iconUrl: 'images/camera.jpg',    iconSize: [25, 25],    iconAnchor: [25, 25],    popupAnchor: [-13, -26]  });

第五步、把目标数据和marker绑定

for(var i=0;i<5;i++){
   
         var localStr = local[i];      var city = cityInfo[i];      var latLng = L.latLng(localStr.split(",")[0], localStr.split(",")[1]);      var camareMarker = L.marker(latLng,{icon:camareIcon,title:city});      camareMarker.addTo(mymap);      camareMarker.on("click",onCamareMarkerClick);    }

第六步、设置marker的点击事件

function onCamareMarkerClick(e) {
   
       layer.open({
   
         type: 2,      title: false,//不需要title，页面更美观      fix: false,      shadeClose: false,      maxmin: false,      area: ['80%', '90%'],      content: 'http://localhost:8086/fullview/qj4/qj4.html',      end: function(){
   
         }    });  }

通过以上步骤基本就可以完成需求，将全景目标点在地图上定位，点击全景目标点，可以弹出全景页面，并可以操作全景图。

第七步、综合展示成果（示意）

marker标定

非目标点点击

基于Leaflet的全景综合展示实战

Guess you like