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

Mapbox加载天地图CGCS2000矢量瓦片地图

news 2026/4/8 23:14:44

1.背景

最近在做天地图的项目，要基于MapBox添加CGCS2000矢量切片数据，但是 Mapbox 只支持web 墨卡托（3857）坐标系的数据。Github有专业用户修改了mapbox-gl的相关代码，支持CGCS2000的切片数据加载，并且修改了相关的mapbox-gl的配套代码，详情请见github网址。https://github.com/cgcs2000

2.将MapBox部署到本地

npm i @cgcs2000/mapbox-gl

<!DOCTYPE html>
<html><head><meta charset='utf-8' /><title>Mapbox加载天地图CGCS2000矢量瓦片地图服务</title><meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /><style>body {margin: 0;padding: 0;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}</style>
</head><body><div id='map'></div>
</body>
<script type="module">
import '@cgcs2000/mapbox-gl/dist/mapbox-gl.css'
import mapboxgl from '@cgcs2000/mapbox-gl';mapboxgl.accessToken = 'YourToken';
//添加天地图
var mapStyle = {"version": 8,"name": "Map","sources": {"world-vec": {"type": "raster","tiles": ["http://t0.tianditu.gov.cn/vec_c/wmts?tk=......"],"scheme": "xyz","maxzoom": 9,"tileSize": 256},"layers": [{"id": "world-vec","source": "world-vec","type": "raster","layout": {"visibility": "visible"}},],"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf","transition": {"duration": 300,"delay": 0}
}var map = new mapboxgl.Map({container: 'map',zoom: 7,center: [118.8, 36.3],style: mapStyle,
});/**CGCS2000投影坐标系（4490）**/
map.on('load', function loaded() {//添加geoserver矢量切片map.addSource('custom-go-vector-tile-source', {type: 'vector',scheme: 'tms',tiles: ['http://localhost:8080/geoserver/gwc/service/tms/1.0.0/MyWork%3Acounty@EPSG%3A4490@pbf/{z}/{x}/{y}.pbf'], //GeoServer发布的矢量切片地图zoomOffset: -1});//配置矢量切片图层样式map.addLayer({"id": "custom-go-vector-tile-layer","type": "circle",       // 符号化样式 [fill,line,symbol,circle,heatmap]"source": "custom-go-vector-tile-source","source-layer": "county",  //添加矢量图层名"minzoom": 5,"maxzoom": 13,paint: {'circle-radius': 1,'circle-color': "#000000",'circle-opacity': 0.8}});});</script>
</html>

3.GeoServer发布CGCS2000的矢量瓦片服务

1.安装过程自行百度，Tomcat下面部署Geoserver可能会遇到跨域访问问题。将geoserver部署到tomcat之后，打开tomcat下webapps\geoserver\WEB-INF目录下的web.xml文件，添加一下内容，重启tomcat即可。

    <filter><filter-name>CORS</filter-name> <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class><init-param> <param-name>cors.tagRequests</param-name> <param-value>true</param-value> </init-param></filter><filter-mapping> <filter-name>CORS</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

2.发布矢量瓦片服务
GeoServer默认只有84的坐标系，我们需要自己定义CGCS2000的坐标系。
首先，点击Tile Caching下的Gridsets，创建一个新的坐标系
在这里插入图片描述
在框选的地方搜索4490，选择为CGCS2000坐标系，其他数据按图填写（279,541,132.0143589），级别自定义。
在这里插入图片描述
设置完成后在矢量切片设置页，将新设置坐标系添加进来
在这里插入图片描述
在TMS页就可以看到服务地址
在这里插入图片描述

4.效果展示

在这里插入图片描述

相关文章：

Mapbox加载天地图CGCS2000矢量瓦片地图

1.背景 最近在做天地图的项目&#xff0c;要基于MapBox添加CGCS2000矢量切片数据&#xff0c;但是 Mapbox 只支持web 墨卡托&#xff08;3857&#xff09;坐标系的数据。Github有专业用户修改了mapbox-gl的相关代码&#xff0c;支持CGCS2000的切片数据加载&#xff0c;并且修改…...

编程日记 2023/8/11 12:30:13

day3 STM32 GPIO口介绍

GPIO接口简介 通用输入输出接口GPIO是嵌入式系统、单片机开发过程最常用的接口&#xff0c;用户可以通过编程灵活的对接口进行控制&#xff0c;实现对电路板上LED、数码管、按键等常用设备控制驱动&#xff0c;也可以作为串口的数据收发管脚&#xff0c;或AD的接口等复用功能使…...

编程日记 2023/8/11 12:29:12

【ElasticSearch】ElasticSearch 内存设置原则

由于ES构建基于lucene,而lucene设计强大之处在于lucene能够很好的利用操作系统内存来缓存索引数据&#xff0c;以提供快速的查询性能。lucene的索引文件segements是存储在单文件中的&#xff0c;并且不可变&#xff0c;对于OS来说&#xff0c;能够很友好地将索引文件保持在cach…...

编程日记 2023/8/11 12:28:10

VUE+ElementUI的表单验证二选一必填项，并且满足条件后清除表单验证提示

上代码 <el-form-item label"出库单号" prop"ecode" ref"ecode" :rules"rules.ecode"><el-input v-model"queryParams.ecode" placeholder"出库单号和出库箱号至少填写一项" clearable style"width…...

编程日记 2023/8/11 12:27:09

NLP 时事和见解【2023】

一、说明 AI的新闻当然不是即时的&#xff0c;但作为趋势和苗头&#xff0c;我们不得不做出自己的决定。比如&#xff0c;一些软件的支持是否持续&#xff0c;哪些现成的软件将不再使用&#xff0c;等等。 图片来自中途 以下是NLPlanet为您选择的有关NLP和AI的每周文章&#x…...

编程日记 2023/8/11 12:26:08

Windows 环境下 Python3 离线安装 cryptography 失败

发布Flask Web项目时&#xff0c;报错缺少Cryptography&#xff0c;于是尝试重新安装该库&#xff0c;但本机没有网络&#xff0c;只支持手动离线安装&#xff0c;尝试了pip、setup.py两种方式安装&#xff0c;结果都报错。。最后使用将安装包拷贝至本机(在其他电脑上安装的sit…...

编程日记 2023/8/11 12:25:07

年轻代频繁GC ParNew导致http变慢

背景介绍 某日下午大约四点多&#xff0c;接到合作方消息&#xff0c;线上环境&#xff0c;我这边维护的某http服务突然大量超时&#xff08;对方超时时间设置为300ms&#xff09;&#xff0c;我迅速到鹰眼平台开启采样&#xff0c;发现该服务平均QPS到了120左右&#xff0c;平…...

编程日记 2023/8/11 12:24:05

在.NET 6.0中自定义接口路由

在本文中&#xff0c;我们将讨论ASP.NET Core中的新路由。我们将了解什么是接口(endpoints)路由&#xff0c;它是如何工作的&#xff0c;它在哪里使用&#xff0c;以及如何创建自己的路由。 本文主题&#xff1a; 探索接口路由创建自定义接口创建更复杂的接口 名词定义&#…...

编程日记 2023/8/11 12:23:04

Kotlin读写分离CopyOnWriteArrayList

Kotlin读写分离CopyOnWriteArrayList 基于读写分离思想Copy-On-Write(COW)设计的线程安全ArrayList变体&#xff0c;读读共享、写写互斥、读写互斥、写读互斥。读时直接读&#xff0c;不用加锁同步&#xff0c;线程安全。写/删/修改数据时复制一个副本&#xff0c;在新的List副…...

编程日记 2023/8/11 12:22:03

centos自动同步北京时间

1、安装ntpdate服务 yum -y install ntpdate 2、加入自动任务计划 查找ntpdate的路径&#xff1a; which ntpdate 复制这个路径。 编辑自动任务计划并加入ntpdate&#xff1a; crontab -e # 每小时第30分钟同步AD域控时间 30 * * * * /usr/sbin/ntpdate -u 192.168.2.8 > …...

编程日记 2023/8/11 12:21:01

element-ui表格跨页多选实现

前言 在我们日常项目开发中,经常会有表格跨页多选的需求,接下来让我们用 el-table 示例一步步来实现这个需求。 动手开发 在线体验 https://codesandbox.io/s/priceless-mcclintock-4cp7x3?file/src/App.vue 常规版本 本部分只写了一些重点代码,心急的彦祖可以直接看 性…...

编程日记 2023/8/11 12:20:00

线性代数(三) 线性方程组向量空间

前言 如何利用行列式&#xff0c;矩阵求解线性方程组。 线性方程组的相关概念 用矩阵方程表示 齐次线性方程组&#xff1a;Ax0&#xff1b;非齐次线性方程组&#xff1a;Axb. 可以理解 齐次线性方程组 是特殊的 非齐次线性方程组 如何判断线性方程组的解 其中R(A)表示矩阵A的…...

编程日记 2023/8/11 12:18:59

学习跨度级交互以提取方面情感三元组

方面情感三元组 方面情感三元组&#xff08;Aspect Sentiment Triplet&#xff09;是一种在情感分析中使用的结构&#xff0c;它包含三个部分&#xff1a;方面目标&#xff08;Aspect Target&#xff09;、情感&#xff08;Sentiment&#xff09;和对应的观点词&#xff08;Op…...

编程日记 2023/8/11 12:17:58

那些年的Xposed开发经验记录

把之前写的Xposed相关文章合并到一块&#xff0c;方便查阅 目录 多进程App的Hook问题XposedHelper中的静态变量demo的AndroidManifest.xml的测试核心代码结论限制handleLoadPackage被单个进程多次执行的问题 多dex Hook问题为应用增加权限利用Xposed删除权限参考 Hook框架集锦…...

编程日记 2023/8/11 12:16:57

android studio内存分析之Memory profiler的使用

目录 Android Studio中内存分析工具Memory profiler的使用1. 打开Memory Profiler2. 工具使用3. 内存选项说明4. 内存性能分析器概览5. 内存计算方式6. 查看内存分配7. 捕获java/kotlin方式查看内存分配8. 堆转储文件导入和导出 内存性能分析器中的泄漏检测 Android Studio中内…...

编程日记 2023/8/11 12:15:55

Qt下载慢/无法下载解决方式

文章目录 一. Qt在线安装下载二. 安装方式 一. Qt在线安装下载 官网下载&#xff1a;https://www.qt.io/download清华源下载&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/qt/official_releases/online_installers/ 二. 安装方式 进入下载好的目录 在目录栏输入CMD&…...

编程日记 2023/8/11 12:14:55

【UE4 RTS】04-Camera Pan

前言 本篇实现了CameraPawn的旋转功能。 效果 步骤 1. 打开项目设置&#xff0c;添加两个操作映射 2. 打开玩家控制器“RTS_PlayerController_BP”&#xff0c;新建一个浮点型变量&#xff0c;命名为“PanSpeed” 在事件图表中添加如下节点 此时运行游戏可以发现当鼠标移动…...

编程日记 2023/8/11 12:13:53

出现raise NotImplementedError报错

在学习《动手学深度学习》时&#xff0c;实现下面代码时&#xff0c;报出raise NotImplementedError错误。 import collections import torch from d2l import torch as d2l import math from torch import nnclass Seq2SeqEncoder(d2l.Encoder):def __init__(self,vocab_size,…...

编程日记 2023/8/11 12:12:52

第一百二十二天学习记录：C++提高：STL-vector容器（上）（黑马教学视频）

vector基本概念 功能&#xff1a; vector数据结构和数组非常相似&#xff0c;也称为单端数组 vector与普通数组区别&#xff1a; 不同之处在于数组是静态空间&#xff0c;而vector可以动态扩展 动态扩展&#xff1a; 并不是在原空间之后续接新的空间&#xff0c;而是找更大的内…...

编程日记 2023/8/11 12:11:51

《Linux从练气到飞升》No.11 初识操作系统

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…...

编程日记 2023/8/11 12:10:49

CefFlashBrowser：拯救Flash游戏的终极方案，你的童年记忆有救了！

CefFlashBrowser&#xff1a;拯救Flash游戏的终极方案&#xff0c;你的童年记忆有救了&#xff01; 【免费下载链接】CefFlashBrowser Flash浏览器 / Flash Browser 项目地址: https://gitcode.com/gh_mirrors/ce/CefFlashBrowser 还记得那些年我们一起在4399、7k7k网站…...

编程新知 2026/4/8 23:11:18

港口淡水罐远程监控物联网系统方案

随着全球贸易的持续增长&#xff0c;港口作为物流枢纽的重要性日益凸显。淡水作为港口运营的关键资源&#xff0c;不仅用于船舶补给、设备冷却&#xff0c;还涉及消防、生活用水等多个环节。当前&#xff0c;智慧码头理念与物联网技术深度融合&#xff0c;降本增效与数字化管理…...

编程新知 2026/4/8 23:07:16

全球真空电子方向研究单位集锦

摘要&#xff1a;微波电子管是雷达、卫星、导弹、核聚变的核心 "心脏"&#xff0c;也是全球少数几个真正的 "卡脖子" 技术之一。全世界能独立研制高端微波管的国家不超过 5 个&#xff0c;顶尖研究机构更是屈指可数。本文承接《微波电真空器件硬核科普》系…...

编程新知 2026/4/8 22:24:16

死细胞去除磁珠如何优化细胞实验质量？

一、死细胞为何影响实验结果可靠性&#xff1f;在细胞培养及组织样本制备过程中&#xff0c;不可避免地存在一定比例的死细胞。这些死亡细胞不仅占用培养空间和营养资源&#xff0c;更重要的是会释放胞内内容物&#xff0c;包括蛋白酶、核酸酶及活性氧等&#xff0c;对活细胞造…...

编程新知 2026/4/8 22:16:03

8 年面试实战派导师陈晨：用精准教学，帮你叩开公职上岸之门

一、讲师简介&#xff1a;深耕面试教学 8年&#xff0c;全领域实战专家陈晨老师是初心教育核心面试讲师&#xff0c;拥有8年一线面试授课经验&#xff0c;精通国考、省考、事业单位、银行等全品类面试的研发与教学&#xff0c;是学员口中 “靠谱、专业、提分快” 的面试领路人。…...

编程新知 2026/4/8 21:59:45

一键清理Windows驱动垃圾：DriverStore Explorer帮你释放20GB磁盘空间

一键清理Windows驱动垃圾&#xff1a;DriverStore Explorer帮你释放20GB磁盘空间 【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 你的Windows电脑是否越用越慢&#xff1f;C盘空间总是莫…...

编程新知 2026/4/8 21:49:33

Rust 时间处理神器：chrono 从入门到实战

Rust 时间处理神器&#xff1a;chrono 从入门到实战 在 Rust 生态中&#xff0c;chrono 凭借其遵循 ISO 8601 标准、支持时区、类型安全且性能优异的特性&#xff0c;成为了 Rust 开发者的首选工具。本文将从入门到进阶&#xff0c;并结合实际开发场景带你全面掌握 chrono 的使…...

编程新知 2026/4/8 20:46:58

终极JSON字符串转义指南：深入解析jless中jsonstringunescaper模块的完整设计思路

终极JSON字符串转义指南&#xff1a;深入解析jless中jsonstringunescaper模块的完整设计思路 【免费下载链接】jless jless is a command-line JSON viewer designed for reading, exploring, and searching through JSON data. 项目地址: https://gitcode.com/gh_mirrors/jl…...

编程新知 2026/4/8 20:16:34

AI开发工具对决：LangChain/LangGraph深度编码 vs. Dify/Coze低代码平台，如何精准选择？

1. 当AI开发遇上选择困难症&#xff1a;从零理解两种技术路线 最近在技术社区看到不少开发者纠结&#xff1a;该用LangChain这类代码框架还是Dify这类低代码平台&#xff1f;这就像装修房子时面临的抉择——是买毛坯房自己设计&#xff08;LangChain&#xff09;&#xff0c;还…...

编程新知 2026/4/8 19:31:31

【计算机网络八股】【欧弟求职】TCP相关

TCP 必须能讲清&#xff1a; 三次握手 / 四次挥手&#xff08;状态流转&#xff09;拥塞控制&#xff1a; slow startcongestion avoidancefast retransmit / fast recovery 滑动窗口重传机制&#xff08;RTO / dup ack&#xff09;TIME_WAIT 为什么存在高并发下 TIME_WAIT 堆积…...

编程新知 2026/4/8 18:18:37