当前位置： 首页 > news >正文

Openlayers 叠加天地图-中国近海海洋等深面图层服务

news 2025/12/20 21:45:37

Openlayers 叠加天地图-中国近海海洋等深面图层服务

    • 核心代码
    • 完整代码：
    • 在线示例

偶然发现天地图有一个近海海洋图层，觉得不错，于是尝试叠加一下，花费了一些时间，叠加成功，这里分享一下。

本文包括核心代码、完整代码以及在线示例。

另外这里放上 Cesium 叠加示例

核心代码

主要是 Openlayers 叠加 WMTS 图层。


// 墨卡托投影
var projection = ol.proj.get("EPSG:3857");
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(18);
var matrixIds = new Array(18);
for (var z = 1; z < 19; ++z) {// generate resolutions and matrixIds arrays for this WMTSresolutions[z] = size / Math.pow(2, z);matrixIds[z] = z;
}// 天地图 key，只能在本域名下使用
const token = '2b7cbf61123cbe4e9ec6267a87e7442f';// 创建天地图图层
taindiLayer = new ol.layer.Tile({source: new ol.source.WMTS({url: "http://t0.tianditu.gov.cn/shuishen_w/wmts?tk=" + token,// 图层名称，必须layer: "shuishen", //注意每个图层这里不同// 墨卡托投影matrixSet: "w",format: "image/png",style: "default",projection: projection,tileGrid: new ol.tilegrid.WMTS({origin: ol.extent.getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds,}),wrapX: true,}),
});map.addLayer(taindiLayer);

在这里插入图片描述

完整代码：


<html lang="en">
<head><meta charset="utf-8"><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css"><style>/* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */.map {height: 400px;width: 100%;float: left;}</style><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><script src="http://openlayers.vip/examples/resources/ol.js"></script><script src="./tiandituLayers.js"></script><title>OpenLayers example</title>
</head>
<body>
<h2>tianditu ocean layer</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div>
<!--注意：本示例将 高德腾讯坐标设置为黑色；将百度坐标设置为黄色 -->
<!--注意：本示例将 高德腾讯坐标转为WGS84颜色设置为粉色；将百度坐标转为WS84颜色设置为绿色 -->
<script type="text/javascript">var map = new ol.Map({// 地图容器target: 'map',// 地图图层，比如底图、矢量图等layers: [getIMG_CLayer(),getIBO_CLayer(),getCIA_CLayer(),],// 地图视野view: new ol.View({projection: "EPSG:4326",// 定位center: [116, 39],// 缩放zoom: 4,maxZoom: 18,minZoom: 1,})});var taindiLayer;// 加载 WMTS 图层function WMTS() {// 墨卡托投影var projection = ol.proj.get("EPSG:3857");var projectionExtent = projection.getExtent();var size = ol.extent.getWidth(projectionExtent) / 256;var resolutions = new Array(18);var matrixIds = new Array(18);for (var z = 1; z < 19; ++z) {// generate resolutions and matrixIds arrays for this WMTSresolutions[z] = size / Math.pow(2, z);matrixIds[z] = z;}// 天地图 key，只能在本域名下使用const token = '2b7cbf61123cbe4e9ec6267a87e7442f';// 创建天地图图层taindiLayer = new ol.layer.Tile({source: new ol.source.WMTS({url: "http://t0.tianditu.gov.cn/shuishen_w/wmts?tk=" + token,// 图层名称，必须layer: "shuishen", //注意每个图层这里不同// 墨卡托投影matrixSet: "w",format: "image/png",style: "default",projection: projection,tileGrid: new ol.tilegrid.WMTS({origin: ol.extent.getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds,}),wrapX: true,}),});clearLayer();map.addLayer(taindiLayer);map.getView().fit([101.06147602421068, 2.63671875, 126.81342914921068, 46.23046875], map.getSize());}WMTS();function clearLayer() {taindiLayer && map.removeLayer(taindiLayer);}</script><button id="createCircle1" onclick="WMTS()">添加图层</button>
</body>
</html>

在线示例

Openlayers 在线示例：Openlayers 叠加天地图-中国近海海洋等深面图层服务

相关文章：

Openlayers 叠加天地图-中国近海海洋等深面图层服务

Openlayers 叠加天地图-中国近海海洋等深面图层服务 核心代码完整代码&#xff1a;在线示例 偶然发现天地图有一个近海海洋图层&#xff0c;觉得不错&#xff0c;于是尝试叠加一下&#xff0c;花费了一些时间&#xff0c;叠加成功&#xff0c;这里分享一下。 本文包括核心代码…...

编程日记 2023/9/1 6:35:28

uniapp移动端h5设计稿还原

思路 动态设置html的font-size大小 实现步骤 先创建一个public.css文件&#xff0c;设置初始的font-size大小 /* 注意这样写 只能使用css文件, scss 是不支持的, setProperty 只适用于原生css上 */ html {--gobal-font-size: 0.45px; } .gobal-font-size {font-size: var(--g…...

编程日记 2023/9/1 6:34:28

后端数据配置相对路径，前端添加网站根 URL （根路径）- js获取网站项目根路径- 获取根路径后的第一个斜杠前 / 的项目- - 判断url包含某字符串

1、js获取网站项目根路径 js获取项目根路径&#xff0c;如下&#xff1a; 原 http://localhost:8080/testproject/test.html 根路径&#xff1a;http://localhost:8080 function getRootPath(){//获取当前网址&#xff0c;// 如&#xff1a; http://localhost:8080/testpro…...

编程日记 2023/9/1 6:33:26

deepspeed多机多卡并行训练指南

文章目录 前言离线配置训练环境共享文件系统多台服务器之间配置互相免密登录pdsh多卡训练可能会碰到的问题注意总结 前言 我的配置&#xff1a; 7机14卡&#xff0c;每台服务器两张A800 问&#xff1a;为啥每台机只挂两张卡&#xff1f; 答&#xff1a;给我的就这样的&#…...

编程日记 2023/9/1 6:32:25

9.Redis-zset

zset zset 有序集合 -> 升序常用命令zaddzcardzcountzrangezrevrange -> reverse 逆序zrangebyscorezpopmaxzpopminbzpopmax / bzpopminzrankzrevrankzscorezremzremrangebyrankzremrangebyscorezincrby集合间操作zinter -> 交集zunion -> 并集zdiff -> 差集zin…...

编程日记 2023/9/1 6:31:24

云计算的三个主要服务模型：IaaS、PaaS 和 SaaS

文章目录 介绍基础设施即服务&#xff08;Infrastructure as a Service&#xff0c;IaaS&#xff09;平台即服务&#xff08;Platform as a Service&#xff0c;PaaS&#xff09;软件即服务&#xff08;Software as a Service&#xff0c;SaaS&#xff09; 区别基础设施即服务&…...

编程日记 2023/9/1 6:30:22

spring ioc，DI，AOP概述

Spring是一个轻量级的Java开发框架。其中&#xff0c;IoC、DI和AOP是Spring框架的核心概念。 IoC&#xff08;Inversion of Control&#xff0c;控制反转&#xff09;&#xff1a;IoC是一种设计模式&#xff0c;是指将对象的创建、管理和控制权交给IoC容器&#xff0c;由IoC容器…...

编程日记 2023/9/1 6:29:20

meethigher-Apache Poi 实现Excel多级联动下拉框

由于最近做的功能&#xff0c;需要将接口返回的数据列表&#xff0c;输出到excel中&#xff0c;以供后续导入&#xff0c;且网上现有的封装&#xff0c;使用起来都较为麻烦&#xff0c;故参考已有做法封装了工具类。 使用apache poi实现excel联动下拉框思路 创建隐藏单元格&a…...

编程日记 2023/9/1 6:28:19

基于食肉植物算法优化的BP神经网络（预测应用） - 附代码

基于食肉植物算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于食肉植物算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.食肉植物优化BP神经网络2.1 BP神经网络参数设置2.2 食肉植物算法应用 4.测试结果&#xff1a;5…...

编程日记 2023/9/1 6:27:18

FFDNet-pytorch版本代码训练教程

一、FFDNet-pytorch版本代码下载 （1）FFDNet-pytorch下载 https://download.csdn.net/download/qq_41104871/88233742 （2）FFDNet-pytorch版本代码运行环境配置 https://blog.csdn.net/qq_41104871/article/details/132497008 二、FFDNet-pytorch版本代码训练教程 （1）按…...

编程日记 2023/9/1 6:26:17

C语言练习7（巩固提升）

C语言练习7 编程题 前言 “芳林新叶催陈叶&#xff0c;流水前波让后波。”改革开放40年来&#xff0c;我们以敢闯敢干的勇气和自我革新的担当&#xff0c;闯出了一条新路、好路&#xff0c;实现了从“赶上时代”到“引领时代”的伟大跨越。今天&#xff0c;我们要不忘初心、牢记…...

编程日记 2023/9/1 6:25:16

golangORM框架Gorm

ORM框架Gorm gorm简介gorm声明模型gorm连接到数据库gorm创建记录gorm查询记录gorm高级查询gorm更新gorm删除SQL 构建器gorm Belongs To关系gorm Has One关系gorm Has Many关系gorm Many To Many关系gorm 实体关联gorm 会话gorm事务Gorm总结...

编程日记 2023/9/1 6:24:15

Python项目实战之《飞机大战游戏》

目录 一、Pygame库包简介 二、Pygame安装 三、项目开发思路 3.1前言 3.2飞机大战开发步骤 一、Pygame库包简介 Pygame是一个基于python的游戏开发库&#xff0c;它提供一系列的工具和接口&#xff0c;使开发人员能够轻松的创建各种类型的游戏&#xff0c;包括2D游戏和简单…...

编程日记 2023/9/1 6:23:14

Mysql数据库（2）—事务和锁

一、事务 数据库事务的特性&#xff1f; 数据库事务的四大特性是ACID。 原子性&#xff1a;就是所有操作要么全不做&#xff0c;要不全做。通过undo日志来实现。一致性&#xff1a;就是在并发情况下数据库由一个状态转移到另一个状态的数据要一致。通过事务的隔离级别来实现…...

编程日记 2023/9/1 6:22:12

Shell - 加固系统配置

文章目录 #! /bin/bash # Function:对账户的密码的一些加固 read -p "设置密码最多可多少天不修改&#xff1a;" A read -p "设置密码修改之间最小的天数&#xff1a;" B read -p "设置密码最短的长度&#xff1a;" C read -p "设置密码失效…...

编程日记 2023/9/1 6:21:10

【linux】记录archlinux软件包更新后lualatex无法编译的一种解决方案

1 环境参数 操作系统&#xff1a;archlinux Kernel: 6.4.11-arch2-1 包管理器&#xff1a;pacman 日期&#xff1a;2023.08.25 2 问题描述 今天一如往常地进行软件包更新&#xff1a; sudo pacman -Syu随后&#xff0c;在使用luelatex对我的论文&#xff08;latex&#xff09…...

编程日记 2023/9/1 6:20:09

设计模式中的关系

文章目录 一、依赖概念 二&#xff0c;关联概念 三、聚合概念 四、组合概念 五、实现概念 六、继承概念 图总结整体总结 一、依赖 概念 依赖是一种临时使用关系&#xff0c;代码层体现为作为参数。 具体体现&#xff1a;依赖者调用被依赖者的局部变量、参数、静态方法&#…...

编程日记 2023/9/1 6:19:08

C语言之数组题

目录 1.使用函数实现数组操作 2.冒泡排序 3.三子棋 4.【一维数组】交换数组 5.扫雷 6.概念辨析tips 我又来了&#xff0c;今天是数组题&#xff0c;本人还在补军训真的热&#xff01;&#x1f197; 1.使用函数实现数组操作 2.冒泡排序 3.三子棋 4.【一维数组】交换数组 …...

编程日记 2023/9/1 6:18:07

DbContext是Entity Framework中的一个核心类

Entity Framework&#xff08;简称EF&#xff09;是ADO.NET的一部分&#xff0c;是一个开源的、通用的对象关系映射&#xff08;ORM&#xff09;框架&#xff0c;它使得开发人员可以用面向对象的方式来操作关系数据库。 以下是Entity Framework的一些主要特性&#xff1a; 它…...

编程日记 2023/9/1 6:17:05

BTC价格预测：灰度突如其来的胜利是否会打破“九月魔咒”？

加密市场即将进入第三季度交易的最后阶段&#xff0c;由于9月份被视为是比特币的下跌时期&#xff0c;大多数投资者都预测加密货币之王将会进一步下跌。然而&#xff0c;事情却发生了逆转&#xff0c;灰度突如其来的胜利是否会打破“九月魔咒”&#xff1f; 受该事件影响&#…...

编程日记 2023/9/1 6:16:03

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/12/20 13:10:01

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/12/20 0:21:45

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/12/13 22:32:24

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/12/11 23:45:42

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/12/12 16:39:33

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/12/17 16:30:13

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/12/10 7:43:31

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/10/1 2:59:48

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/12/10 19:18:49