Vue+Openlayers實現顯示圖片並分優先級多圖層加載

場景

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

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

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

 

 

 

注：

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

實現

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({
        //地圖容器ID
        target: "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({
        //地圖容器ID
        target: "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>