目录

1. map 参数详情参考

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

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

3. 代码分析

4. 说在后面


1. map 参数详情参考

官方文档:OpenLayers v8.1.0 API - Class: Map

controlsmodule:ol / Collection〜Collection。< 模块:ol / control / Control〜Control > | Array。< 模块:ol / control / Control〜Control >

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

pixelRatio数字 (默认为window.devicePixelRatio)

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

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

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

keyboardEventTargetHTMLElement | 文件 | 串

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

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

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

maxTilesLoading数字 (默认为16)

同时加载的最大瓦片数。

moveTolerance数字 (默认为1)

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

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

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

targetHTMLElement | 串

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

view模块:ol / View〜View

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

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

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

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

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

2.1 npm 安装 openlayers

cnpm i -S ol

2.2 完整代码

<template>
    <div id="content">
        <div id="map" ref="map"></div>
    </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { defaults as defaultControls } from "ol/control";
import Tile from "ol/layer/Tile";
import { fromLonLat } from "ol/proj";
import OSM from "ol/source/OSM";

export default {
    name: "tree",
    data() {
        return {
            map: null
        };
    },
    methods: {
        /**
         * 初始化一个 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配置(坐标系,中心点,缩放级别等)
            });
        }
    },
    mounted() {
        this.initMap();
    }
};
</script>
<style lang="scss" scoped>
// 非核心已删除
</style>

3. 代码分析

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

<div id="map" ref="map"></div>

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默认此功能),想实现更多功能后面再写哈。

Logo

前往低代码交流专区

更多推荐