openlayer 加载geoserver切片geotiff数据

首先，下载geotiff数据

下载方法使用全能电子地图下载器(很好用) 下载地图切片（建议不下载1,2层级）

 将下载下来的数据使用导航栏的工具拼接成tiff格式

使用geoserver进行发布

发布成功之后使用geoserver去数据进行切片

提交之后切片成功图片路径GeoServer 2.14.2\data_dir\gwc 将所有切片拷贝到一个切片目录下

 

 查看图层

 至此geoserver切片tiff数据完成

注（以上至geoserver自带jetty启动）

如果tomcat下启动geoserver 注意配置切片路径：

注意：1.默认的切片目录GEOSERVER_DATA_DIR是：
    C:\Users\主机名\AppData\Local\Temp\geowebcache,因此需要在web.xml中对其进行定义。
    在web.xml中添加如下配置重启：

    <context-param>
         <param-name>GEOWEBCACHE_CACHE_DIR</param-name>
         <param-value>D:/apache-tomcat-7.0.52-windows-x64/webapps/geoserver/data/data/Tile</param-value>
     </context-param>

  再次进行seed/trunctate的时候就会将切片生成在该目录下面

openlayer加载就比较简单了直接上代码（使用vue）：

this.vectorxx9 = new TileLayer({
  source: new TileWMS({
    url: 'http://localhost:8089/geoserver/gwc/service/wms',
   params: {'LAYERS': 'shp:h8', 'VERSION': '1.1.1', 'FORMAT': "image/png", tiled: true, STYLES: '',},
  }),

全部代码如下

<template>
  <div id="map">
    <input @click="fitToChengdu" value="显示成都" type="button"/>
    <input @click="toline" value="加载图层" type="button"/>
    <input @click="deleteline" value="删除图层" type="button"/>
    <div><span>当前层级：</span><span id="zoom"></span><span>分辨率：</span><span id="resolution"></span></div>
    <!-- <div id="anchor"><img src="../png/test.png" alt="示例锚点" v-on:click="testvalue"/></div>-->
  </div>
</template>
<script>
  import "ol/ol.css";
  import {Map, View, Overlay, Feature} from "ol";
  import TileLayer from "ol/layer/Tile";
  import {Image, Vector} from "ol/layer";
  import GeoJSON from "ol/format/GeoJSON";
  import {Style, Stroke, Icon} from "ol/style";
  import VectorLayer from "ol/layer/Vector";
  import OSM from "ol/source/OSM";
  import XYZ from "ol/source/XYZ";
  import Point from "ol/geom/Point";
  import VectorSource from "ol/source/Vector";
  import ImageWMS from "ol/source/ImageWMS";
  import TileDebug from "ol/source/TileDebug";
  import page from "../png/定点.png";
  import TileWMS from "ol/source/TileWMS"

  export default {
    data() {
      return {
        websocket: null,
        centers: [-73.99710639567148, 40.742270050255556],
        map: null,
        anchor: 'testS',
        offlineMapLayer: null,
        baseLayer: null,
        vectorxx0: null,
        vectorxx1: null,
        vectorxx2: null,
        vectorxx3: null,
        vectorxx4: null,
        vectorxx5: null,
        vectorxx6: null,
        vectorxx7: null,
        vectorxx8: null,
        vectorxx9: null,
        vectorxxre: null,
        wmsSource: null,
        wmsSources: null,
        openStreetMapLayer: null,
        line: null,
        wmsLayer: null,
        extent: [108.06 - 550 * 1000 / 200000, 30.67 - 344 * 1000 / 200000, 108.06 + 550 * 1000 / 200000, 30.67 + 344 * 1000 / 200000],
        maps: new OSM(),
        layer: new VectorLayer({source: new VectorSource()}),
        styleicon: ""
      };
    },
    created() {
      //页面刚进入时开启长连接
      this.initWebSocket()
    },
    destroyed() {
//页面销毁时关闭长连接
      this.websocketclose();
    },
    mounted() {
      this.openStreetMapLayer = new TileLayer({
        source: new OSM()

      });


      this.vectorxx1 = new TileLayer({
        source: new TileWMS({
          // format: new GeoJSON(),
          url: 'http://10.4.4.160:8080/geoserver/china/wms',
          params: {'LAYERS': 'china:china', 'VERSION': '1.1.0'},
        }),

        // style: function(feature, resolution) {
        //   return new Style({
        //     stroke: new Stroke({
        //       color: 'blue',
        //       width: 1
        //     })
        //   });
        // }
      }),
        this.vectorxx2 = new TileLayer({
          source: new TileWMS({
            // format: new GeoJSON(),
            url: 'http://localhost:8089/geoserver/wms',
            params: {'LAYERS': 'shp:google1', 'VERSION': '1.1.0'},

          }),
          // style: function(feature, resolution) {
          //   return new Style({
          //     stroke: new Stroke({
          //       color: 'blue',
          //       width: 1
          //     })
          //   });
          // }
        });
      this.vectorxx7 = new TileLayer({
        source: new TileWMS({
          url: 'http://localhost:8089/geoserver/wms',
          params: {'LAYERS': 'shp:google6', 'VERSION': '1.1.0'},
        }),
        // style: function(feature, resolution) {
        //   return new Style({
        //     stroke: new Stroke({
        //       color: 'blue',
        //       width: 1
        //     })
        //   });
        // }
      });
      this.vectorxx8 = new TileLayer({
        source: new TileWMS({
          url: 'http://localhost:8089/geoserver/wms',
          params: {'LAYERS': 'shp:china8'},
        }),
        // style: function(feature, resolution) {
        //   return new Style({
        //     stroke: new Stroke({
        //       color: 'blue',
        //       width: 1
        //     })
        //   });
        // }
      }); this.vectorxx9 = new TileLayer({
        source: new TileWMS({
          url: 'http://localhost:8089/geoserver/gwc/service/wms',
         params: {'LAYERS': 'shp:h8', 'VERSION': '1.1.1', 'FORMAT': "image/png", tiled: true, STYLES: '',},
        }),
        // style: function(feature, resolution) {
        //   return new Style({
        //     stroke: new Stroke({
        //       color: 'blue',
        //       width: 1
        //     })
        //   });
        // }
      });
      this.vectorxx3 = new TileLayer({
        source: new TileWMS({
          // format: new GeoJSON(),
          url: 'http://localhost:8089/geoserver/wms',
          params: {'LAYERS': 'shp:google2', 'VERSION': '1.1.0'},

        }),
        // style: function(feature, resolution) {
        //   return new Style({
        //     stroke: new Stroke({
        //       color: 'blue',
        //       width: 1
        //     })
        //   });
        // }
      });
      this.vectorxx5 = new TileLayer({
        source: new TileWMS({
          // format: new GeoJSON(),
          url: 'http://localhost:8089/geoserver/wms',
          params: {'LAYERS': 'shp:google4', 'VERSION': '1.1.0'},

        }),
        // style: function(feature, resolution) {
        //   return new Style({
        //     stroke: new Stroke({
        //       color: 'blue',
        //       width: 1
        //     })
        //   });
        // }
      }),
        this.vectorxx4 = new TileLayer({
          source: new TileWMS({
            // format: new GeoJSON(),
            url: 'http://localhost:8089/geoserver/wms',
            params: {'LAYERS': 'shp:google3', 'VERSION': '1.1.0'},

          }),

          // style: function(feature, resolution) {
          //   return new Style({
          //     stroke: new Stroke({
          //       color: 'blue',
          //       width: 1
          //     })
          //   });
          // }
        });
      this.vectorxx6 = new TileLayer({
        source: new TileWMS({
          // format: new GeoJSON(),
          url: 'http://localhost:8089/geoserver/wms',
          params: {'LAYERS': 'shp:google5', 'VERSION': '1.1.0'},

        }),
        style: {
          stroke: new Stroke({
            color: 'blue',
            width: 1

          })
        }
      });
      // this.anchor = new Feature({
      //   geometry: new Point([104, 30])
      // });
      // console.log(this.anchor);
      // this.anchor.setStyle(new Style({
      //   image: new Icon({
      //     src: page,
      //     anchor: [0.5, 1]
      //   })
      // }));
      // this.layer.getSource().addFeature(this.anchor);
      // this.offlineMapLayer =new Image({
      //   // source: new OSM()
      //   source: new ImageStatic({
      //     url: page, // 熊猫基地地图
      //     imageExtent: this.extent     // 映射到地图的范围
      //   })
      //  })
      this.vectorxx0 = new Vector({
        source: new VectorSource({
          format: new GeoJSON({
            geometryName: 'SHAPE'
          }),
          url: 'http://localhost:8089/geoserver/wordtest/wms?service=WMS&version=1.1.0&request=GetMap&layers=wordtest%3At_pots&bbox=103.07%2C29.67%2C105.07%2C31.67&width=768&height=768&srs=EPSG%3A404000&format=application/openlayers'
        }),
        style: function (feature, resolution) {
          return new Style({
            stroke: new Stroke({
              color: 'red',
              width: 1
            })
          });
        }
      });
      // this.map.addLayer(this.vectorxx0);
      /*  有关html运用*/
      // this.anchor = new Overlay({
      //    element: document.getElementById('anchor')
      //  });
      //  // 关键的一点，需要设置附加到地图上的位置
      //  this.anchor.setPosition([104, 30]);
      //  this.map.addOverlay(this.anchor);

      this.map = new Map({
        target: "map",
        // logo: {src: '..\\png\\test.png'},
        layers: [
          // new TileLayer({
          //   source: this.maps
          // }),
          // new TileLayer({
          //   source: new TileDebug({
          //     projection: 'EPSG:4326',
          //     tileGrid: this.maps.getTileGrid()
          //   })
          // })
          // this.layer
          // this.vectorxx1,
          // this.vectorxx2,
          // this.vectorxx3,
          // this.vectorxx4,
          // this.vectorxx5,

        ],


        view: new View({
          projection: "EPSG:4326",    //使用这个坐标系
          // extent: [102, 29, 104, 31],
          // center: this.centers,  //成都
          center: [104.06, 30.67],
          zoom: 6,
          minZoom: 4,
          maxZoom: 8,
        }),

      });
      this.wmsSource = new ImageWMS({
        crossOrigin: 'anonymous',
        params: {
          'LAYERS': 'mysqlworkspace:city', //图层
          'VERSION': '1.1.0',
        },
        serverType: 'geoserver',
        url: 'http://localhost:8089/geoserver/wms'
      });
      this.wmsLayer = new Image({
        source: this.wmsSource
      })

      // this.map.addLayer(this.vectorxx2)
      // this.map.addLayer(this.vectorxx3)
      // this.map.addLayer(this.vectorxx4)
      // this.map.addLayer(this.vectorxx5)
      // this.map.addLayer(this.vectorxx6)
      //
     // this.map.addLayer(this.vectorxx1)
      // this.map.addLayer(this.vectorxx7)
      // this.map.addLayer(this.vectorxx8)
      this.map.addLayer(this.vectorxx9)
      //  this.map.addLayer(this.wmsLayer)
      // this.map.addLayer(this.openStreetMapLayer)
    },
    watch: {
      "map": function () {
        this.map.getView().on('change:resolution', function () {
          document.getElementById('zoom').innerHTML = this.getZoom() + '，';
          document.getElementById('resolution').innerHTML = this.getResolution();
          if(this.getZoom()==3){
            this.map.addLayer(this.vectorxx2)
          }
          // console.log(this.anchor);
          // this.styleicon = this.anchor.getStyle();
          //
          // // 重新设置图标的缩放率，基于层级10来做缩放
          // this.styleicon.getImage().setScale(this.getZoom() / 10);
          // this.anchor.setStyle(style);
        })
      },


    },

    methods: {
      deleteline() {
        // this.map.removeLayer(this.vectorxx5)
        console.log(this.map.getLayers())
        this.map.removeLayer(this.map.getLayers().item(4))
        console.log(this.map.getLayers())
      },
      toline() {
        this.getJson()
        console.log(this.map.getLayers())
      },
      fitToChengdu() {
        this.map.getView().fit([104, 30.6, 104.12, 30.74], this.map.getSize());
      },
      testvalue() {
        document.getElementById('anchor').innerHTML = "3"
      },

      //初始化weosocket
      initWebSocket() {
        const wsuri = "ws://localhost:8888/websocket";//ws地址
        this.websocket = new WebSocket(wsuri);
        this.websocket.onopen = this.websocketonopen;
        this.websocket.onerror = this.websocketonerror;
        this.websocket.onmessage = this.websocketonmessage;
        this.websocket.onclose = this.websocketclose;
      },

      websocketonerror() {
        console.log("WebSocket连接发生错误");
      },
      //连接成功建立的回调方法
      websocketonopen() {
        console.log("open");
      },
      //接收到消息的回调方法
      websocketonmessage(e) {
        //注意：长连接我们是后台直接1秒推送一条数据，
        //但是点击某个列表时，会发送给后台一个标识，后台根据此标识返回相对应的数据，
        //这个时候数据就只能从一个出口出，所以让后台加了一个键，例如键为1时，是每隔1秒推送的数据，为2时是发送标识后再推送的数据，以作区分
        console.log(e.data + "  00000000000000000000000000");
        // this.toline()
        this.getJsons()

      },
      getJson() {
        this.map.removeLayer(this.map.getLayers().item(4))
        // this.map.getView().setZoom(4)

        /* this.vectorxxre = new Image({
           source: new ImageWMS({
             format: new GeoJSON(),
             url: 'http://localhost:8089/geoserver/wms',
             params: {'LAYERS': 'mysqlworkspace:city10', 'VERSION': '1.1.0'},

           }),
         })*/
        this.baseLayer = new TileWMS({
          url: 'http://localhost:8089/geoserver/wms',
          params: {'LAYERS': 'mysqlworkspace:sqlpot', 'VERSION': '1.1.0'},
          serverType: 'geoserver'
        });

        this.vectorxxre = new TileLayer({
          source: this.baseLayer
        });
        console.log(this.vectorxxre + ".......................")
        this.map.addLayer(this.vectorxxre)

      },
      getJsons() {
        // window.location.reload();
        // this.map.removeLayer(this.map.getLayers().item(5))
        // this.map.removeLayer(this.map.getLayers().item(4))
        // this.line = new Image({
        //   source: new ImageWMS({
        //     crossOrigin: 'anonymous',
        //     url: 'http://localhost:8089/geoserver/wms',
        //     params: {'LAYERS': 'mysqlworkspace:line', 'VERSION': '1.1.0'},
        //
        //   }),
        //   // style: function(feature, resolution) {
        //   //   return new Style({
        //   //     stroke: new Stroke({
        //   //       color: 'blue',
        //   //       width: 1
        //   //     })
        //   //   });
        //   // }
        // });
        // this.baseLayer = new TileWMS({
        //   url: 'http://localhost:8089/geoserver/wms',
        //   params: {'LAYERS': 'mysqlworkspace:sqlpot', 'VERSION': '1.1.0'},
        //   serverType: 'geoserver'
        // });
        //
        // this.vectorxxre = new TileLayer({
        //   source: this.baseLayer
        // });
        //
        // console.log(this.vectorxxre + ".......................")
        // this.map.addLayer(this.vectorxxre)
        // this.map.addLayer(this.line)
        this.wmsSources = new ImageWMS({
          crossOrigin: 'anonymous',
          params: {
            LAYERS: 'mysqlworkspace:sqlpot',
            'VERSION': '1.1.0',
          },
          serverType: 'geoserver',
          url: 'http://localhost:8089/geoserver/wms'
        });
        this.wmsLayer.setSource(this.wmsSource);
        this.map.getView().setResolution(this.map.getView().getResolution() + Math.random() * 0.00000009);//随机数缩放实现刷新

        /*    console.log(this.vectorxxre + ".......................")
            console.log(this.vectorxx5 + ".......................")
            /!* this.vectorxxre = new Image({
               source: new ImageWMS({
                 format: new GeoJSON(),
                 url: 'http://localhost:8089/geoserver/wms',
                 params: {'LAYERS': 'mysqlworkspace:city10', 'VERSION': '1.1.0'},

               }),
             })*!/
            this.baseLayer = new TileWMS({
              url: 'http://localhost:8089/geoserver/wms',
              params: {'LAYERS': 'mysqlworkspace:sqlpot', 'VERSION': '1.1.0'},
              serverType: 'geoserver'
            });

            this.vectorxxre = new TileLayer({
              source: this.baseLayer
            });
            console.log(this.vectorxxre + ".......................")
            this.map.addLayer(this.vectorxxre)*/
      },


      websocketsend(agentData) {//数据发送
        this.websocket.send(agentData);
      },
      websocketclose(e) { //关闭
        console.log("connection closed (" + e.code + ")");
      },

    }
  }
</script>
<style>
  #map {
    height: 100%;
  }

  /*隐藏ol的一些自带元素*/
  .ol-attribution, .ol-zoom {
    display: none;
  }

  /*@keyframes zoom*/
  /*{*/
  /*from {top: 0; left: 0; width: 32px; height: 32px;}*/
  /*50% {top: -16px; left: -16px; width: 64px; height: 64px;}*/
  /*to {top: 0; left: 0; width: 32px; height: 32px;}*/
  /*}*/

  /*@-moz-keyframes zoom !* Firefox *!*/
  /*{*/
  /*from {top: 0; left: 0; width: 32px; height: 32px;}*/
  /*50% {top: -16px; left: -16px; width: 64px; height: 64px;}*/
  /*to {top: 0; left: 0; width: 32px; height: 32px;}*/
  /*}*/

  /*@-webkit-keyframes zoom !* Safari 和 Chrome *!*/
  /*{*/
  /*from {top: 0; left: 0; width: 32px; height: 32px;}*/
  /*50% {top: -16px; left: -16px; width: 64px; height: 64px;}*/
  /*to {top: 0; left: 0; width: 32px; height: 32px;}*/
  /*}*/

  /*@-o-keyframes zoom !* Opera *!*/
  /*{*/
  /*from {top: 0; left: 0; width: 32px; height: 32px;}*/
  /*50% {top: -16px; left: -16px; width: 64px; height: 64px;}*/
  /*to {top: 0; left: 0; width: 32px; height: 32px;}*/
  /*}*/

  /*!* 应用css动画到图标元素上 *!*/
  /*#anchor*/
  /*{*/
  /*display: block;*/
  /*position: absolute;*/
  /*animation: zoom 5s;*/
  /*animation-iteration-count: infinite; !* 一直重复动画 *!*/
  /*-moz-animation: zoom 5s; !* Firefox *!*/
  /*-moz-animation-iteration-count: infinite; !* 一直重复动画 *!*/
  /*-webkit-animation: zoom 5s;  !* Safari 和 Chrome *!*/
  /*-webkit-animation-iteration-count: infinite; !* 一直重复动画 *!*/
  /*-o-animation: zoom 5s; !* Opera *!*/
  /*-o-animation-iteration-count: infinite; !* 一直重复动画 *!*/
  /*}*/
  input {
    float: left;
    color: red;
  }

  span {
    float: left;
    font-size: 15px;
    color: red;
  }

  div {


  }
</style>