Vue中使用Openlayers加載Geoserver發布的TileWMS時單擊獲取shp文件的坐標信息

場景

Vue中使用Openlayers加載Geoserver發布的TileWMS：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/115916949

在上面加載出來了TileWMS並能成功顯示地圖后，如果想在地圖上點擊能獲取到點的坐標信息。

 

 

在此之前需要了解下shp文件

shp

Shapefile文件是美國環境系統研究所（ESRI）所研制的GIS文件系統格式文件，是工業標准的矢量數據文件。
Shapefile將空間特征表中的非拓撲幾何對象和屬性信息存儲在數據集中，特征表中的幾何對象存為以坐標點集表示的圖形文件—SHP文件，
Shapefile文件並不含拓撲（Topological）數據結構。一個Shape文件包括三個文件：
一個主文件(*.shp)，一個索引文件(*.shx)，和一個dBASE(*.dbf)表。
主文件是一個直接存取，變長度記錄的文件，其中每個記錄描述構成一個地理特征（Feature）的所有vertices坐標值。
在索引文件中，每條記錄包含對應主文件記錄距離主文件頭開始的偏移量，dBASE表包含SHP文件中每一個Feature的特征屬性，
表中幾何記錄和屬性數據之間的一一對應關系是基於記錄數目的ID。在dBASE文件中的屬性記錄必須和主文件中的記錄順序是相同的。
圖形數據和屬性數據通過索引號建立一一對應的關系。

Shapefile中坐標文件（.shp）
由固定長度的文件頭和接着的變長度空間數據記錄組成。文件頭由100字節的說明信息組成的，
主要說明文件的長度、Shape類型、整個Shape圖層的范圍等等，這些信息構成了空間數據的元數據。
在導入空間數據時首先要讀入文件頭獲取Shape文件的基本信息，並以此信息為基礎建立相應的元數據表。
而變長度空間數據記錄是由固定長度的記錄頭和變長度記錄內容組成，其記錄結構基本類似，
每條記錄都有記錄頭和記錄內容組成（空間坐標對）。記錄頭的內容包括記錄號（Record Number）
和坐標記錄長度（Content Length）兩個記錄項，Shapefile文件中的記錄號都是從1開始的，
坐標記錄長度是按16位字來衡量的。記錄內容包括目標的幾何類型（ShapeType）和具體的坐標記錄（X，Y），
記錄內容因要素幾何類型的不同，其具體的內容和格式都有所不同。對於具體的記錄主要包括空Shape記錄，點記錄，線記錄和多邊形記錄。

屬性文件（.dbf）
用於記錄屬性信息。它是一個標准的DBF文件，也是由頭文件和實體信息兩部分構成。其中文件頭部分的長度是不定長的，
它主要對DBF文件作了一些總體說明，其中最主要的是對這個DBF文件的記錄項的信息進行了詳細的描述，
比如對每個記錄項的名稱，數據類型，長度等信息都有具體的說明。屬性文件的實體信息部分就是一條條屬性記錄，
每條記錄都是由若干個記錄項構成，因此只要依次循環讀取每條記錄就可以了。

索引文件（.shx）
主要包含坐標文件的索引信息，文件中每個記錄包含對應的坐標文件記錄距離坐標文件的文件頭的偏移量。
通過索引文件可以很方便地在坐標文件中定位到指定目標地坐標信息。索引文件也是由文件頭和實體信息兩部分構成的，
其中文件頭部分是一個長度固定（100 bytes）的記錄段，其內容與坐標文件的文件頭基本一致。它的實體信息以記錄為基本單位，
每一條記錄包括偏移量（Offset）和記錄段長度（Content Length）兩個記錄項。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

在上面已經實現加載TileWMS顯示地圖的基礎上，在data中聲明一個map對象用來存儲地圖對象

  data() {
    return {
      map: null, // map地圖
    };
  },

然后在新建map對象時將地圖對象賦值

      this.map = new Map({
        //地圖容器ID
        target: "map",
        //引入地圖
        layers: [layer],
        view: new View({
          //地圖中心點
          center: [987777.93778, 213834.81024],
          zoom: 12,
          // minZoom:1, // 地圖縮放最小級別
        }),
      });

然后在初始化地圖的方法中，執行設置獲取點的監聽方法的函數，函數實現為

    //  獲取點
    onPoint() {
      // 監聽singleclick事件
      this.map.on('singleclick', function(e) {
        console.log(e.coordinate)
      })
    }

完整的地圖組件示例代碼

<template>
  <div id="map" class="map"></div>
</template>

<script>
//導入基本模塊
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
//導入相關模塊
import { Tile as TileLayer } from 'ol/layer'
import { TileWMS } from 'ol/source'
export default {
  name: "olMapImageWMS",
  data() {
    return {
      map: null, // map地圖
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      var layer = new TileLayer({
        source: new TileWMS({
          //不能設置為0，否則地圖不展示。
          ratio: 1,
          url: "http://localhost:8000/geoserver/nyc/wms",
          params: {
            LAYERS: "nyc:nyc_roads",
            STYLES: "",
            VERSION: "1.1.1",
            tiled: true
          },
          serverType: "geoserver",
        }),
      });

      this.map = new Map({
        //地圖容器ID
        target: "map",
        //引入地圖
        layers: [layer],
        view: new View({
          //地圖中心點
          center: [987777.93778, 213834.81024],
          zoom: 12,
          // minZoom:1, // 地圖縮放最小級別
        }),
      });

      //獲取點的監聽方法設置
      this.onPoint()
    },
    //  獲取點
    onPoint() {
      // 監聽singleclick事件
      this.map.on('singleclick', function(e) {
        console.log(e.coordinate)
      })
    }
  },
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 800px;
}
</style>

 

實現效果如上面。