VueJS中的Openlayers渲染地图

KeepFing
351 阅读3分钟

关于Openlayers

Openlayers是一个基于Javacript开发，免费、开源的前端地图开发库，使用它，可以很容易的开发出WebGIS系统。目前Openlayers支持地图瓦片、矢量数据等众多地图数据格式，支持比较完整的地图交互操作。除了用于地图之外，还可以以静态资源图片为背景做一系列图层和地图要素的展示和操作。

在openlayers中存在几个基本的类或者构造函数，在源码中是用构造函数的方式呈现的。

  • 1、Map类：相当于一个地图的容器，配置了比如：地图需要展示在哪个DOM节点上，需要加载的图层有哪些等
  • 2、View类：配置map中地图的基本信息，比如：最大最小层级，默认的层级，默认的定位中心点，投影方式等
  • 3、Tile类：瓦片加载配置，可以设置加载地图的方式，地图的访问地址等

通过以上的构造函数(类)就可以在页面中加载地图了。

Openlayers加载地图实现

  • 首先需要安装和引入openlayers的库和相关的属性和方法

    当前使用的openlayers库版本是6.3.1，最新已经更新到7.x

    安装npm install ol --save或者是带上版本npm install ol@6.3.1 --save

    在需要使用的vue文件中引入核心的css文件和上文提及的属性和方法

    import "ol/ol.css";
import { defaults } from "ol/control";
import Map from "ol/Map";
import {Tile as TileLayer} from 'ol/layer';
import {XYZ} from 'ol/source';

  • 上文提到说需要给ol指定加载地图的DOM元素，所以需要在template中定一一个DOM元素并设置宽高 <div class="map" id="mapBox"></div>

  • 渲染地图

    需要注意的是，在初始化地图时，需要挂载到真实的DOM元素，所以需要在DOM加载完成之后才行运行初始化地图的相关代码

initMap(){
    const Dark_Map_Layer1 = new TileLayer({
        name: "夜色地图图层",
        source: new XYZ({
            url: https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
        }),
        opacity: 1,
    });
    this.map = new Map({
        controls: defaults({
            attribution: false,
            zoom: true,
        }).extend([]),
        layers: [ Dark_Map_Layer1 ],
        target: "mapBox",
        view: new View({
            projection: "EPSG:4326",
            center: [114.23462,30.692133],
            zoom: 6,
            minZoom: 4,
            maxZoom: 30,
        }),
    });
}

Map构造函数传入的option配置项4个属性：controls、layers、target、view

  1. controls：由一个defaults的方法实现，接收一个对象参数， 
        attribution:false, //可以接受一个html字符串，也可以设置false，不显示描述信息
    zoom: false, //接收一个bool值，控制地图手动点击+- 缩放地图
  2. layers：是一个数组，添加你需要显示的图层，需要注意的是，如果有多个图层，在没有手动设置层级顺序的情况下，默认是数组最开始的元素在地图的图层最下层。
  3. target：DOM的id
  4. view：由View构造函数实现。接收一个对象 
    projection: "EPSG:4326",  //投影方式
center: [114.23462,30.692133],  //默认的中心点的坐标
zoom: 6,  // 默认的放大层级
minZoom: 4,  //缩放的最小层级
maxZoom: 30,  //缩放的最大层级

实现效果

image.png

常用的地图在线地址

https://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6 //高德地图

https://t{0-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=申请的key//天地图

https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}  //Arcgis暗黑系地图

https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png //Arcgis英文标注的黑色系地图

https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z} //谷歌卫星地图

https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}  //Arcgis地形地图
avatar
文章
阅读
粉丝