GeoServer+Vue+Leaflet搭建簡單的Gis應用

一、GeoServer

1、簡單介紹

  GeoServer是OGC Web服務器規範的J2EE實現，利用GeoServer可以方便地發佈地圖數據，允許用戶對特徵數據進行更新、刪除、插入操作，通過GeoServer可以比較容易地在用戶之間迅速共享空間地理信息。GeoServer是開源軟件。

  GeoServer主要包含如下一些特點：

• 兼容WMS和WFS特性
• 支持PostGIS、Shapefile、ArcSDE、Oracle、VPF、MySQL、MapInfo
• 支持上百種投影
• 能夠將網絡地圖輸出爲JPEG、GIF、PNG、SVG、KML等格式
• 能夠運行在任何基於J2EE/Servlet容器之上
• 嵌入MapBuilder支持AJAX的地圖客戶端OpenLayers

2、安裝

2.1、下載

進入官網進行下載http://geoserver.org/download/

點擊後自動下載壓縮包

2.2、安裝和配置端口

下載好解壓安裝文件，找到根目錄下的start.ini文件進行配置服務的端口信息，默認端口是8080

修改端口爲自己需要的端口，我這裏設置的8880端口

2.3、啓動服務

運行bin目錄下的startup.bat(Windows)或者startup.sh(Linux)啓動服務，啓動成功後可以看到成功標識。另外，服務依賴Java環境，Java環境請自行安裝。

3、使用

3.1、登錄

啓動好服務後打開http://127.0.0.1:8880/geoserver/web/（注意端口號寫成自己前面配置的端口號），輸入默認用戶名密碼（admin/geoserver）進入系統。

3.2、創建工作區

工作區的概念就和tomcat發佈的項目目錄一樣，默認工作區就是ROOT目錄。

3.3、添加數據存儲

GeoServer支持的數據源很多，有矢量數據源（Vector Data Sources），柵格數據源（Raster Data Sources）等等。這裏我們選擇GeoTIFF，轉化的帶有地理座標的TIFF格式（下個章節會介紹怎麼製作TIFF格式的數據源）的圖片加載進來即可。

工作區選擇剛剛創建的工作區，添加數據源名稱，最後連接參數裏面選擇本地磁盤的tif文件就添加就可以，注意這個目錄顯示的是發佈GeoServer服務的那臺機子磁盤目錄。
保存後直接點擊發布，直接發佈就可以。

點擊發布後會讓先設置圖層信息，按照自己的需求設置好圖層，點擊保存就可以了。

最後我們點擊預覽，看看發佈後的效果圖。

這個是我用cad設計圖做的一個圖層，看着效果不是很好，大家可以按自己需求進行設計，整個GeoServer地圖的發佈工作完成。

二、jpg格式製作TIFF格式的地圖資源

1、安裝ArcGis

ArcGis是我們製作地圖最常用的軟件，網上的安裝教程也比較多，大家可以自行下載安裝。
打開ArcMap把圖片拖入到圖層中。

2、添加座標系投影

打開ArcToolbox工具包選擇Data Management Tools->Projections and Transformations->Define Projection。

選擇剛纔添加的圖片，底下的座標系選擇WGS 1984，點擊確定進行投影。

3、地圖進行配準

對圖片進行座標系投影后，需要進行經緯度的配準，在工具欄位置右鍵，選擇Georeferencing工具。

選擇設置配準點，右鍵選擇第二個input DMS of Lon and Lat那個選項，設置點的經緯度信息，設置3-4個點就可以配準。

如果設置經緯度的選項是灰色的不可輸入，圖層沒有設置座標系，右鍵圖層選擇屬性，選擇座標系的選項卡，然後選擇WGS 1984座標系就可以了。

4、導出TIFF文件

右鍵圖片選擇Data->Export Data，把路徑改成文件夾，然後格式化和文件名選tiff的，點擊保存就導出了。

三、Leaflet+Vue加載高德地圖+自定義地圖

1、介紹

Leaflet 是一個爲移動設備設計的交互式地圖的開源的 javascript庫， 並只有38k，包含了大多數開發者需要的地圖特點。
官網地址： https://leafletjs.com/

2、安裝

直接npm安裝，官網下載

npm install leaflet

3、Vue配合使用

調用之前發佈的地圖服務，然後再地圖上添加line和marker。

