OpenLayers入门（一）_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
1

这里我们新建一个组件.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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

然后我们在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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

最后，我们npm run 起来，这样我们就可以通过地址访问到我们展示的地图了：

好了，这个就是我们的一个最终效果了，是不是很简单呢，你也来试一试吧！