Vue+Openlayers 试手
选用Vue2.0+Webpack+Openlayers。
参考链接:https://blog.csdn.net/qq_43274430/article/details/102580903
官方文档
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
})
现在可以看到地图出现了。
ps. 不更新了,项目要求用的引擎换成了MapBox。