OpenLayers基本使用

你的名字 2023-10-01 21:59 7阅读 0赞

## OpenLayers基本使用 ##

### 使用yarn安装 ###

yarn add ol

### 使用 ###

放置div标签

### openlayer代码 ###

// 创建地图
          new ol.Map({
                // 设置地图图层
                layers: [
                  // 创建一个使用Open Street Map地图源的瓦片图层
                  new ol.layer.Tile({source: new ol.source.OSM()})
                ],
                // 设置显示地图的视图
                view: new ol.View({
                  center: [0, 0],    // 定义地图显示中心于经度0度，纬度0度处
                  zoom: 2            // 并且定义地图显示层级为2
                }),
                // 让id为map的div作为地图的容器
                target: 'map'    
            });

### 效果图 ###

![在这里插入图片描述][b26a2c7a963749fdba5ffc08b6fa5990.png_pic_center]

### 其中 ###

*  地图(Map)，对应的类是`ol.Map`，之前已有接触。从代码上来看，它就像是一个空壳子，感觉没做什么实事，因为具体事务都由其他组成部分处理了。但没有它，整个地图的其他组成部分就不能有效协调，组织在一起。同时对于开发者而言，它就是第一个入口，我们必须要掌握。
 *  视图(View)，对应的类是`ol.View`，之前已有接触，控制地图显示的中心位置，范围，层级等，此处不再过多介绍。关于其详细说明参见[View][]。
 *  图层(Layer)，OpenLayers 3有多种多样用于不同业务的图层，每一种图层在实现上都对应于一个类，放在包`ol.layer`下面，之前已接触过的`ol.layer.Tile`就是其中的一种。OpenLayers 3允许多个`layer`重叠在一起，相互之间互不干扰，是一种图形显示和管理的有效方式。应用这种方式能有效处理地图数据来源的多样性和复杂性问题。对开发者而言，它更多的表现为组织管理的类。

###  ###

[b26a2c7a963749fdba5ffc08b6fa5990.png_pic_center]: https://img-blog.csdnimg.cn/b26a2c7a963749fdba5ffc08b6fa5990.png#pic_center
[View]: http://linwei.xyz/ol3-primer/ch04/index.html