vue项目中openlayers的应用

openlayers简介

openlayers官方文档
openlayers专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问

openlayers在vue项目中的应用

安装openlayer

npm install ol -save

按需引用模块

根据项目需要引用对应的ol模块

import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import OlMap from 'ol/Map'
import OlView from 'ol/View'
import { get as getProjection } from 'ol/proj'
// 图上图标相关
import OlOverlay from 'ol/Overlay'
import OlFeature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
// 用来添加相关文字描述的
import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill'

import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import { Map, View, Feature } from 'ol'
import { Style, Icon, Stroke } from 'ol/style'

具体使用

首先需要一个地图容器

<div id="allmap" class="allmap" style="width:100%;height: 100%;overflow: hidden;"></div>

新建一个layer存放地图的底图，这里使用的是谷歌的瓦片图层，url是瓦片图层的路径

let offlineMapLayer = new TileLayer({
   source: new XYZ({
     url: 'static/tiles1/{z}/{x}/{y}.png',
     wrapX: true
   })
 })

确认坐标系，地图中心、缩放等级等

mounted () {
    this.ggmap()
},
methods: {
   ggmap () {
      let targetMap = document.getElementById('allmap')
      let offlineMapLayer = new TileLayer({
        source: new XYZ({
          url: 'static/tiles1/{z}/{x}/{y}.png',
          wrapX: true
        })
      })
      let projection = getProjection('EPSG:4326')
      this.gmap = new OlMap({
        layers: [offlineMapLayer],
        view: new OlView({
          center: [111.20, 29.1], // 地图中心
          projection: projection, // 对应地图的切片规则
          zoom: 9, // 地图初始化渲染等级
          minZoom: 8, // 地图最小缩放等级
          maxZoom: 15, // 地图最大缩放等级
          zoomControl: true// 地图是否可被缩放控制
        }),
        target: targetMap.id
      })
   }
}