openlayers 6【二】Map地图详解,初始化一个map地图

目录

1. map 参数详情参考

2. 话不多说,先看渲染出来的效果​

2. 在vue环境下,创建一个Map地图

3. 代码分析

4. 说在后面


1. map 参数详情参考

官方文档:https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html

  • layers 了解更多
  • view 了解更多
controls module:ol / Collection〜Collection。< 模块:ol / control / Control〜Control > | Array。< 模块:ol / control / Control〜Control >

最初添加到地图的控件。如果未指定, module:ol/control~defaults则使用。

pixelRatio 数字 (默认为window.devicePixelRatio)

设备上物理像素与设备无关像素(dip)之间的比率。

interactions module:ol / Collection〜Collection。< module:ol / interaction / Interaction〜Interaction > | Array。< 模块:ol / interaction / Interaction〜Interaction >

最初添加到地图的互动。如果未指定, module:ol/interaction~defaults则使用。

keyboardEventTarget HTMLElement | 文件 | 串

监听键盘事件的元素。这决定了KeyboardPan和 KeyboardZoom互动的触发时间。例如,如果将此选项设置为 document键盘,则交互将始终触发。如果未指定此选项,则库在其上侦听键盘事件的元素是地图目标(即用户为地图提供的div)。如果不是 document,则需要集中目标元素以发射关键事件,这要求目标元素具有tabindex属性。

layers Array。< 模块:ol / layer / Base〜BaseLayer > | module:ol / Collection〜Collection。< module:ol / layer / Base〜BaseLayer > | 模块:ol / layer / Group〜LayerGroup

图层。如果未定义,则将渲染没有图层的地图。请注意,层是按提供的顺序渲染的,因此,例如,如果要使矢量层出现在图块层的顶部,则它必须位于图块层之后。

maxTilesLoading 数字 (默认为16)

同时加载的最大瓦片数。

moveTolerance 数字 (默认为1)

光标必须移动的最小距离(以像素为单位)才能被检测为地图移动事件,而不是单击。增大此值可以使单击地图更容易。

overlays module:ol / Collection〜Collection。< module:ol / Overlay〜Overlay > | Array。< module:ol / Overlay〜Overlay >

叠加层最初添加到地图中。默认情况下,不添加任何覆盖。

target HTMLElement | 串

地图的容器,元素本身或id元素的。如果在构造时未指定,则module:ol/Map~Map#setTarget必须调用渲染地图。

view 模块:ol / View〜View

地图的视图。除非在构造时或通过指定,否则不会获取任何层源 module:ol/Map~Map#setView

 

场景:为了方便我们在浏览器中实现可交互的操作,基于一些政府单位工作场景,常常会涉及到对地理地图需求的项目。我们已此为依托,使用OpenLayers便是一个减轻你的工作量的框架,利用它可以轻松地加载一幅动态可交互的地图到浏览器中!达到可交换的功能。

下面便是一个利用OpenLayers加载地图的小例子,我们先看看运行结果,并分析一下原理!

2. 话不多说,先看渲染出来的效果​

openlayers 6【二】Map地图详解,初始化一个map地图_第1张图片

2. 在vue环境下,创建一个Map地图

2.1 npm 安装 openlayers

cnpm i -S ol

2.2 完整代码





 

3. 代码分析

3.1 首先页面需要先创建一个 div,用来绑定 map 地图上

3.2 下面是一个初始化地图的方法

/**
 * 初始化一个 openlayers 地图
 */
initMap() {
    let target = "map"; //跟页面元素的 id 绑定来进行渲染
    let tileLayer = [
        new Tile({
            source: new OSM()
        })
    ];
    let view = new View({
        center: fromLonLat([104.912777, 34.730746]), //地图中心坐标
        zoom: 4.5 //缩放级别
    });
    this.map = new Map({
        target: target, //绑定dom元素进行渲染
        layers: tileLayer, //配置地图数据源
        view: view //配置地图显示的options配置(坐标系,中心点,缩放级别等)
    });
}

 

我们可以看到,前面的声明了三个变量分别是 容器(target),图层(tileLayer),view(视图)。通过实例化了一个OpenLayers的Map对象,于是就显示了地图!Map是何许人也?它是OpenLayers中最主要的对象!要初始化一幅地图,需要一个target,view,layers。

  • target 主要是用来跟页面的元素进行绑定显示
  • tileLayer 我们看到,他其实是一个数组形式,那就说明它可以存在多个图层,这也是openlayers强大之处,非常实用。通过new Tile() 创建了一个图层,但是单单创建图层也是不行,图层里面必须要有数据,于是就有了 source: new OSM() 创建了一个OpenStreetMap提供的切片数据
  • view 同理,通过new View() 创建了一个视图对象,设置一些视区的参数,
    • center 设置默认地图中心点位置 ,fromLonLat 函数是将给定的坐标从4326转到3857坐标系下,4326即是WGS84坐标系!(后面单独讲解 4326 和3857 坐标系的区别)
    • zoom  设置缩放等级

4. 说在后面

最后,地图已经成功加载到网页中,并且可以进行缩放,平移及拖动操作(map默认此功能),想实现更多功能后面再写哈。

 

 

你可能感兴趣的:(openlayers,vue,webGis)