定制化天地图-叠加静态图层-并让它动起来

        天地图提供了网络地图开发接口，同时有部分web开发的插件，但是本文遇到的场景并不考虑使用天地图本身的插件，而是使用openlayer6.x完成需求。

一、需求

• 加载天地图影像图层
• 加载天地图矢量图层
• 在图层上叠加静态图片，以增强展示效果
• 希望图片能动起来-旋转以实现雷达图的效果

二、技术选型

• html5+css3
• vuejs
• elementui
• openlayer6.x
• 天地图服务

三、天地图服务注册

这里使用的是天地图的地图服务数据api，api提供了较多开源接口，大家可以按需使用。

注：开发者需要注册webkey，并受到日访问次数限制，生产环境使用，可以升级企业级或政府部门级别，以减少限制。

四、依赖引入

这里只是openlayer的依赖，vue相关的暂不赘述

//这里只是openlayer的依赖，vue相关的暂不赘述
//openlayer官网的示例的依赖比这里要多，其他的用不到，不需要引入
"ol": "6.9.0"

五、模块导入

  import 'ol/ol.css';
  import Map from 'ol/Map';
  import TileLayer from 'ol/layer/Tile';
  //WMTS的图层模块
  import WMTS from 'ol/source/WMTS';
  import WMTSTileGrid from 'ol/tilegrid/WMTS';
  //坐标模块
  import {get as getProjection} from 'ol/proj';
  import {getTopLeft, getWidth} from 'ol/extent';
  import View from 'ol/View';
  //图片图层
  import ImageLayer from 'ol/layer/Image';
  import Static from 'ol/source/ImageStatic';
  
  //静态图片的路径
  import mapXWImg from '@/assets/test3.png';

六、构造影像图层

引入天地图的影响图层

      //影像图层
      let wmtsLayer = new TileLayer({
        opacity: 1,
        source: new WMTS({
          attributions:
            'Tiles © <a href="#"' +