官方文档

API（v6.15.1）：https://openlayers.org/en/v6.15.1/apidoc/

搭建工程及基本组件

注：该章节并非最终（直接可运行的）代码，请结合问题记录。

搭建工程

vue init webpack ol-demo // 一步步把框架搭起来
npm i -S ol // 然后添加openlayers依赖

地图组件

如果要在此通过css隐藏默认组件，style加scoped是无效的，需要直接写。

<template>
    <div id="map" ref="rootmap"></div>
</template>
<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
export default {
  name: 'MapCom',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    let mapcontainer = this.$refs.rootmap
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: 'EPSG:4326',
        center: [112.064839, 32.548857],
        zoom: 5
      })
    })
    console.log('mapcontainer', mapcontainer)
  }
}
</script>
<style>
#map{
    height:100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
    display: none;
}
</style>

索引页面

<template>
    <div class="main-container">
        <map-com></map-com>
    </div>
</template>
<script>
import MapCom from '@/components/OlMap'
export default {
  comments: {
    MapCom
  }
}
</script>

问题记录

BrowserslistError: Unknown browser query 'dead'

 error  in ./node_modules/ol/ol.css

Module build failed: BrowserslistError: Unknown browser query `dead`
    at D:\project\ol-demo\node_modules\browserslist\index.js:164:11
    at Array.reduce (<anonymous>)
    at resolve (D:\project\ol-demo\node_modules\browserslist\index.js:132:18)
    at browserslist (D:\project\ol-demo\node_modules\browserslist\index.js:224:16)
    at Browsers.parse (D:\project\ol-demo\node_modules\autoprefixer\lib\browsers.js:61:16)
    at new Browsers (D:\project\ol-demo\node_modules\autoprefixer\lib\browsers.js:52:30)
    at loadPrefixes (D:\project\ol-demo\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
    at plugin (D:\project\ol-demo\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
    at LazyResult.run (D:\project\ol-demo\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:277:20)
    at LazyResult.asyncTick (D:\project\ol-demo\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:192:32)
    at LazyResult.asyncTick (D:\project\ol-demo\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
    at D:\project\ol-demo\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:27

 @ ./node_modules/ol/ol.css 4:14-109 13:3-17:5 14:22-117
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/OlMap.vue
 @ ./src/components/OlMap.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/index.vue
 @ ./src/views/index.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

原因：使用的ol版本默认是最新的v7.2.2，版本不适配
解决：在官网历史版本找到6.x的最近一版，卸载ol后重新安装：npm i -S ol@^6.15.1

页面一片白

可能是地图容器宽高未设置，或者路由未配置正确
也可能是默认的底图未请求到：

针对第二个原因，可以更换有效的底图，这里以高德地图为例（该地址不需要token）。
把地图组件中TileLayer配置改为来源高德地图：

import XYZ from 'ol/source/XYZ'

new TileLayer({
  title: 'BASE_LAYER',
  source: new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
    wrapX: true
  }),
  visible: true
})

现在可以看到地图出现了。

常见功能（待更新）

点、线、面基本图形加载

监听与点击事件

信息弹窗

数据聚合展示

点位位置更新

点位轨迹回放

图形标绘（圆、多边形）

标签：node,Vue,lib,demo,modules,js,ol,Openlayers,试手
From： https://www.cnblogs.com/cosmicbison/p/17148212.html

Vue+Openlayers 试手（待更新）