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做的图层，之前的图层有点丑，大家可以按自己的需求调整。