operlayers-初始化地图-天地图初始化地图

news2025/10/31 7:56:44

今天分享一篇初始化operlayers的文章，算上一篇笔记吧，以后再有项目时直接看笔记回省好多事，也帮网上的兄弟们避避雷。

前言

这个项目是vue3+operlayers开发的一个有关地名地址的小插件，具体服务就不展示了。

之所以用天地图来加载地图呢，主要是因为天地图加载的方式比较简单，不过也不算简单吧，一开始去天地图的官网上搞了半天，后来就用到官网上申请的AppKey，哈哈

本来我想使用wmts来加载影像地图的，但是这种方式比较麻烦，而且我在网上找的好多方式都没有加载成功，为此我还在csdn上求助来着，有两个大佬回复了我，用的是阿里的影像服务，很是感谢，但是也不好使。所以，我在想是不是想使用wmts的服务就必须下载下来，在本地跑服务，希望有看到这篇文章的大佬回复一下，十分感谢、感谢！！！

实现过程

1、因为operlayers所需要的依赖文件；

operlayers其实支持用npm引入依赖的，但是因为一开始是使用内网开发，所以就使用手动引入的方式，直接下载ol.js和ol.js.map文件，直接放在public文件下，然后在index.html文件中用script标签引入即可：

<script src="/ol.js"></script>
<script src="/ol.js.map"></script>

2、首先准备好相关的影像地址，具体如下：

window.OperlayerConfig = {
    worldUnderlay: 'http://t4.tianditu.com/DataServer?T=cva_w&tk=key&x={x}&y={y}&l={z}',     // 天地图的底图服务
    worldName: 'http://t4.tianditu.com/DataServer?T=vec_w&tk=key&x={x}&y={y}&l={z}',     // 天地图的地名影像
}

以上服务地址是我在网上找的，将里面的key值更换为自己天地图账号申请的key值即可。

3、使用服务，利用operlayers的API将服务添加到operlayers的对象中。

/**
 * 设置底图的投影方式
 * @description EPSG:3857 使用墨卡托投影
 * @description EPSG:4326 使用经纬度方式投影
 */
const projection = ol.proj.get('EPSG:3857');

// 底图影像服务
var worldUnderlaylayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: window.OperlayerConfig.worldUnderlay,
    projection: projection,    // 设置底图的投影方式
    crossOrigin: 'anonymous',
  }),
})

// 地名地址
var worldNamelayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: window.OperlayerConfig.worldName,
    projection: projection,  // 设置底图的投影方式
    crossOrigin: 'anonymous',
  })
})

4、创建一个矢量图层，我们工作中绘制的图形都放在这个矢量图层中

/**
 * 矢量图层
 */
var targetManger = new ol.layer.Vector({
  //数据源
  source: new ol.source.Vector({
    wrapX: false,
  }),
})

5、上面把图层啥的都定义好了，下面开始初始化地图

// 地图对象
var mapManger: any = null

mapManger = new ol.Map({
  target: 'mapContainer',   // mapContainer
  layers: [worldUnderlaylayer,worldNamelayer, targetManger],
  view: new ol.View({
    center: [123, 46],
    zoom: 4,
    minZoom: 2,
    projection: 'EPSG:4326',
  }),
})

target：是装地图的容器盒子，id值

layers:初始化时放已经创建好的图层，因为图层是安装层级覆盖的，下面的会被上面的图层覆盖掉。所以我们将底图放在最下面，地名服务放在中间，因为管理我们绘制图像的图层需要始终可见。因此要放在最上方，也就是最后一个加载的。所以请记住，上面加载图层的位置不能乱。

view.center:地图的中心位置

view.zoom:初次加载的层级

view.projection:投影的方式，这里选择经纬度投影

6、地图对象卸载

一般情况下，我们都会将初始化地图模块封装成一个组件，在项目中有使用的时候直接引入组件即可。但是这样一个组件在多出被使用容易出现大大小小的问题，最常见的就是两处业务用到同一处组件导致组件污染。一般在vue的组件卸载之前的钩子函数中调用。

// 地图卸载事件
const destroyMap = () => {
  if (mapManger == null) return
  mapManger.setTarget(null)
  // 销毁组件
  mapManger.dispose()
  mapManger = null
  document.getElementById('mapContainer') == null
    ? ''
    : (document.getElementById('mapContainer').innerHTML = '')
}