vue集成openlayers

下載依賴

cnpm i -S ol

創建地圖文件

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

• 按需引入相應的API，具體查看官方文檔

<script>
import Map from "ol/Map";
import View from "ol/View";
// 添加圖層
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import TileWMS from "ol/source/TileWMS.js";
// 格式化地理座標
import { fromLonLat } from "ol/proj.js";
export default {
  data() {
    return {
      map: null,
      //後臺服務器地址
      urlRoot: "http://193.112.110.27:8080/geoserver/gee/wms?",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //  經緯度轉化
      var center = fromLonLat([101.34272, 23.6042484]);
      //  自定義圖層
      this.layers = [
        new TileLayer({
          source: new TileWMS({
            url: this.urlRoot, //圖層地址
            params: { LAYERS: "fangchenggang:other_sea" }, //圖層名稱
            serverType: "geoserver", //後臺服務器
            zIndex: 2 //圖層層級
          })
        }),
        new TileLayer({
          source: new TileWMS({
            url: this.urlRoot,
            params: { LAYERS: "fangchenggang:realm" },
            serverType: "geoserver"
          }),
          zIndex: 3
        }),
        new TileLayer({
          source: new TileWMS({
            url: this.urlRoot,
            params: { LAYERS: "fangchenggang:stockpile" },
            serverType: "geoserver"
          }),
          zIndex: 3
        }),
        new TileLayer({
          source: new TileWMS({
            url: this.urlRoot,
            params: { LAYERS: "fangchenggang:road" },
            serverType: "geoserver"
          }),
          zIndex: 3
        }),
        new TileLayer({
          source: new TileWMS({
            url: this.urlRoot,
            params: { LAYERS: "fangchenggang:railway" },
            serverType: "geoserver"
            //crossOrigin: 'anonymous'
          }),
          zIndex: 3
        }),
        new TileLayer({
          source: new TileWMS({
            url: this.urlRoot,
            params: { LAYERS: "cesium:storage_yard" },
            serverType: "geoserver"
          }),
          zIndex: 3
        })
      ];
      //  加載地圖
      this.map = new Map({
        target: "map", //地圖容器
        layers: [        
        //加載天地圖天地圖
        new TileLayer({
          source: new XYZ({
            url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          }),
          zIndex: 1
        })],
        view: new View({
          projection: "EPSG:3857",
          //初始化地圖中心
          center: center,
          zoom: 2,
          // 鏡頭
          maxZoom: 18,
          minZoom: 13
        }),
        logo: false
      });
      //添加圖層
      this.map.addLayer(layers);
    }
  }
};
</script>

其他API

• 從地圖中刪除給定的疊加層。

this.map.removeLayer(layer);

• 設置圖層顯示或隱藏

this.layers.road.setOpacity(0)