OpenLayers 入门使用

爱被打了一巴掌 2022-01-26 08:13 327阅读 0赞

###    使用 OpenLayers v5 版本入门 ###

### 一、 Openlayers 下载： ###

[Openlayers 官网下载][Openlayers]（国外网站，可能访问会比较慢）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]  ![20190528160410543.png][]     ![20190528160434618.png][]

### 二、入门使用 ###

将下载好的 js 和 css 引入项目。

![20190528160638507.png][]         ![20190528161718933.png][]

**1、引入 js 和 css**

**2、定义 div 容器**

**   3、js 初始化地图**

把定义视图换成这个也行：

view: new ol.View({
           // 设置成都为地图中心
           center: [104.06, 30.67],
           // 指定投影使用EPSG:4326一个等同于WGS84坐标系
           projection: 'EPSG:4326',
           zoom: 10
       })

### OpenLayers 的组成部分: ###

1）**ol.map:** 它本身并没有什么实事需要他做，他只是一个协调者，去协调各个组成部分。对于我们开发而言，它就是一个程序的入口，我们可以通过它使用其提供的功能。

2）**ol.view**:即视图。它主要就是控制地图显示的位置以及层级等功能

3）ol.layer:即图层。在openlayers中针对不同业务有着多种多样的图层类提供，而ol.layer相当于一个管理者，有效处理地图数据来源的多样性和复杂性问题。

4）ol.source:即数据源。它是整个地图背后的核心部分，如果没有数据，地图是渲染不出来。它与图层一一对应，针对不同的图层也会有不同的数据来源。

5）还有两个组成部分:控件（**ol.control**），交互（**ol. interaction**），后面再接触。

### 解释下 ol.map 初始化的参数： ###

1）**target** : 这个做地图开发的都懂的，就是在DOM中定义的地图容器，一般是一个div

2）**layers**: openlayers 支持多个图层显示，可通过后期addlayer方法添加上去的ol.layer.Tile是ol.layer下的一个子类。主要是用来定义瓦片图层。

3）**view**：主要定义地图显示的中心点以及层级，可能有人疑问这个地图中心点为什么不是常见的WGS84坐标系坐标点。这主要是 openlayers 默认使用的**墨卡托投影坐标系**，当然我们也是可以使用 **WGS84** 坐标系的。

最后访问页面查看：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1][]

参考资料：

[openLayers 官方API][openLayers _API]

[openLayers 官方例子][openLayers]

[openLayers 中文社区][openLayers 1]

ends ~

[Openlayers]: https://openlayers.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019052816035417.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0,size_16,color_FFFFFF,t_70
[20190528160410543.png]: https://img-blog.csdnimg.cn/20190528160410543.png
[20190528160434618.png]: /images/20220126/826940018e5241bdb92769a3c9a50e9c.png
[20190528160638507.png]: https://img-blog.csdnimg.cn/20190528160638507.png
[20190528161718933.png]: /images/20220126/aaf6f0031e374792be74cf64ad1b4a38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1]: /images/20220126/19ee23bc988d424a9649c4c847fb4506.png
[openLayers _API]: https://openlayers.org/en/latest/apidoc/
[openLayers]: https://openlayers.org/en/latest/examples/index.html
[openLayers 1]: http://www.openlayers.cn/portal.php