高德WMTS图层 调用天地图瓦片地图

2023-11-12

项目需要展示海外地点标注(且卫星图与标准矢量地图切换),但是高德地图不显示海外地点数据,查了高德的海外LBS服务,是收费的,而且还处于试运行状态,遇到问题还得提工单,比较麻烦。

后来查了查资料,发现天地图可以满足需求,而且天地图提供给WMTS服务,高德有个TileLayer类可以直接调用WTMS服务。所以便采用使用高德进行点标注等功能,调用天地图的图层方案,完成项目。

实现

// 天地图的访问key
const key = "yourkey";
// 初始化layer
this.staelliteLayers = [
  new AMap.TileLayer({
    // 天地图矢量地图
    getTileUrl: `http://t0.tianditu.gov.cn/DataServer?T=img_w&tk=${key}&x=[x]&y=[y]&l=[z]`,
    zIndex: 1,
  }),
  new AMap.TileLayer({
    // 天地图矢量图标记
    getTileUrl: `http://t0.tianditu.gov.cn/DataServer?T=cia_w&tk=${key}&x=[x]&y=[y]&l=[z]`,
    zIndex: 2,
  }),
map.setLayers(this.staelliteLayers);

注:按照天地图官网提供的服务地址,不知道怎么回事会报错,请求失败,最后还是在一边博客上看到了上面的地址写法,才成功。有时候碰到这种问题就很奇怪,无从下手,目前还是没有搞明白官方提供的请求地址应该怎么用,有小伙伴知道在评论里给俺涨涨姿势
getTileUrl地址按上面的写法是完全可以的,大家需要注意T = cia_w这个参数,需要什么类型的图层,这个就传什么类型的图层参数,如下图竖框里标出来的,从里面选。
在这里插入图片描述

坐标系不一致导致描点偏移问题

(1)天地图:CGCS2000,2000国家大地坐标系;我们其实很多时候直接用WGS84的坐标来代替CGCS2000坐标。因为CGCS2000的定义与WGS84实质一样。采用的参考椭球非常接近。扁率差异引起椭球面上的纬度和高度变化最大达0.1mm。当前测量精度范围内,可以忽略这点差异。可以说两者相容至cm级水平,但若一点的坐标精度达不到cm水平,则不认为CGCS2000和WGS84的坐标是相容的。

(2)百度地图:bd09II坐标。首先了解一下火星坐标,它是在国际标准坐标WGS-84上进行的一次加密,由于国内的电子地图都要至少使用火星坐标进行一次加密,百度直接就任性一些,直接自己又研究了一套加密算法,来了个二次加密,这就是我们所熟知的百度坐标(BD-09)。

(3)高德地图:gcj02坐标,也称为火星坐标。火星坐标是国家测绘局为了国家安全在原始坐标的基础上进行偏移得到的坐标,基本国内的电子地图、导航设备都是采用的这一坐标系或在这一坐标的基础上进行二次加密得到的。

因为高德与天地图使用的坐标系是不一样的,所以在添加点标记之前,要把数据里的高德坐标系下的经纬度转换为天地图坐标系下的。

this.projectsData.forEach((item) => {
  // 高德火星地图坐标系转为天地图坐标系
   let WGS = transformGCJ2WGS(item.latitude, item.longitude);
   item.position = [WGS.lon, WGS.lat];
   this.markers.push({
     position: item.position,
     name: item.name,
     label: this.getCurLabel(item.name),
     events: {
       click: () => {
         // this.openInfoWindow(e.target.Ce.position, item);
         this.openInfoWindow(item.position, item);
       },
     },
   });
 });

具体的转换算法为:

// utils/util.js
var PI = 3.14159265358979324;
/**
 * 高德火星地图坐标系转为天地图坐标系
 * @param {*} gcjLat 火星坐标经度
 * @param {*} gcjLon 火星坐标维度
 * @returns 
 */
export function transformGCJ2WGS(gcjLat, gcjLon) {
    let d = delta(gcjLat, gcjLon)
    return {
      'lat': gcjLat - d.lat,
      'lon': gcjLon - d.lon
    }
  }

  function delta(lat, lon) {
    let a = 6378245.0 //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
    let ee = 0.00669342162296594323 //  ee: 椭球的偏心率。
    let dLat = transformLat(lon - 105.0, lat - 35.0)
    let dLon = transformLon(lon - 105.0, lat - 35.0)
    let radLat = lat / 180.0 * PI
    let magic = Math.sin(radLat)
    magic = 1 - ee * magic * magic
    let sqrtMagic = Math.sqrt(magic)
    dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * PI)
    dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * PI)
    return {
      'lat': dLat,
      'lon': dLon
    }
  }
  function transformLat(x, y) {
    let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
    ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
    ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0
    ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0
    return ret
  }
  function transformLon(x, y) {
    let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
    ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
    ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0
    ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0
    return ret
  }

