場景

Vue中使用Openlayers加載Geoserver發(fā)布的TileWMS：

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

在上面加載出來了TileWMS并能成功顯示地圖后，如果想在地圖上點(diǎn)擊能獲取到點(diǎn)的坐標(biāo)信息。

?

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

shp

Shapefile文件是美國環(huán)境系統(tǒng)研究所（ESRI）所研制的GIS文件系統(tǒng)格式文件，是工業(yè)標(biāo)準(zhǔn)的矢量數(shù)據(jù)文件。
Shapefile將空間特征表中的非拓?fù)鋷缀螌ο蠛蛯傩孕畔⒋鎯υ跀?shù)據(jù)集中，特征表中的幾何對象存為以坐標(biāo)點(diǎn)集表示的圖形文件—SHP文件，
Shapefile文件并不含拓?fù)?#xff08;Topological）數(shù)據(jù)結(jié)構(gòu)。一個Shape文件包括三個文件：
一個主文件(*.shp)，一個索引文件(*.shx)，和一個dBASE(*.dbf)表。
主文件是一個直接存取，變長度記錄的文件，其中每個記錄描述構(gòu)成一個地理特征（Feature）的所有vertices坐標(biāo)值。
在索引文件中，每條記錄包含對應(yīng)主文件記錄距離主文件頭開始的偏移量，dBASE表包含SHP文件中每一個Feature的特征屬性，
表中幾何記錄和屬性數(shù)據(jù)之間的一一對應(yīng)關(guān)系是基于記錄數(shù)目的ID。在dBASE文件中的屬性記錄必須和主文件中的記錄順序是相同的。
圖形數(shù)據(jù)和屬性數(shù)據(jù)通過索引號建立一一對應(yīng)的關(guān)系。

Shapefile中坐標(biāo)文件（.shp）
由固定長度的文件頭和接著的變長度空間數(shù)據(jù)記錄組成。文件頭由100字節(jié)的說明信息組成的，
主要說明文件的長度、Shape類型、整個Shape圖層的范圍等等，這些信息構(gòu)成了空間數(shù)據(jù)的元數(shù)據(jù)。
在導(dǎo)入空間數(shù)據(jù)時首先要讀入文件頭獲取Shape文件的基本信息，并以此信息為基礎(chǔ)建立相應(yīng)的元數(shù)據(jù)表。
而變長度空間數(shù)據(jù)記錄是由固定長度的記錄頭和變長度記錄內(nèi)容組成，其記錄結(jié)構(gòu)基本類似，
每條記錄都有記錄頭和記錄內(nèi)容組成（空間坐標(biāo)對）。記錄頭的內(nèi)容包括記錄號（Record Number）
和坐標(biāo)記錄長度（Content Length）兩個記錄項(xiàng)，Shapefile文件中的記錄號都是從1開始的，
坐標(biāo)記錄長度是按16位字來衡量的。記錄內(nèi)容包括目標(biāo)的幾何類型（ShapeType）和具體的坐標(biāo)記錄（X，Y），
記錄內(nèi)容因要素幾何類型的不同，其具體的內(nèi)容和格式都有所不同。對于具體的記錄主要包括空Shape記錄，點(diǎn)記錄，線記錄和多邊形記錄。

屬性文件（.dbf）
用于記錄屬性信息。它是一個標(biāo)準(zhǔn)的DBF文件，也是由頭文件和實(shí)體信息兩部分構(gòu)成。其中文件頭部分的長度是不定長的，
它主要對DBF文件作了一些總體說明，其中最主要的是對這個DBF文件的記錄項(xiàng)的信息進(jìn)行了詳細(xì)的描述，
比如對每個記錄項(xiàng)的名稱，數(shù)據(jù)類型，長度等信息都有具體的說明。屬性文件的實(shí)體信息部分就是一條條屬性記錄，
每條記錄都是由若干個記錄項(xiàng)構(gòu)成，因此只要依次循環(huán)讀取每條記錄就可以了。

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

注：

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

實(shí)現(xiàn)

在上面已經(jīng)實(shí)現(xiàn)加載TileWMS顯示地圖的基礎(chǔ)上，在data中聲明一個map對象用來存儲地圖對象

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

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

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

然后在初始化地圖的方法中，執(zhí)行設(shè)置獲取點(diǎn)的監(jiān)聽方法的函數(shù)，函數(shù)實(shí)現(xiàn)為

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

完整的地圖組件示例代碼

<template><div id="map" class="map"></div> </template><script> //導(dǎo)入基本模塊 import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; //導(dǎo)入相關(guān)模塊 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({//不能設(shè)置為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({//地圖容器IDtarget: "map",//引入地圖layers: [layer],view: new View({//地圖中心點(diǎn)center: [987777.93778, 213834.81024],zoom: 12,// minZoom:1, // 地圖縮放最小級別}),});//獲取點(diǎn)的監(jiān)聽方法設(shè)置this.onPoint()},//? 獲取點(diǎn)onPoint() {// 監(jiān)聽singleclick事件this.map.on('singleclick', function(e) {console.log(e.coordinate)})}}, }; </script><style scoped> .map {width: 100%;height: 800px; } </style>

實(shí)現(xiàn)效果如上面。

?

?

?

總結(jié)

以上是生活随笔為你收集整理的Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。