OpenLayers整合至Vue
这篇记录如何将js的OpenLayers整合到Vue中
js代码
<!Doctype html>
<head>
<title>OpenLayers</title>
<link rel="stylesheet" href="../v6.3.1-dist/ol.css">
<script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
* {
padding: 0;margin: 0;}
body,html {
width: 100%;
height: 100%;
}
#map {
height: 80%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()})
],
view: new ol.View({
center: [0, 0],
zoom: 2
}),
target: 'map'
});
</script>
</body>
</html>
我们开始
1.创建一个vue项目
vue create 项目名 //脚手架3创建方式
2.下载依赖
npm install ol //或者 yarn add ol
3.直接在App.vue中操作，或者新建一个vue文件操作
<template>
<div class="box" >
<div id="map" class="map"></div>
</div>
</template>
<script>
import 'ol/ol.css'
import OlMap from 'ol/Map'
import OlView from 'ol/View'
import OllayerTile from 'ol/layer/Tile'
import OlsourceOSM from 'ol/source/OSM'
export default {
name: 'box',
data () {
return {
map:null,
}
},
mounted(){
this.map = new OlMap({
layers: [new OllayerTile({
source: new OlsourceOSM()})],
view: new OlView({
center: [0, 0],
zoom: 2
}),
target: 'map'
});
}
}
</script>
<style >
*{
padding: 0;margin: 0;}
html,body,.box{
width: 100%;
height: 100%;
}
.map {
height: 80%;
}
</style>
template写html结构，script写js代码，style写样式。这是最基本的如果这都不知道建议去学习vue
总结一下vue和js重要的区别
1.对象引入方式的区别
js直接两行代码全部引入，而vue需要一个对象一个对象引入
js中 new 一个 ol对象 ,在Vue中就要先引入对象，再new
比如说
new ol.Map()
在vue中需要先
import OlMap from 'ol/Map'
然后再
this.map = new OlMap()
当然，map在data中定义好了，如果赋值的对象不想在data中定义，就要let一个对象，然后new一个东西给他
2.vue组件化
可以在外部定义vue文件，然后引入，在vue对象中的template中激活，然后直接当标签用，例如
<template>
<div>
<Olmap/>
</div>
</template>
<script>
import Olmap from './map'
//map.vue先写好一个地图
export default {
components: {
Olmap
},
}
</script>
//别忘了给Olmap留区域
补充：
1.eslint报错
如果你的项目使用了eslint，并且频频报错，建议看看如下报错原因
1.代码不能有分号，将所有分号删除
2.字符串不能用双引号，将双引号替换为单引号
3.行内逗号后要有空格，变量赋值等号后要有空格，行内大括号一前一后要有空格
4.new一个对象，对象名必须大写！！
还有别的固定的格式，具体看报错，百度翻译一下就可以了
2.如何引入ol对象
来来来，官方文档看一看啊
链接：https://openlayers.org/en/latest/apidoc/
有事没事 翻翻文档
大体就是这样，细节部分自己修改哦
有一说一，小eslint怡情，大eslint伤身。。。