devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

openlayer 加载geoserver切片geotiff数据_openlayers tif

作者：小丑西瓜9 | 2024-05-22 08:40:41

赞

踩

openlayers tif

首先，下载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）：

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

全部代码如下

  1. <template>
  2.   <div id="map">
  3.     <input @click="fitToChengdu" value="显示成都" type="button"/>
  4.     <input @click="toline" value="加载图层" type="button"/>
  5.     <input @click="deleteline" value="删除图层" type="button"/>
  6.     <div><span>当前层级：</span><span id="zoom"></span><span>分辨率：</span><span id="resolution"></span></div>
  7.     <!-- <div id="anchor"><img src="../png/test.png" alt="示例锚点" v-on:click="testvalue"/></div>-->
  8.   </div>
  9. </template>
  10. <script>
  11.   import "ol/ol.css";
  12.   import {Map, View, Overlay, Feature} from "ol";
  13.   import TileLayer from "ol/layer/Tile";
  14.   import {Image, Vector} from "ol/layer";
  15.   import GeoJSON from "ol/format/GeoJSON";
  16.   import {Style, Stroke, Icon} from "ol/style";
  17.   import VectorLayer from "ol/layer/Vector";
  18.   import OSM from "ol/source/OSM";
  19.   import XYZ from "ol/source/XYZ";
  20.   import Point from "ol/geom/Point";
  21.   import VectorSource from "ol/source/Vector";
  22.   import ImageWMS from "ol/source/ImageWMS";
  23.   import TileDebug from "ol/source/TileDebug";
  24.   import page from "../png/定点.png";
  25.   import TileWMS from "ol/source/TileWMS"
  26.  
  27.   export default {
  28.     data() {
  29.       return {
  30.         websocket: null,
  31.         centers: [-73.99710639567148, 40.742270050255556],
  32.         map: null,
  33.         anchor: 'testS',
  34.         offlineMapLayer: null,
  35.         baseLayer: null,
  36.         vectorxx0: null,
  37.         vectorxx1: null,
  38.         vectorxx2: null,
  39.         vectorxx3: null,
  40.         vectorxx4: null,
  41.         vectorxx5: null,
  42.         vectorxx6: null,
  43.         vectorxx7: null,
  44.         vectorxx8: null,
  45.         vectorxx9: null,
  46.         vectorxxre: null,
  47.         wmsSource: null,
  48.         wmsSources: null,
  49.         openStreetMapLayer: null,
  50.         line: null,
  51.         wmsLayer: null,
  52.         extent: [108.06 - 550 * 1000 / 200000, 30.67 - 344 * 1000 / 200000, 108.06 + 550 * 1000 / 200000, 30.67 + 344 * 1000 / 200000],
  53.         maps: new OSM(),
  54.         layer: new VectorLayer({source: new VectorSource()}),
  55.         styleicon: ""
  56.       };
  57.     },
  58.     created() {
  59.       //页面刚进入时开启长连接
  60.       this.initWebSocket()
  61.     },
  62.     destroyed() {
  63. //页面销毁时关闭长连接
  64.       this.websocketclose();
  65.     },
  66.     mounted() {
  67.       this.openStreetMapLayer = new TileLayer({
  68.         source: new OSM()
  69.  
  70.       });
  71.  
  72.  
  73.       this.vectorxx1 = new TileLayer({
  74.         source: new TileWMS({
  75.           // format: new GeoJSON(),
  76.           url: 'http://10.4.4.160:8080/geoserver/china/wms',
  77.           params: {'LAYERS': 'china:china', 'VERSION': '1.1.0'},
  78.         }),
  79.  
  80.         // style: function(feature, resolution) {
  81.         //   return new Style({
  82.         //     stroke: new Stroke({
  83.         //       color: 'blue',
  84.         //       width: 1
  85.         //     })
  86.         //   });
  87.         // }
  88.       }),
  89.         this.vectorxx2 = new TileLayer({
  90.           source: new TileWMS({
  91.             // format: new GeoJSON(),
  92.             url: 'http://localhost:8089/geoserver/wms',
  93.             params: {'LAYERS': 'shp:google1', 'VERSION': '1.1.0'},
  94.  
  95.           }),
  96.           // style: function(feature, resolution) {
  97.           //   return new Style({
  98.           //     stroke: new Stroke({
  99.           //       color: 'blue',
  100.           //       width: 1
  101.           //     })
  102.           //   });
  103.           // }
  104.         });
  105.       this.vectorxx7 = new TileLayer({
  106.         source: new TileWMS({
  107.           url: 'http://localhost:8089/geoserver/wms',
  108.           params: {'LAYERS': 'shp:google6', 'VERSION': '1.1.0'},
  109.         }),
  110.         // style: function(feature, resolution) {
  111.         //   return new Style({
  112.         //     stroke: new Stroke({
  113.         //       color: 'blue',
  114.         //       width: 1
  115.         //     })
  116.         //   });
  117.         // }
  118.       });
  119.       this.vectorxx8 = new TileLayer({
  120.         source: new TileWMS({
  121.           url: 'http://localhost:8089/geoserver/wms',
  122.           params: {'LAYERS': 'shp:china8'},
  123.         }),
  124.         // style: function(feature, resolution) {
  125.         //   return new Style({
  126.         //     stroke: new Stroke({
  127.         //       color: 'blue',
  128.         //       width: 1
  129.         //     })
  130.         //   });
  131.         // }
  132.       }); this.vectorxx9 = new TileLayer({
  133.         source: new TileWMS({
  134.           url: 'http://localhost:8089/geoserver/gwc/service/wms',
  135.          params: {'LAYERS': 'shp:h8', 'VERSION': '1.1.1', 'FORMAT': "image/png", tiled: true, STYLES: '',},
  136.         }),
  137.         // style: function(feature, resolution) {
  138.         //   return new Style({
  139.         //     stroke: new Stroke({
  140.         //       color: 'blue',
  141.         //       width: 1
  142.         //     })
  143.         //   });
  144.         // }
  145.       });
  146.       this.vectorxx3 = new TileLayer({
  147.         source: new TileWMS({
  148.           // format: new GeoJSON(),
  149.           url: 'http://localhost:8089/geoserver/wms',
  150.           params: {'LAYERS': 'shp:google2', 'VERSION': '1.1.0'},
  151.  
  152.         }),
  153.         // style: function(feature, resolution) {
  154.         //   return new Style({
  155.         //     stroke: new Stroke({
  156.         //       color: 'blue',
  157.         //       width: 1
  158.         //     })
  159.         //   });
  160.         // }
  161.       });
  162.       this.vectorxx5 = new TileLayer({
  163.         source: new TileWMS({
  164.           // format: new GeoJSON(),
  165.           url: 'http://localhost:8089/geoserver/wms',
  166.           params: {'LAYERS': 'shp:google4', 'VERSION': '1.1.0'},
  167.  
  168.         }),
  169.         // style: function(feature, resolution) {
  170.         //   return new Style({
  171.         //     stroke: new Stroke({
  172.         //       color: 'blue',
  173.         //       width: 1
  174.         //     })
  175.         //   });
  176.         // }
  177.       }),
  178.         this.vectorxx4 = new TileLayer({
  179.           source: new TileWMS({
  180.             // format: new GeoJSON(),
  181.             url: 'http://localhost:8089/geoserver/wms',
  182.             params: {'LAYERS': 'shp:google3', 'VERSION': '1.1.0'},
  183.  
  184.           }),
  185.  
  186.           // style: function(feature, resolution) {
  187.           //   return new Style({
  188.           //     stroke: new Stroke({
  189.           //       color: 'blue',
  190.           //       width: 1
  191.           //     })
  192.           //   });
  193.           // }
  194.         });
  195.       this.vectorxx6 = new TileLayer({
  196.         source: new TileWMS({
  197.           // format: new GeoJSON(),
  198.           url: 'http://localhost:8089/geoserver/wms',
  199.           params: {'LAYERS': 'shp:google5', 'VERSION': '1.1.0'},
  200.  
  201.         }),
  202.         style: {
  203.           stroke: new Stroke({
  204.             color: 'blue',
  205.             width: 1
  206.  
  207.           })
  208.         }
  209.       });
  210.       // this.anchor = new Feature({
  211.       //   geometry: new Point([104, 30])
  212.       // });
  213.       // console.log(this.anchor);
  214.       // this.anchor.setStyle(new Style({
  215.       //   image: new Icon({
  216.       //     src: page,
  217.       //     anchor: [0.5, 1]
  218.       //   })
  219.       // }));
  220.       // this.layer.getSource().addFeature(this.anchor);
  221.       // this.offlineMapLayer =new Image({
  222.       //   // source: new OSM()
  223.       //   source: new ImageStatic({
  224.       //     url: page, // 熊猫基地地图
  225.       //     imageExtent: this.extent     // 映射到地图的范围
  226.       //   })
  227.       //  })
  228.       this.vectorxx0 = new Vector({
  229.         source: new VectorSource({
  230.           format: new GeoJSON({
  231.             geometryName: 'SHAPE'
  232.           }),
  233.           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'
  234.         }),
  235.         style: function (feature, resolution) {
  236.           return new Style({
  237.             stroke: new Stroke({
  238.               color: 'red',
  239.               width: 1
  240.             })
  241.           });
  242.         }
  243.       });
  244.       // this.map.addLayer(this.vectorxx0);
  245.       /*  有关html运用*/
  246.       // this.anchor = new Overlay({
  247.       //    element: document.getElementById('anchor')
  248.       //  });
  249.       //  // 关键的一点，需要设置附加到地图上的位置
  250.       //  this.anchor.setPosition([104, 30]);
  251.       //  this.map.addOverlay(this.anchor);
  252.  
  253.       this.map = new Map({
  254.         target: "map",
  255.         // logo: {src: '..\\png\\test.png'},
  256.         layers: [
  257.           // new TileLayer({
  258.           //   source: this.maps
  259.           // }),
  260.           // new TileLayer({
  261.           //   source: new TileDebug({
  262.           //     projection: 'EPSG:4326',
  263.           //     tileGrid: this.maps.getTileGrid()
  264.           //   })
  265.           // })
  266.           // this.layer
  267.           // this.vectorxx1,
  268.           // this.vectorxx2,
  269.           // this.vectorxx3,
  270.           // this.vectorxx4,
  271.           // this.vectorxx5,
  272.  
  273.         ],
  274.  
  275.  
  276.         view: new View({
  277.           projection: "EPSG:4326",    //使用这个坐标系
  278.           // extent: [102, 29, 104, 31],
  279.           // center: this.centers,  //成都
  280.           center: [104.06, 30.67],
  281.           zoom: 6,
  282.           minZoom: 4,
  283.           maxZoom: 8,
  284.         }),
  285.  
  286.       });
  287.       this.wmsSource = new ImageWMS({
  288.         crossOrigin: 'anonymous',
  289.         params: {
  290.           'LAYERS': 'mysqlworkspace:city', //图层
  291.           'VERSION': '1.1.0',
  292.         },
  293.         serverType: 'geoserver',
  294.         url: 'http://localhost:8089/geoserver/wms'
  295.       });
  296.       this.wmsLayer = new Image({
  297.         source: this.wmsSource
  298.       })
  299.  
  300.       // this.map.addLayer(this.vectorxx2)
  301.       // this.map.addLayer(this.vectorxx3)
  302.       // this.map.addLayer(this.vectorxx4)
  303.       // this.map.addLayer(this.vectorxx5)
  304.       // this.map.addLayer(this.vectorxx6)
  305.       //
  306.      // this.map.addLayer(this.vectorxx1)
  307.       // this.map.addLayer(this.vectorxx7)
  308.       // this.map.addLayer(this.vectorxx8)
  309.       this.map.addLayer(this.vectorxx9)
  310.       //  this.map.addLayer(this.wmsLayer)
  311.       // this.map.addLayer(this.openStreetMapLayer)
  312.     },
  313.     watch: {
  314.       "map": function () {
  315.         this.map.getView().on('change:resolution', function () {
  316.           document.getElementById('zoom').innerHTML = this.getZoom() + '，';
  317.           document.getElementById('resolution').innerHTML = this.getResolution();
  318.           if(this.getZoom()==3){
  319.             this.map.addLayer(this.vectorxx2)
  320.           }
  321.           // console.log(this.anchor);
  322.           // this.styleicon = this.anchor.getStyle();
  323.           //
  324.           // // 重新设置图标的缩放率，基于层级10来做缩放
  325.           // this.styleicon.getImage().setScale(this.getZoom() / 10);
  326.           // this.anchor.setStyle(style);
  327.         })
  328.       },
  329.  
  330.  
  331.     },
  332.  
  333.     methods: {
  334.       deleteline() {
  335.         // this.map.removeLayer(this.vectorxx5)
  336.         console.log(this.map.getLayers())
  337.         this.map.removeLayer(this.map.getLayers().item(4))
  338.         console.log(this.map.getLayers())
  339.       },
  340.       toline() {
  341.         this.getJson()
  342.         console.log(this.map.getLayers())
  343.       },
  344.       fitToChengdu() {
  345.         this.map.getView().fit([104, 30.6, 104.12, 30.74], this.map.getSize());
  346.       },
  347.       testvalue() {
  348.         document.getElementById('anchor').innerHTML = "3"
  349.       },
  350.  
  351.       //初始化weosocket
  352.       initWebSocket() {
  353.         const wsuri = "ws://localhost:8888/websocket";//ws地址
  354.         this.websocket = new WebSocket(wsuri);
  355.         this.websocket.onopen = this.websocketonopen;
  356.         this.websocket.onerror = this.websocketonerror;
  357.         this.websocket.onmessage = this.websocketonmessage;
  358.         this.websocket.onclose = this.websocketclose;
  359.       },
  360.  
  361.       websocketonerror() {
  362.         console.log("WebSocket连接发生错误");
  363.       },
  364.       //连接成功建立的回调方法
  365.       websocketonopen() {
  366.         console.log("open");
  367.       },
  368.       //接收到消息的回调方法
  369.       websocketonmessage(e) {
  370.         //注意：长连接我们是后台直接1秒推送一条数据，
  371.         //但是点击某个列表时，会发送给后台一个标识，后台根据此标识返回相对应的数据，
  372.         //这个时候数据就只能从一个出口出，所以让后台加了一个键，例如键为1时，是每隔1秒推送的数据，为2时是发送标识后再推送的数据，以作区分
  373.         console.log(e.data + "  00000000000000000000000000");
  374.         // this.toline()
  375.         this.getJsons()
  376.  
  377.       },
  378.       getJson() {
  379.         this.map.removeLayer(this.map.getLayers().item(4))
  380.         // this.map.getView().setZoom(4)
  381.  
  382.         /* this.vectorxxre = new Image({
  383.            source: new ImageWMS({
  384.              format: new GeoJSON(),
  385.              url: 'http://localhost:8089/geoserver/wms',
  386.              params: {'LAYERS': 'mysqlworkspace:city10', 'VERSION': '1.1.0'},
  388.            }),
  389.          })*/
  390.         this.baseLayer = new TileWMS({
  391.           url: 'http://localhost:8089/geoserver/wms',
  392.           params: {'LAYERS': 'mysqlworkspace:sqlpot', 'VERSION': '1.1.0'},
  393.           serverType: 'geoserver'
  394.         });
  395.  
  396.         this.vectorxxre = new TileLayer({
  397.           source: this.baseLayer
  398.         });
  399.         console.log(this.vectorxxre + ".......................")
  400.         this.map.addLayer(this.vectorxxre)
  401.  
  402.       },
  403.       getJsons() {
  404.         // window.location.reload();
  405.         // this.map.removeLayer(this.map.getLayers().item(5))
  406.         // this.map.removeLayer(this.map.getLayers().item(4))
  407.         // this.line = new Image({
  408.         //   source: new ImageWMS({
  409.         //     crossOrigin: 'anonymous',
  410.         //     url: 'http://localhost:8089/geoserver/wms',
  411.         //     params: {'LAYERS': 'mysqlworkspace:line', 'VERSION': '1.1.0'},
  412.         //
  413.         //   }),
  414.         //   // style: function(feature, resolution) {
  415.         //   //   return new Style({
  416.         //   //     stroke: new Stroke({
  417.         //   //       color: 'blue',
  418.         //   //       width: 1
  419.         //   //     })
  420.         //   //   });
  421.         //   // }
  422.         // });
  423.         // this.baseLayer = new TileWMS({
  424.         //   url: 'http://localhost:8089/geoserver/wms',
  425.         //   params: {'LAYERS': 'mysqlworkspace:sqlpot', 'VERSION': '1.1.0'},
  426.         //   serverType: 'geoserver'
  427.         // });
  428.         //
  429.         // this.vectorxxre = new TileLayer({
  430.         //   source: this.baseLayer
  431.         // });
  432.         //
  433.         // console.log(this.vectorxxre + ".......................")
  434.         // this.map.addLayer(this.vectorxxre)
  435.         // this.map.addLayer(this.line)
  436.         this.wmsSources = new ImageWMS({
  437.           crossOrigin: 'anonymous',
  438.           params: {
  439.             LAYERS: 'mysqlworkspace:sqlpot',
  440.             'VERSION': '1.1.0',
  441.           },
  442.           serverType: 'geoserver',
  443.           url: 'http://localhost:8089/geoserver/wms'
  444.         });
  445.         this.wmsLayer.setSource(this.wmsSource);
  446.         this.map.getView().setResolution(this.map.getView().getResolution() + Math.random() * 0.00000009);//随机数缩放实现刷新
  447.  
  448.         /*    console.log(this.vectorxxre + ".......................")
  449.             console.log(this.vectorxx5 + ".......................")
  450.             /!* this.vectorxxre = new Image({
  451.                source: new ImageWMS({
  452.                  format: new GeoJSON(),
  453.                  url: 'http://localhost:8089/geoserver/wms',
  454.                  params: {'LAYERS': 'mysqlworkspace:city10', 'VERSION': '1.1.0'},
  456.                }),
  457.              })*!/
  458.             this.baseLayer = new TileWMS({
  459.               url: 'http://localhost:8089/geoserver/wms',
  460.               params: {'LAYERS': 'mysqlworkspace:sqlpot', 'VERSION': '1.1.0'},
  461.               serverType: 'geoserver'
  462.             });
  464.             this.vectorxxre = new TileLayer({
  465.               source: this.baseLayer
  466.             });
  467.             console.log(this.vectorxxre + ".......................")
  468.             this.map.addLayer(this.vectorxxre)*/
  469.       },
  470.  
  471.  
  472.       websocketsend(agentData) {//数据发送
  473.         this.websocket.send(agentData);
  474.       },
  475.       websocketclose(e) { //关闭
  476.         console.log("connection closed (" + e.code + ")");
  477.       },
  478.  
  479.     }
  480.   }
  481. </script>
  482. <style>
  483.   #map {
  484.     height: 100%;
  485.   }
  486.  
  487.   /*隐藏ol的一些自带元素*/
  488.   .ol-attribution, .ol-zoom {
  489.     display: none;
  490.   }
  491.  
  492.   /*@keyframes zoom*/
  493.   /*{*/
  494.   /*from {top: 0; left: 0; width: 32px; height: 32px;}*/
  495.   /*50% {top: -16px; left: -16px; width: 64px; height: 64px;}*/
  496.   /*to {top: 0; left: 0; width: 32px; height: 32px;}*/
  497.   /*}*/
  498.  
  499.   /*@-moz-keyframes zoom !* Firefox *!*/
  500.   /*{*/
  501.   /*from {top: 0; left: 0; width: 32px; height: 32px;}*/
  502.   /*50% {top: -16px; left: -16px; width: 64px; height: 64px;}*/
  503.   /*to {top: 0; left: 0; width: 32px; height: 32px;}*/
  504.   /*}*/
  505.  
  506.   /*@-webkit-keyframes zoom !* Safari 和 Chrome *!*/
  507.   /*{*/
  508.   /*from {top: 0; left: 0; width: 32px; height: 32px;}*/
  509.   /*50% {top: -16px; left: -16px; width: 64px; height: 64px;}*/
  510.   /*to {top: 0; left: 0; width: 32px; height: 32px;}*/
  511.   /*}*/
  512.  
  513.   /*@-o-keyframes zoom !* Opera *!*/
  514.   /*{*/
  515.   /*from {top: 0; left: 0; width: 32px; height: 32px;}*/
  516.   /*50% {top: -16px; left: -16px; width: 64px; height: 64px;}*/
  517.   /*to {top: 0; left: 0; width: 32px; height: 32px;}*/
  518.   /*}*/
  519.  
  520.   /*!* 应用css动画到图标元素上 *!*/
  521.   /*#anchor*/
  522.   /*{*/
  523.   /*display: block;*/
  524.   /*position: absolute;*/
  525.   /*animation: zoom 5s;*/
  526.   /*animation-iteration-count: infinite; !* 一直重复动画 *!*/
  527.   /*-moz-animation: zoom 5s; !* Firefox *!*/
  528.   /*-moz-animation-iteration-count: infinite; !* 一直重复动画 *!*/
  529.   /*-webkit-animation: zoom 5s;  !* Safari 和 Chrome *!*/
  530.   /*-webkit-animation-iteration-count: infinite; !* 一直重复动画 *!*/
  531.   /*-o-animation: zoom 5s; !* Opera *!*/
  532.   /*-o-animation-iteration-count: infinite; !* 一直重复动画 *!*/
  533.   /*}*/
  534.   input {
  535.     float: left;
  536.     color: red;
  537.   }
  538.  
  539.   span {
  540.     float: left;
  541.     font-size: 15px;
  542.     color: red;
  543.   }
  544.  
  545.   div {
  546.  
  547.  
  548.   }
  549. </style>

 

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/607434
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号