OpenLayers基本使用

OpenLayers基本使用

使用yarn安装

yarn add ol

使用

放置div标签

 <div id="map"  style="width: 100%"></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'    
        });

效果图

其中

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