其它类型转换参考:常用的几种在线地图(天地图、百度地图、高德地图)坐标系之间的转换算法

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

高德WMTS图层 调用天地图瓦片地图 的相关文章

  • CXF开发WebService客户端

    开发必备 1 apache cxf 2 2 6 2 spring ws 1 5 8 3 eclipse jee galileo SR1 win32 开发步骤 一 新建一个普通的java工程 名字叫WebService CXF Client

随机推荐

  • Leetcode刷题48-575. 分糖果(C++详细解法!!!)

    题目来源 链接 https leetcode cn com problems distribute candies 575 分糖果 1 问题描述 2 我的解决方案 3 大神们的解决方案 4 我的收获 4 1 set的用法 4 2 map容器
  • ubuntu 安装Android SDK,如何在Ubuntu12.1下安装Android SDK

    如何在Ubuntu12 1下安装Android SDK 在Ubuntu下 安装 Android SDK 有两种方式 1 为使用ADT Eclipse安装 这也是官方推荐的方式 适合使用Eclipse开发的开发者 2 直接安装Android
  • 跨行业数据挖掘过程标准及其在 Python 中的应用

    跨行业数据挖掘过程标准及其在 Python 中的应用 数据挖掘是一种从大量数据中提取有用信息的过程 它在各个行业中都有广泛的应用 为了规范数据挖掘过程 CRISP DM Cross Industry Standard Process for
  • PPP与PPPoe

    PPP 二层最常用的封装技术 PPP共定义了三个协议组件 分别是数据封装方式 链路控制协议 Link Control Protocol LCP 和网络层控制协议 Network Control Protocol NCP 数据封装方式定义了如
  • 详谈概率图模型(PGM)

    概率图 引言 1 概述 2 基本问题 2 1 模型表示 2 1 1 有向图模型 2 1 2 无向图模型 2 1 3 有向图和无向图之间的转化 2 2 学习问题 2 3 推断 引言 quad quad 机器学习是根据一些已观察到的证据 如训练
  • VMware vCenter 7.0U2A升级攻略VMware vCenter 7.0U3C攻略

    一 概述 写这篇文章是因为VMware 7 0U2A之前版本有个bug 用户可根据漏洞 CVE 2021 22005 进行提权443端口 直接访问vCenter 443管理界面 然后想着将VMware 7 0U2A升级至最新版VMware
  • 应急响应思路

    应急响应过程 目的 分析攻击时间 攻击操作 攻击结果 安全修复等并给出合理的解决方案 保护阶段 直接断网 保护现场 看是否能够恢复数据 分析阶段 对入侵过程进行分析 常见方法为指纹库搜索 日志时间分析 后门追查分析 漏洞检查分析等 复现阶段
  • AttributeError: module ‘seaborn‘ has no attribute ‘scatterplot‘

    我找到很多博客 说这是因为seaborn的版本不对 我就去升级seaborn了 发现仍然是报这个错误 经过排查 pip list发现里面有个叫做sns的包 版本是0 1 我是import seaborn as sns了 并不清楚这个sns包
  • 虚机固定IP---小黑日常超细教程

    前言 虚机重启后的ip段不变但是最后的数字有时候是随机的 如需要固定环境的ip则需要更改虚机的配置文件 目录 一 更改配置文件 二 查看自己虚机的网关 三 配置网络工作 四 配置公告的DNS服务 五 关闭防火墙 重启网络服务 一 更改配置文
  • 使用memtier_benchmark工具对Redis进行测试记录-20230330

    文章目录 一 概述 一 安装相关软件 1 安装redis server 2 安装memtier benchmark软件 3 redis的一些基本操作 二 测试步骤 1 准备redis数据 2 启动进程进行测试 3 参数含义解释 三 创建多个
  • 【华为OD机试 2023 B卷

    在线OJ 已购买本专栏用户 请私信博主开通账号 在线刷题 运行出现 Runtime Error 0Aborted 请忽略 华为OD统一考试A卷 B卷 新题库说明 2023年5月份 华为官方已经将的 2022 0223Q 1 2 3 4 统一
  • 深度相机Kinect2.0三维点云拼接实验(一)

    文章目录 摘要 Kinect2 0简介 工作原理 RGB相机成像原理 深度相机成像原理 总结 参考文献 摘要 Kinect2 0是微软推出的一款RGB D相机 它即支持普通相机的拍摄 也支持脉冲测量深度信息 本系列文章基于该传感器给出基本的
  • OpenCV-Python 通过边缘检测识别物体并批量提取(大米识别为例)——minAreaRect批量生成物体的最小外接矩形(旋转矩形)并批量裁剪

    OpenCV版本 4 0 0 21 已兼容4 5 2 X版本 算法实现思路如下 对图像做降噪滤波处理 提取边缘 检测轮廓 检测轮廓最小外接矩形 旋转矩形 旋转图像 裁剪 代码如下 import cv2 import numpy as np
  • SpringBoot2搭建基础架构——开源软件诞生4

    技术框架篇 第4篇 用日志记录 开源软件 的诞生 赤龙ERP开源地址 点亮星标 感谢支持 加微信与开发者交流 kzca2000 码云 https gitee com redragon redragon erp GitHub https gi
  • 圆形水波进度球

    使用React实现 效果 github地址 https github com xiaobaiha react wave progress git 使用方式 npm install react wave progress 复制代码
  • MXNET下载训练好的模型

    MXNet中有很多训练好的模型 直接在网页上下载一直报错 后来在https github com apache incubator mxnet blob master example image classification common
  • 2022年都说软件测试不香了?在职3年月薪16k我满意了,你们觉得前景怎么样?

    首先说出的我的观点 谁说现在的软件测试不香 就以我本人为例 毕业三年 现在月薪16000 觉得还行了 我还记得毕业第一年 工资5000 第二年8000 今年刚好第三年 五月份刚换的工作 16000 刚好翻倍了 你要说软件测试不香 那是整个互
  • 通过聚类中心进行0-9数字语音识别(matlab)——基于K-means聚类

    项目已免费开源 https gitee com zhengzsj automatic speech recognition ars tree master 1 技术路线 2 实现过程 层次聚类和K means聚类的样本是0 9语音每个数字各
  • 中国蚁剑下载AntSword

    我们下载的时候需要下载两个部分 一个是项目核心源码 antSword 另一个是加载器 加载器则分为三个版本 Mac Windows Linux 器GitHub AntSwordProject AntSword Loader AntSword
  • 高德WMTS图层 调用天地图瓦片地图

    项目需要展示海外地点标注 且卫星图与标准矢量地图切换 但是高德地图不显示海外地点数据 查了高德的海外LBS服务 是收费的 而且还处于试运行状态 遇到问题还得提工单 比较麻烦 后来查了查资料 发现天地图可以满足需求 而且天地图提供给WMTS服