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

 

如有更好的方法，欢迎评论交流。

 

 

钻研不易，转载请注明出处......