ol之從全局加載ol

ol之從全局加載ol

將openlayers引入vue：

npm i ol

當使用時，需要從ol中分別將用到的組件引入頁面，如下：

import 'ol/ol.css'
import {Map, View} from 'ol'
import Tile from 'ol/layer/Tile'
import Image from 'ol/layer/Image'
import Vector from 'ol/source/Vector'
import layerVector from 'ol/layer/Vector'
import WFS from 'ol/format/WFS'
import WMTS from 'ol/source/WMTS'
import XYZ from 'ol/source/XYZ'
import OSM from 'ol/source/OSM.js'

暫無找到其他較好解決方法，所以將需要引入的組件放入對象中暴露為ol對象引入，文件如下：

import View from 'ol/View'
import Map from 'ol/Map'
import Feature from 'ol/Feature'
import Overlay from 'ol/Overlay';
import Tile from 'ol/layer/Tile'
import Image from 'ol/layer/Image'
import Vector from 'ol/layer/Vector'
import XYZ from 'ol/source/XYZ'
import WMTS from 'ol/source/WMTS'
import VectorSource from 'ol/source/Vector'
import WFS from 'ol/format/WFS'
import GeoJSON from 'ol/format/GeoJSON'
import OSM from 'ol/source/OSM.js'
import TileWMS from 'ol/source/TileWMS.js'
import ImageWMS from 'ol/source/ImageWMS.js'
import Point from 'ol/geom/Point';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke'
import Fill from 'ol/style/Fill'
import {transform, fromLonLat, toLonLat} from 'ol/proj'
import ImageStyle from 'ol/style/Image';
import Icon from 'ol/style/Icon';
import Circle from 'ol/style/Circle';
import ZoomToExtent from 'ol/control/ZoomToExtent';
import { buffer } from 'ol/extent';
let ol = {
  View: View,
  Map: Map,
  Feature: Feature,
  Overlay: Overlay,
  geom: {
    Point: Point
  },
  layer: {
    Tile: Tile,
    Image: Image,
    Vector: Vector,
  },
  control: {
    ZoomToExtent: ZoomToExtent
  },
  source: {
    Vector: VectorSource,
    WMTS: WMTS,
    OSM: OSM,
    TileWMS: TileWMS,
    ImageWMS: ImageWMS,
    XYZ: XYZ,
  },
  format: {
    WFS: WFS,
    GeoJSON: GeoJSON,
  },
  style: {
    Style: Style,
    Stroke: Stroke,
    Fill: Fill,
    Image: ImageStyle,
    Icon: Icon,
    Circle: Circle,
  },
  proj: {
    transform: transform,
    fromLonLat: fromLonLat,
    toLonLat: toLonLat,
  },
  extent: {
    buffer: buffer
  }
}

export default ol

 

如有更好的方法，歡迎評論交流。

 

 

鑽研不易，轉載請注明出處......