初始化vue项目:
打开cmd,输入命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装Vue需要npm的版本大于3,所以我们先升级一下npm,输入命令
cnpm install cnpm -g
安装vue,输入命令
cnpm install vue
安装vue-cli,输入命令
cnpm install --global vue-cli
vue init webpack projectName
cd "项目所在文件夹“
然后依次执行下面的命令
cnpm install
cnpm run dev
引入openlayer包, cnpm i -S ol
新建ol.vue,配置router,注释掉helloWorld,使用ol.vue;
在ol.vue中加入以下代码;
<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: "ol",
data() {
return {
message: "ol-test",
map: null,
};
},
mounted() {
var mapcontainer = this.$refs.rootmap;
this.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
projection: "EPSG:4326", //使用这个坐标系
center: [114.064839, 22.548857], //深圳
zoom: 12,
}),
});
},
methods: {},
};
</script>
<style scoped>
#map {
height: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
display: none;
}
</style>
保存运行,bingo.
随笔记录