写在前面
公司基于以前项目做升级,以前我是用openlayer3写的,现在openlayers都升级到5了,不由得感叹学不动了.话虽说但是还的学,不学谁养我呀?评论举个手,我就跟你走.,哈哈哈闲话不多说,基于我们公司升级的项目的地图部分给大家做一下讲解.
安装
我们公司项目是基于vue进行编写的,前端插件包也是用npm管理的所以
npm install ol
直接上代码
<template>
<div id="maplay"></div>
</template>
<script>
import "ol/ol.css";//地图的css样式
import { Map, View } from "ol"; //引入需要的Map和View模块
import TileLayer from "ol/layer/Tile"; //引入图层模块
import OSM from "ol/source/OSM"; //引入地图数据源模块
export default {
data() {
return {
map: null
};
},
methods: {
init() {
this.map = new Map({
target: "maplay", //要把地图渲染的dom节点中的额id
layers: [
//图层可以是多个所以是个数组
new TileLayer({
//创建图层
source: new OSM() //记载数据源
})
],
view: new View({
//创建一个地图的窗口{地图的移动,放大,缩小,旋转等等都可以在这实现}
projection: "EPSG:4326", //wgs84坐标系,(地图的一种坐标系)
center: [114.064839, 22.548857], //定位到坐标点
zoom: 12 //定位12图层
})
});
}
},
mounted() {
this.init();
}
};
</script>
<style lang="scss" scoped>
#maplay {
font-size: 16px;
height: 100%;
width: 100%;
// .ol-attribution,.ol-zoom { display: none;}
}
</style>
看看效果
我们一点一点分析
new Map({
target: "maplay", //dom中的额id
layers: [
//图层可以是多个所以是个数组
new TileLayer({
//创建图层
source: new OSM() //记载数据源---使用Open Street Map地图源的瓦片图层
})
],
view: new View({
//创建一个地图的窗口{地图的移动,放大,缩小,旋转等等都可以在这实现}
projection: "EPSG:4326", //wgs84坐标系
center: [114.064839, 22.548857], //定位到坐标点
zoom: 12 //定位12图层
})
});
ol/Map是openlayers核心组件
'ol/Map'是openlayers核心组件,他定义了target容器,把map呈现的地图映射到网页上.也可以使用setTarget()方法进行配置
import View from 'ol/View';
import Map from 'ol/Map';
var map = new Map({target: 'map'});
map.setView(new View({
center: [0, 0],
zoom: 2
}));
source地图数据源
import OSM from 'ol/source/OSM';
var osmSource = OSM();
openlayers给我们封装了,一些免可用的地图资源服务,如OpenStreetMa或者Bing,OGC源以及GeoJson或KML格式的矢量数据服务
layer层
类型:
-
ol/layer/Tile--将地图图像按照缩放级别和特定分辨率组织到网格中,呈现到我们面前,
-
ol/layer/Image--对应的是一整张图，而不像瓦片那样很多张图，从而无需切片，也可以加载一些地图，适用于一些小场景地图。
-
ol/layer/Vector--对应的是矢量地图源，点，线，面等等常用的地图元素(Feature)，就囊括到这里面了。这样看来，只要这两种Source就可以搞定80%的需求了。
-
ol/layer/VectorTile--对应矢量切片