import L from "leaflet";
import "leaflet/dist/leaflet.css";
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
export default {
  data(){
    return {
        map:{}
    }
  },
  mounted(){
      this.initMap();
  },
  methods: {
      initMap() {
      //這裏設置marker的圖標，不設置可能不顯示，可以寫到main.js裏面全局設置
      	let DefaultIcon = L.icon({
    		iconUrl: icon,
		    shadowUrl: iconShadow
		});
		L.Marker.prototype.options.icon = DefaultIcon;
          var wmsLayer= L.tileLayer.wms(
              "http://127.0.0.1:8880/geoserver/zxhy/wms", { // 鏈接要改對應的
                  layers: 'zxhy:test',//需要加載的圖層,就是我們剛剛新建的。map 和 圖層名
                  format: 'image/png',//返回的數據格式
                  transparent: true
              }
          );
          this.map = L.map("map", {
              center: [22.222466,118.058111],
              zoom: 15,
              layers: [wmsLayer],
              zoomControl: false
          });
          L.control.zoom({
              zoomInTitle: '放大',
              zoomOutTitle: '縮小'
          }).addTo(this.map);
          L.polyline([[28.222466,113.058111], [28.222566,113.058611],[28.222486,113.058711]],{color:'green'}).addTo(this.map).bindPopup("2020-06-30巡檢路徑");
          L.marker([28.222466,113.058111]).addTo(this.map).bindPopup("1號巡檢點");
          L.marker([28.222566,113.058611]).addTo(this.map).bindPopup("2號巡檢點");
          L.marker([28.222486,113.058711]).addTo(this.map).bindPopup("3號巡檢點");
      }
}

4、配合谷歌和高德地圖使用

配合高德或者谷歌地圖可以下載Leaflet.ChineseTmsProviders插件，裏面收集了各種第三方的地圖庫鏈接，可以方便調用，下載好直接引用就可以了。
GitHub地址：https://github.com/htoooth/Leaflet.ChineseTmsProviders
附上最後完整的代碼

import L from "leaflet";
import "leaflet/dist/leaflet.ChineseTmsProviders.js";
import "leaflet/dist/leaflet.css";
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
export default {
  data(){
    return {
        map:{}
    }
  },
  mounted(){
      this.initMap();
  },
  methods: {
      initMap() {
      //這裏設置marker的圖標，不設置可能不顯示，可以寫到main.js裏面全局設置
      	let DefaultIcon = L.icon({
    		iconUrl: icon,
		    shadowUrl: iconShadow
		});
		L.Marker.prototype.options.icon = DefaultIcon;
        var wmsLayer= L.tileLayer.wms(
              "http://192.168.1.254:8880/geoserver/zxhy/wms", { // 鏈接要改對應的
                  layers: 'zxhy:cshy',//需要加載的圖層,就是我們剛剛新建的。map 和 圖層名
                  format: 'image/png',//返回的數據格式
                  transparent: true
              }
          );
          /**
           * 谷歌
           */
          var GoogleNormal = L.tileLayer.chinaProvider('Google.Normal.Map', {
                  maxZoom: 18,
                  minZoom: 5
              }),
              Googleimgem = L.tileLayer.chinaProvider('Google.Satellite.Map', {
                  maxZoom: 18,
                  minZoom: 5
              }),
              Googleimga = L.tileLayer.chinaProvider('Google.Satellite.Annotion', {
                  maxZoom: 18,
                  minZoom: 5
              });
          var Googleimage = L.layerGroup([Googleimgem, Googleimga,wmsLayer]);
          var GoogleMap = L.layerGroup([GoogleNormal,wmsLayer]);

          /**
           * 高德地圖
           */
          var GaodeNormal = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
              maxZoom: 18,
              minZoom: 5
          });
          var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
              maxZoom: 18,
              minZoom: 5
          });
          var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
              maxZoom: 18,
              minZoom: 5
          });
          var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga,wmsLayer]);
          var GaodeMap = L.layerGroup([GaodeNormal,wmsLayer]);
          var baseLayers = {
              "高德地圖": GaodeMap,
              "高德影像": Gaodimage,
              "谷歌地圖": GoogleMap,
              "谷歌影像": Googleimage,
          }

          this.map = L.map("map", {
              center: [28.222466,113.058111],
              zoom: 15,
              layers: [GaodeMap],
              zoomControl: false
          });
          L.control.layers(baseLayers, null).addTo(this.map);
          L.control.zoom({
              zoomInTitle: '放大',
              zoomOutTitle: '縮小'
          }).addTo(this.map);
          L.polyline([[28.222466,113.058111], [28.222566,113.058611],[28.222486,113.058711]],{color:'green'}).addTo(this.map).bindPopup("2020-06-30巡檢路徑");
          L.marker([28.222466,113.058111]).addTo(this.map).bindPopup("1號巡檢點");
          L.marker([28.222566,113.058611]).addTo(this.map).bindPopup("2號巡檢點");
          L.marker([28.222486,113.058711]).addTo(this.map).bindPopup("3號巡檢點");
      }
}

最終效果，高德地圖加上之前我用cad做的圖層，之前的圖層有點醜，大家可以按自己的需求調整。