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
      })
    },

这样基本的地图就可以看到了