上传遥感图像在地图上自动加载到地图上

目录

这里用的主要框架为：

前期提要：

大致思路为：

一.环境部署

二.前端上传

 三.后端接收,提取信息

四.上传至Geoserver

五.vue前端获取视图

总结：

---

这里用的主要框架为：

vue，leaflet，flask，geosever，mysql

前期提要：

主要是业务需求一个功能，就是上传自己的航拍底图，然后在地图上能展示出自己的底图，还要能打开关闭该功能。

大致思路为：

1.前端获取tiff文件并上传

2.后端接收文件，并提取关键信息或图片特征，为后续地图上加载使用

3.提取出特征保存进数据库，然后将图片上传至Geosever

4.前端获取当前地图的视图信息，并发送至后端和已知提取的特征对比判断

5.若当前视图存在，则通过wms服务加载该地图到leaflet上

一.环境部署

根据实际情况去看待，框架并不一定要完全与我相同，跳过。

二.前端上传

我这里用的是elui的组件

 三.后端接收,提取信息

我的思路大概就是提取中心点和中心点到图像的任意一角的距离为特征，提取完后入库。 

 

四.上传至Geoserver

下面链接有具体方法，根据实际情况，修改一下就行，主要就是改一下图层名和路径就行。

python用geoserver自动发布tif数据_coderMXL的博客-优快云博客_geoserver 自动发布

五.vue前端获取视图

（1）map是leaflet实例出来的map = L.map(domId, option)

 var cen = map.getCenter()
 var vfirstside = cen.lng - map.getBounds().getSouthWest().lng
 var vsecendside = cen.lat - map.getBounds().getSouthWest().lat
 var viewR = vfirstside * vfirstside + vsecendside * vsecendside

 获取到的就是浏览器地图的视图半径和视图中心。

（2）根据视图半径和视图中心，去和后端提取的特征作对比，若存在，则返回图层名称。

（3）根据返回的图层名称去加载wms地图服务

 layerGroups = new L.FeatureGroup({
    zoomOffset: -1,
    tileSize: 512,
    maxZoom: 100,
    minNativeZoom: 0,
    maxNativeZoom: 100
  }).addTo(map)
var a = L.tileLayer
              .wms('http://服务器地址/geoserver/图层名/wms', {
                layers: 图层名:文件名,
                service: 'WMS',
                transparent: true,
                format: 'image/png',
                crs: L.CRS.EPSG4326,
                maxZoom: 100
              })
              .addTo(map)
            layerGroups.addLayer(a) //加入图层组

总结：

这里实现的是一个上传自己的高清航拍地图后自适应加载到瓦片地图上的完整流程，主要是自动化，即一次上传完成所有工作，不用在后端与geoserver之间来回工作。