openlayers layers图层没有撑满容器

转载

langrisser 2024-09-24 16:18:48

文章标签 vue.js javascript 加载图层 API 文章分类 云原生云计算

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]
      });
    }
}