1、安装vue-cli3.0.1: Installation | Vue CLI
cnpm install -g @vue/cli
vue -V 查看版本(出现错误【 vue' 不是内部或外部命令,也不是可运行的程序 或批处理文件】处理方法 vue-cli 3.X安装'【 vue' 不是内部或外部命令,也不是可运行的程序 或批处理文件】处理办法_NeonSyrup的博客-CSDN博客)
2、新建项目 vue create vue-openlayers
,并选择default模版
3、运行
cd vue-openlayers
npm run serve
4、用vscode打开项目,打开终端,安装openlayers
openlayers官网:http://openlayers.org
npm i -S ol
删除掉HelloWorld.vue
新建 olmap.vue组件 (vscode编辑器下可以安装vetur和 vue vscode snippets两插件方便代码提示及写vue代码-vbase命令)
components/olmap.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 {
data() {
return {
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
})
});
}
};
</script>
<style>
#map{height:100%;}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}
</style>
App.vue
<template>
<div id="app">
<olmap />
</div>
</template>
<script>
import olmap from './components/olmap.vue'
export default {
name: 'app',
components: {
olmap
}
}
</script>
<style>
*{padding:0; margin:0;}
html,body{
height: 100%;
}
#app {
height: 100%;
}
</style>
5、运行 npm run serve
6、将一些信息放置到配置文件中,src目录下新建config文件夹,建mapconfig.js
src/config/mapconfig.js
import TileLayer from "ol/layer/Tile"
import TileArcGISRest from 'ol/source/TileArcGISRest'
import OSM from "ol/source/OSM"
import XYZ from 'ol/source/XYZ'
let maptype=2 //0表示部署的离线瓦片地图,1表示OSM,2表示使用Arcgis在线午夜蓝地图服务
var streetmap=function(){
var maplayer=null;
switch(maptype){
case 0:
maplayer=new TileLayer({
source: new XYZ({
url:'http://127.0.0.1:7080/streetmap/shenzhen/{z}/{x}/{y}.jpg'
})
})
break;
case 1:
maplayer=new TileLayer({
source: new OSM()
})
break;
case 2:
maplayer=new TileLayer({
source:new TileArcGISRest({
url:'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
})
})
break;
}
return [maplayer];
}
var mapconfig={
x:114.064839, //中心点经度和纬度
y:22.548857,
zoom:15, //地图缩放级别
streetmap:streetmap
};
export default mapconfig
src/components/olmap.vue作相应的更改
<template>
<div id="map" ref="rootmap">
</div>
</template>
<script>
import "ol/ol.css"
import { Map, View } from "ol"
import mapconfig from '../config/mapconfig'
export default {
data() {
return {
map: null
};
},
mounted() {
var mapcontainer = this.$refs.rootmap;
this.map = new Map({
target: mapcontainer,
layers: mapconfig.streetmap(),
view: new View({
projection: "EPSG:4326", //使用这个坐标系
center: [mapconfig.x,mapconfig.y], //深圳
zoom: mapconfig.zoom
})
});
}
};
</script>
<style>
#map{height:100%;}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}
</style>
附:
openlayers 4.6.5 API
OpenLayers v4.6.5 API - Class: Map
openlayers 5.3.0 API