Openlayers入门教程
- OpenLayers入门(一)
- 1、什么是OpenLayers?
- 2、初识OpenLayers(一个简单的地图)
OpenLayers入门(一)
大家好,由于最近开始做webgis方面的东西,所以对openlayers需要了解学习,翻了很多资料,最大的问题还是openlayers的官网资料全英文,所以我想把我的一个学习过程一点一滴的记录一下,大家可以一起讨论学习。从最简单的开始
1、什么是OpenLayers?
**OpenLayers(简称OL)**是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问,它是一个开源的Web GIS引擎,使用了JavaScript、最新的HTML5技术及CSS技术,支持dom,canvas和webgl三种渲染方式。除了支持网页端,还支持移动端(目前移动端还不成熟,有待进一步完善)。在地图数据源方面,支持各种类型的瓦片地图,既支持在线的,也支持离线的。比如OSM, Bing, MapBox, Stamen, MapQuest等等;还支持各种矢量地图,比如GeoJSON,TopoJSON,KML,GML等等。随着OpenLayers 3的进一步发展,将支持更多的地图类型。
2、初识OpenLayers(一个简单的地图)
我们先直接进入主题,用一个小小的地图来展示一下Openlayers的效果。由浅入深,先看效果,再介绍知识点。这里是用的Vue+Openlayers结合。
至于Ol的安装使用NPM是十分简单的。在NPM中执行如下:
cnpm i -S ol
这里我们新建一个组件.vue文件来放我们的地图代码
一个简单的小地图(代码片段)
.
// example
<template>
<div style="height: 100vh; width: 100vw">
<div id="map" ref="map" style="height: 100%; width: 100%"></div>
</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: {},
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
this.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
projection: "EPSG:4326",
center: [104, 30],
zoom: 10,
}),
});
},
},
};
</script>
<style>
#map {
height: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
display: none;
}
</style>
然后我们在APP.vue中调用
<template>
<div id="app">
<h3>你好,openlayers</h3>
<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>
最后,我们npm run 起来,这样我们就可以通过地址访问到我们展示的地图了:
好了,这个就是我们的一个最终效果了,是不是很简单呢,你也来试一试吧!
更多推荐
OpenLayers入门(一)
发布评论