Vue + OpenLayers

Vue中使用OpenLayers,之前寫了是 OpenLayers  5.3的版本，最近又開始一個項目，繼續采用的是Vue + OpenLayers (6.3.1)，

這個項目主要是做氣象數據，需要在地圖上展示不同站點，數據查詢，溫度區域的展示，風場的展示等等，我會陸續更新。

從最開始的展示地圖開始

 

　　創建vue項目就省略了，OpenLayers通過NPM 安裝

npm install ol -S

Vue頁面

　　OpenLayers 加載地圖可以加載離線地圖，也可以下載離線瓦片地圖加載，

地圖相關配置，我放在data中，以便后面動態改變。

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

　import 'ol/ol.css'  // 在OpenLayers 6.3.1 版本使用需要引入css

data () {
    return {
      map: null,
      // url: '/static/openStreetMapsichuan/{z}/{x}/{y}.png', // 加載離線瓦片地圖
      url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', // 加載在線瓦片地圖
     // 地圖View展示選項配置
      viewOptions: {
        projection: 'EPSG:4326',
        // center: [102.87855327334883, 29.95539168988012], // [104.089175, 30.650451]
        center: [104.089175, 30.650451], // [104.089175, 30.650451] 地圖中心位置
        zoom: 8
        // extent: [101.9004807124176, 28.837774208959473, 103.38848561448468, 30.9210929107385], // [minX, minY, maxX, maxY]
        // minZoom: 6,　
        // maxZoom: 19 // 縮放最大級別控制
      },
      view: null,
      source: null,
      pielayer: null // 點線信息的圖層
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    // 加載地圖底圖
    initMap () {
      let _this = this
      var layers = new TileLayer({
        source: new XYZ({
          url: _this.url
        })
      })
      _this.view = new View(_this.viewOptions)
      this.map = new Map({
        layers: [ layers ],
        target: 'map',
        view: _this.view
      })
    },

這樣基本的地圖就可以看到了