vue+openlayers学习：加载天地图
笔者本人是纯新手，学习的过程记录一下，也可以给像我一样学习openlayers的同学一些思路，欢迎各位大佬前来指正
创建项目
在创建项目之前，需安装node js和vue-cli，可以直接百度，上面介绍的安装很细
1.创建webpack
推荐使用vscode
- 打开vscode，然后【文件】>【打开文件夹】打开需要创建项目的文件夹
- 打开【终端】，在终端输入界面里面输入：
vue init webpack 项目名称在安装时，他会问你几个问题，推荐这样来
Use ESLint to lint your code? No
Set up unit tests ？ No
Setup e2e tests with Nightwatch? No
Should we run npm install for you after the project has been created? //选择npm
其他部分可以默认设置
等终端运行完成，项目就创建好了，项目大概如下所示
2.安装openlayers的依赖
何为依赖，依赖就是你写项目是引用的javascript，css等，也就是运行所需要的包,可以说是运行环境
我们上一步创建的项目，相当于重新创建了一个文件夹，后续操作都是在这个文件夹里面进行，所以，需要打开项目文件夹，怎么打开，这样来
在终端输入：
cd 你创建的项目的名称
OK，可以开始安装依赖了
npm install ol //安装openlayers的依赖
安装的依赖安装在哪了？，在这：
ps：成功的同学可以不用看这个
在有些时候，我们安装的依赖不是我们想要的，就很烦，遇到这样的情况，可以这样装：
-
打开package.json，找到这个
-
在npm的官网(https://www.npmjs.com)找到我们要的依赖，看清望准依赖的版本号
‘~’（波浪符号)：更新到当前中间位数字中最新的版本；
‘^’（插入符号)：更新到当前第一位数字中最新的版本。 -
按`“依赖名称”:"版本号"格式输入
-
在终端里面输入
npm install安装依赖
写代码
此时，你的准备工作已经全部完成，进入写代码阶段。首先在components中创建一个vue文件，我的命名为map， 要找不到components的话，这玩意在src文件夹中。
<template>
<div class="map"
id="olMap">
</div>
</template>
<script>
import 'ol/ol.css'
import { Tile as TileLayer } from 'ol/layer'
import XYZ from 'ol/source/XYZ'
import { defaults as defaultControls } from 'ol/control'
import Map from 'ol/Map.js'
import View from 'ol/View.js'
export default {
data () {
return {
map: null,
parser: null
}
},
mounted () {
this.initMap()
},
methods: {
initMap () {
const map = new Map({
target: 'olMap',
view: new View({
center: [经度,纬度],//中心点经纬度
zoom: 11,//图层缩放大小
projection: 'EPSG:4326'
}),
controls: defaultControls({
zoom: true,
attribution: false,
rotate: false
})
})
this.map = map
// 添加地图
let url = 'http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}'
url = `${url}&T=vec_c&tk=去天地图申请一个key`
const source = new XYZ({
url: url,
projection: 'EPSG:4326'
})
const tdtLayer = new TileLayer({
source: source
})
this.map.addLayer(tdtLayer)
// 添加注记
url = 'http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}'
url = `${url}&T=去天地图申请一个key`
const sourceCVA = new XYZ({
url: url,
projection: 'EPSG:4326'
})
const tdtcvaLayer = new TileLayer({
source: sourceCVA
})
this.map.addLayer(tdtcvaLayer)
}
}
}
</script>
<style lang="less" scoped>
#map {
width: 100%;
height: 100%;
}
</style>
更改App.vue
更改一下App.vue的代码，可以自己对照着看看
<template>
<div id="app">
<map />
</div>
</template>
<script>
import map from './components/map'
export default {
name: 'App',
components: {
map
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
运行
在终端里面，，输入npm run dev运行结束，会出来
App running at:
- Local: http://localhost:8080
- Network: http://10.10.21.46:8080
直接把按ctrl点击网址就可以看到你的地图
后续不间断更新------