Tianditu:天地图
BaiduMap: 百度地图

什么是Openlayers?

openlayers是一个专为Web Gis客户端开发提供的javascript包。OpenLayers 支持的地图包括Google Maps、Yahoo、 Baidu、天地图、微软Virtual Earth 等等,可以说是功能非常之强大。
Openlayers支持调用远程服务器地图(以OGC形式发布的地图)到本地的客户端浏览器中进行显示。
OpenLayers 除了可以在浏览器中帮助开发者实现地图浏览的基本效果,比如放大、缩小、平移等常用操作之外,还可以进行选取面、选取线、要素选择、图层叠加等不同的操作。

什么时候需要使用Openlayers?

       那当然是在必要的时候。比如,本人原本使用的百度地图和天地图。但是当需要在地图上添加一个图层用以显示dwg格式的cad文件时,很明显原生的baiduMap or Tianditu 是未提供加载图层的API(最多提供了一些覆盖物Overlay层)。那么这个时候就需要使用到OpenLayers的图层叠加了。
虽然OpenLayers也不直接支持dwg或dxf格式的文件叠加,但是可以间接支持。kml支持kml、shp、geojson等文件格式的叠加。

      在我的理解中,openlayers主要是做图层管理,它可以建立多个图层,包括底图层TileLayer来加载地图,还要一些vectorLayer一些叠加层来加载矢量文件。

好了言归正传,由于项目需要,将原本使用的baiduMap改成了Tianditu。那么下面说说,如何在Vue框架中使用OpenLayers来加载天地图作为地图

加载天地图

  • API key
    首先如果要使用天地图,需要到天地图官网申请一个API key。在官网申请成为 个人开发着,然后创建一个应用即可,系统会分配key。
  • 引入天地图
    在vue项目的index.html文件中,添加以下代码:
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的API key" type="text/javascript"></script>

在wepack.base.config.js文件加中添加依赖;

externals: {
    'T': 'T'
  },
  • 引入openlayers,添加依赖
npm i ol -save
  • 主要代码

使用OpenLayers加载天地图有两种方法,分别是ol.source.WMTS类(简称WMTS) 和 ol.source.XYZ类(简称XYZ)。后者代码比较简单,但是本人在实现过程中发现通过XYZ无法调取地图服务,原因未知。所幸采用WMTS类来进行调取,以下是主要代码:

//html
<template>
  <div>
  <div id="div_map" style= "height: 800px;width:1000px">
  </div>
  </div>
</template>

//js代码
import Map from 'ol/Map';
import View from 'ol/View';
import 'ol/ol.css';
import { Tile as TileLayer } from 'ol/layer';
import { toLonLat, fromLonLat } from 'ol/proj';//这里要注意
import { defaults as defaultControls } from 'ol/control.js';
import { getWidth, getTopLeft } from 'ol/extent.js';
import { get as getProjection } from 'ol/proj.js';
import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
methods: {
initTianditu() {
      let projection = getProjection('EPSG:3857');
      let projectionExtent = projection.getExtent();
      let size = getWidth(projectionExtent) / 256;
      let resolutions = new Array(18);
      let matrixIds = new Array(18);
      for (let z = 1; z < 19; ++z) {
        //分辨率
        resolutions[z] = size / Math.pow(2, z);
        //放大等级
        matrixIds[z] = z;
      }
      //天地图API key
      let webKey = '你的API Key';
      let wmtsUrl_3 = 'http://t{0-7}.tianditu.gov.cn/img_w/wmts?tk='; //影像底图
      let tileLayer = new TileLayer({
        source: new WMTS({
          url: wmtsUrl_3 + webKey,
          layer: 'img',
          matrixSet: 'w',
          format: 'tiles',
          style: 'default',
          projection: projection,
          tileGrid: new WMTSTileGrid({
            origin: getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: matrixIds
          }),
          wrapX: true
        })
      });
      this.map =  new Map({
        target: 'div_map',
        view: new View({
          center: fromLonLat([120.60753817138888, 30.49043631527778]), 
          projection: 'EPSG:3857',
          zoom: 12//加载地图的层级
        }),
        layers: [tileLayer]
      });
    }
}

let wmtsUrl_3 = ‘http://t{0-7}.tianditu.gov.cn/img_w/wmts?tk=’;
其中的url是天地图的服务调用地址,
需要说明的是,天地图有几个服务器,分别通过t0-t7来调用。天地图有很多地图类型;
let wmtsUrl_1 = ‘http://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=’; //矢量底图
let wmtsUrl_2 = ‘http://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk=’; //矢量注记
let wmtsUrl_3 = ‘http://t{0-7}.tianditu.gov.cn/img_w/wmts?tk=’; //影像底图
let wmtsUrl_4 = ‘http://t{0-7}.tianditu.gov.cn/cia_w/wmts?tk=’; //影像注记
let wmtsUrl_5 = ‘http://t{0-7}.tianditu.gov.cn/ter_w/wmts?tk=’; //地形底图
let wmtsUrl_6 = ‘http://t{0-7}.tianditu.gov.cn/cta_w/wmts?tk=’; //地形注记
let wmtsUrl_7 = ‘http://t{0-7}.tianditu.gov.cn/ibo_w/wmts?tk=’; //境界(省级以上)
let wmtsUrl_8 = ‘http://t{0-7}.tianditu.gov.cn/eva_w/wmts?tk=’; //矢量英文注记