基于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​​​​​​​

ar 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标定

非目标点点击