openlayers vue中使用 (八)

我使用到的是vue-cli脚手架，版本4.0.0

1. 安装

npm install --save ol@5.3.0

2. 地图容器

<div id="map></div>

3. 引用ol

import { Map, View, Feature } from 'ol'
import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer'
import { Point, LineString } from 'ol/geom'
import { Vector as VectorSource, XYZ } from 'ol/source'
import { Style, Icon, Stroke } from 'ol/style'
import { defaults } from 'ol/control'

4. 创建地图

methods里添加创建地图方法

data() {
 return {
    map: null, // 地图对象
    zoom: 15,
    maxZoom: 17,
    minZoom: 11,
  }
},
methods: {
 createMap() {
	this.map = new Map({
	  view: new View({
	    center,
	    projection: 'EPSG:4326', // EPSG:4326格式的经纬度
	    zoom, // 地图默认缩放级别
	    maxZoom, // 地图最大缩放级别
	    minZoom, // 地图最小缩放级别
	  }),
	  target: 'map', // 地图容器id
	  controls: defaults({
	    zoom: false,
	  })
	})
	let offlineMayLayer = new TileLayer({
	  source: new XYZ({
	    url: `${process.env.VUE_APP_MAP_HOST}{z}/{x}/{y}.png`,
	  }),
	  projection: 'EPSG:4326'
	})
	this.map.addLayer(offlineMayLayer)
 }
},