初始化地图 #

import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import VectorLayer from 'ol/layer/Vector'
import { Fill, Style, Stroke } from 'ol/style.js'


initMap () {
	return new Map({
	  controls: ol.control.defaults({
	    attribution: false
	  }),
	  target: 'map',
	  layers: [
	    new TileLayer({
	      name: 'basisLayer',
	      source: new XYZ({
	        url: "https://api.mapbox.com/styles/v1/sknight/cizhzho3x000d2skf0uqrp088/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2tuaWdodCIsImEiOiJjaXg3YWU4ZXMwMTc2MnhxeWljanJnZGNxIn0.pozkMI1zmVRRsfEJglAsmg",
	        crossOrigin: 'Anonymous'
	      })
	    }),
	    new VectorLayer({
	      name: 'boundary',
	      source: new VectorLayer({
	        url: '../json/boundaries/boundary-nb-areas.json',
	        format: this.geojsonFormat
	      }),
	      style: new Style({
	        stroke: new Stroke({
	          color: 'rgba(23,54,171,1)',
	          width: 2,
	          //lineDash:[5]
	        }),
	        fill: new Fill({
	          color: 'rgba(255, 255, 255, .2)'
	        })
	      }),
	      zIndex: 1,
	    })
	  ],
	  view: new View({
	    center: ol.proj.transform(centerPoint, sourcePro, destinationPro),
	    zoom: defaultZoom
	  }),
	  controls: ol.control.defaults({
	    attribution: false,
	    zoom: false,
	    rotate: false
	  })
	});
}

mounted() {
 this.map = this.initMap()
}