Openlayers+天地图在页面上显示（初始化）（使用vue3）

一、原理介绍

首先先来介绍一下Openlayers加载天地图的原理，废话不多说，概念性的东西一笔带过

一个地图里面就像一个对象，首先要new一个map容器

容器里面有一些属性 target：目标容器name，也就是说这个map容器放在哪里，比如说前端代码有一个div id=‘map’，那么target就是map，就是将这个容器放在这个 map的div中。

那么一个地图还有什么属性呢？

一个地图里面有很多的图层（这里用瓦片图层来介绍，较多的东西就不讲了，涉及很多gis的相关知识，大致了解就好）

图层Layer就是显示地图最关键的部分，一个完整的地图由很多图层来共同完成，比如用来显示的，用来标注的等等

那么一个Layer图层里面又有一个数据源来支持（这里用天地图来举例）

map里面还有一个比较重要的东西就是View视图，这里控制地图的初始显示大小级别，中心点等

二、代码举例

那么原理讲的差不多了，具体实现用代码加文字来展示

导包什么的就不过多展示了

new Map

import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
setup(){
     let map: any = null;
     let tiandiLayer: any = null;
map = new Map({
          layers: [],    //图层集
          target: 'map',   //目标
          view: new View({       //视图
            projection: 'EPSG:4326',   //EPSG：4326 就是用经纬度来具体显示  还有一种是用坐标
            center: [avgLon, avgLat],   //中心点（经纬度，自行设定）
            zoom: 15,               //初始缩放级别
            minZoom: 6,         //最小缩放级别
            maxZoom: 20,        //最大放大级别
          }),
          interactions: OlDef({   //地图上的一些控制器，可自行进去看看
            dragPan: true,
            doubleClickZoom: false, //取消双击放大
          }),
          controls: OlControl({
            zoom: false,         //地图上的+号—号来放大缩小地图的按键  false关闭 true打开
          }),
        });
}

 那么这时候一个地图就已经new好了，接下来就是要向图层里面放东西，查看天地图的相关例子，可以很简单的知道图层的使用，当然，要在天地图中去注册，拿到一个秘钥（很简单，不说了）

let tiandiLayer: any = null;
let layerRemark: any = null;

      //官网示例写法，不过多深究
      const projection = getProjection('EPSG:4326');
      const projectionExtent = projection.getExtent();
      const size = getWidth(projectionExtent) / 256;
      const resolutions = new Array(19);
      const matrixIds = new Array(19);
      for (let z = 0; z < 19; ++z) {
        // generate resolutions and matrixIds arrays for this WMTS
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
      }
   //添加矢量图层
        tiandiLayer = new TileLayer({
          opacity: 0.8,   //透明度
           source: new WMTS({     //数据源
           url: 'http://t3.tianditu.gov.cn/vec_c/wmts?tk=你的秘钥', //引用天地图的数据源
            layer: 'vec', //注意每个图层这里不同  类型是矢量图层
            matrixSet: 'c',  //vec_c  的后缀'c' ，每个图层不同
            format: 'tiles',   
            style: 'default',
            projection: 'EPSG:4326',    //使用4326的形式 （经纬度形式）
            tileGrid: new WMTSTileGrid({
              origin: getTopLeft(projection),
              resolutions: resolutions,
              matrixIds: matrixIds,
            }),
            wrapX: true,
          }),
        });


//添加标注图层
 //添加矢量标注
        layerRemark = new TileLayer({
          opacity: 0.8,
          source: new WMTS({
            url: 'http://t4.tianditu.gov.cn/cva_c/wmts?tk=你的秘钥',
            layer: 'cva', //注意每个图层这里不同
            matrixSet: 'c',
            format: 'tiles',
            style: 'default',
            projection: projection,
            tileGrid: new WMTSTileGrid({
              origin: getTopLeft(projectionExtent),
              resolutions: resolutions,
              matrixIds: matrixIds,
            }),
            wrapX: true,
          }),
        });

//图层设置完毕，加载到map地图中
 map.addLayer(tiandiLayer);
  map.addLayer(layerRemark);

这样一个地图初始化就已经完成啦，小伙伴们快去试试吧！