查看: 756|回复: 1

解析Openlayers地图组成

[复制链接]

332

主题

367

帖子

1028

积分

金牌飞友

Rank: 6Rank: 6

积分
1028
飞币
659
注册时间
2017-7-18
发表于 2022-12-24 01:49:51 | 显示全部楼层 |阅读模式
上一篇中使用openlayers创建了一个简单的地图,以致于让一部分初学者误认为在此基础上的深入开发也很简单,这是一个非常错误的理解。此时,最关键的第一步是先弄明白每一句代码的含义,理解他们是如何组织起来的,对地图组成有个大致的了解。否则,在后续的学习和使用过程中,犹如瞎子摸象,会找不到问题的关键点而迷失方向。让我们再次回顾一下之前那个简单地图的代码:
    // 创建地图      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'            });其他代码只是用于设置地图的构造参数。由此可以推测出ol.Map是最主要的地图类,创建地图就需要构造这么一个对象。接下来依次分析每一个参数部分的代码。
参数layers

layers: [            // 创建一个使用Open Street Map地图源的瓦片图层            new ol.layer.Tile({source: new ol.source.OSM()})          ],从名字和数组类型就可以看出这个地方可以设置多个layer图层,它是OpenLayers 3地图的组成结构单元,地图是由多个layer组成的,这种设计类似于css里面的层一样,多个图层是可以叠加的,在最上面的会覆盖下面的,以此类推。在代码中我们添加了一个Open Street Map的地图layer
参数view:

view: new ol.View({    center: [0, 0],    // 定义地图中心点经纬度    zoom: 4            // 并且定义地图显示层级为4级    }),通过字面意思可以看出,它为地图定义显示窗口,对应ol.View类,可以自定义地图显示的中心点,缩放层级等。
参数target:

target: 'map'指定地图在哪个dom元素容器中显示,地图显示还是离不开使用dom来实现。Openlayers把生成的内容塞到这个dom容器内。这点和大多数如echarts也需要一个容器来承载生成的内容是一样的。使用虽然和地图业务没什么关系,但也必不可少,因为它是Web GIS,最基本的还是依赖于HTML。
通过上面的源码解读,我们可以发现OpenLayers 3地图主要是由layerview组成,layer可以有多个,view只能有一个。

解析Openlayers地图组成-1.jpg

openlayers说明

上图能明确看到的是layer,看不出view在哪儿,只知道地图显示中心确实在经度0,纬度0处。除此之外,还能看到左上角的放大缩小按钮,以及右下角的属性信息按钮。如果在地图上双击鼠标左键,或者按住鼠标左键拖动,可以看到地图也是会放大或者移动的。这些都是分析代码并没有看到的。很明显OpenLayers 3有很多默认行为,一个地图的完整构成,远不是只有viewlayer就行了。

54

主题

814

帖子

1623

积分

金牌飞友

Rank: 6Rank: 6

积分
1623
飞币
807
注册时间
2017-8-21
发表于 2022-12-24 01:55:15 | 显示全部楼层
转发了
您需要登录后才可以回帖 登录 | 加入联盟

本版积分规则

快速回复 返回顶部 返回列表