場景

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

Vue中使用Openlayers加載Geoserver發布的TileWMS_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基礎上實現加載地圖顯示，如果要在地圖上添加圖片圖層顯示效果如下

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、跟上面的博客相比，導入的模塊增多

import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; import { Point } from "ol/geom"; import Feature from "ol/Feature"; import { Icon,Style} from "ol/style"; //導入相關模塊 import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer' import { TileWMS ,Vector as VectorSource } from 'ol/source'

2、這里要在原先地圖圖層的基礎上，再加兩個圖層分別為燈圖層和房子圖層。

聲明圖層對象和燈圖層以及房子圖層的坐標數據。

? data() {return {map: null, // map地圖layer:null, //地圖圖層lightLayer:null, //燈圖層houseLayer:null, //房子圖層//紅綠燈數據lightData:[{x:"987798.93778", y:"213885.81024"},{x:"987710.93778", y:"213810.81024"},],//房子數據houseData:[{x:"987610.93778", y:"213885.81024"},{x:"987510.93778", y:"213810.81024"},],};},

3、頁面加載完成后調用初始化地圖的方法

? mounted() {this.initMap();},

在初始化地圖的方法中

?initMap() {//地圖圖層this.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.lightLayer = new VectorLayer({source: new VectorSource(),});//房子的圖層this.houseLayer = new VectorLayer({source: new VectorSource(),});this.map = new Map({//地圖容器IDtarget: "map",//引入地圖layers: [this.layer,this.lightLayer,this.houseLayer],view: new View({//地圖中心點center: [987777.93778, 213834.81024],zoom: 12,minZoom:6, // 地圖縮放最小級別maxZoom:19,}),});this.initLightData();this.initHouseData();//獲取點的監聽方法設置this.onPoint()},?

在這里先聲明兩個圖層lightLayer和houseLayer，然后最后調用給這兩個圖層加載數據的方法。

4、這里決定圖層上下優先級順序的是

layers: [this.layer,this.lightLayer,this.houseLayer],

越往左，圖層越在底層，當三個圖層重合時，從上往下依次看到的是房子圖層、燈圖層、地圖圖層?

5、然后調用加載圖層坐標數據的方法

方法initLightData

??? //初始化燈數據initLightData(){this.lightLayer.getSource().clear();this.lightData.forEach((item, index) => {var feature = new Feature({geometry: new Point([Number(item.x), Number(item.y)]),});let url = "images/light.png";let style = new Style({image: new Icon({scale: 0.15 ,src: url,anchor: [0.48, 0.52],}),});feature.setStyle(style);this.lightLayer.getSource().addFeature(feature);});},

方法initHouseData

??? //初始化房子數據initHouseData(){this.houseLayer.getSource().clear();this.houseData.forEach((item, index) => {var feature = new Feature({geometry: new Point([Number(item.x), Number(item.y)]),});let url = "images/house.png";let style = new Style({image: new Icon({scale: 0.3,src: url,anchor: [0.48, 0.52],}),});feature.setStyle(style);this.houseLayer.getSource().addFeature(feature);});},

6、完整代碼

? <template><div id="map" class="map"></div> </template><script> //導入基本模塊 import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; import { Point } from "ol/geom"; import Feature from "ol/Feature"; import { Icon,Style} from "ol/style"; //導入相關模塊 import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer' import { TileWMS ,Vector as VectorSource } from 'ol/source' export default {name: "olMapImageWMSMulLayers",data() {return {map: null, // map地圖layer:null, //地圖圖層lightLayer:null, //燈圖層houseLayer:null, //房子圖層//紅綠燈數據lightData:[{x:"987798.93778", y:"213885.81024"},{x:"987710.93778", y:"213810.81024"},],//房子數據houseData:[{x:"987610.93778", y:"213885.81024"},{x:"987510.93778", y:"213810.81024"},],};},mounted() {this.initMap();setInterval(() => {this.initLightData();}, 1000)},methods: {//初始化紅綠燈數據initLightData(){this.lightLayer.getSource().clear();this.lightData.forEach((item, index) => {var feature = new Feature({geometry: new Point([Number(item.x), Number(item.y)]),});let url = "images/light.png";//const zoom = this.map.getView().getZoom();let style = new Style({image: new Icon({scale: 0.15 ,src: url,anchor: [0.48, 0.52],}),});feature.setStyle(style);this.lightLayer.getSource().addFeature(feature);});},//初始化房子數據initHouseData(){this.houseLayer.getSource().clear();this.houseData.forEach((item, index) => {var feature = new Feature({geometry: new Point([Number(item.x), Number(item.y)]),});let url = "images/house.png";let style = new Style({image: new Icon({scale: 0.3,src: url,anchor: [0.48, 0.52],}),});feature.setStyle(style);this.houseLayer.getSource().addFeature(feature);});},initMap() {//地圖圖層this.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.lightLayer = new VectorLayer({source: new VectorSource(),});//房子的圖層this.houseLayer = new VectorLayer({source: new VectorSource(),});this.map = new Map({//地圖容器IDtarget: "map",//引入地圖layers: [this.layer,this.lightLayer,this.houseLayer],view: new View({//地圖中心點center: [987777.93778, 213834.81024],zoom: 12,minZoom:6, // 地圖縮放最小級別maxZoom:19,}),});this.initLightData();this.initHouseData();//獲取點的監聽方法設置this.onPoint()},//? 獲取點onPoint() {// 監聽singleclick事件this.map.on('singleclick', function(e) {console.log(e.coordinate)})}}, }; </script><style scoped> .map {width: 100%;height: 800px; } </style>?

總結

以上是生活随笔為你收集整理的Vue+Openlayers实现显示图片并分优先级多图层加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。