Mapbox加载天地图CGCS2000矢量瓦片地图
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.背景 最近在做天地图的项目,要基于MapBox添加CGCS2000矢量切片数据,但是 Mapbox 只支持web 墨卡托(3857)坐标系的数据。Github有专业用户修改了mapbox-gl的相关代码,支持CGCS2000的切片数据加载,并且修改…...
day3 STM32 GPIO口介绍
GPIO接口简介 通用输入输出接口GPIO是嵌入式系统、单片机开发过程最常用的接口,用户可以通过编程灵活的对接口进行控制,实现对电路板上LED、数码管、按键等常用设备控制驱动,也可以作为串口的数据收发管脚,或AD的接口等复用功能使…...
【ElasticSearch】ElasticSearch 内存设置原则
由于ES构建基于lucene,而lucene设计强大之处在于lucene能够很好的利用操作系统内存来缓存索引数据,以提供快速的查询性能。lucene的索引文件segements是存储在单文件中的,并且不可变,对于OS来说,能够很友好地将索引文件保持在cach…...
VUE+ElementUI的表单验证二选一必填项,并且满足条件后清除表单验证提示
上代码 <el-form-item label"出库单号" prop"ecode" ref"ecode" :rules"rules.ecode"><el-input v-model"queryParams.ecode" placeholder"出库单号和出库箱号至少填写一项" clearable style"width…...
NLP 时事和见解【2023】
一、说明 AI的新闻当然不是即时的,但作为趋势和苗头,我们不得不做出自己的决定。比如,一些软件的支持是否持续,哪些现成的软件将不再使用,等等。 图片来自中途 以下是NLPlanet为您选择的有关NLP和AI的每周文章&#x…...
Windows 环境下 Python3 离线安装 cryptography 失败
发布Flask Web项目时,报错缺少Cryptography,于是尝试重新安装该库,但本机没有网络,只支持手动离线安装,尝试了pip、setup.py两种方式安装,结果都报错。。最后使用将安装包拷贝至本机(在其他电脑上安装的sit…...
年轻代频繁GC ParNew导致http变慢
背景介绍 某日下午大约四点多,接到合作方消息,线上环境,我这边维护的某http服务突然大量超时(对方超时时间设置为300ms),我迅速到鹰眼平台开启采样,发现该服务平均QPS到了120左右,平…...
在.NET 6.0中自定义接口路由
在本文中,我们将讨论ASP.NET Core中的新路由。我们将了解什么是接口(endpoints)路由,它是如何工作的,它在哪里使用,以及如何创建自己的路由。 本文主题: 探索接口路由创建自定义接口创建更复杂的接口 名词定义&#…...
Kotlin读写分离CopyOnWriteArrayList
Kotlin读写分离CopyOnWriteArrayList 基于读写分离思想Copy-On-Write(COW)设计的线程安全ArrayList变体,读读共享、写写互斥、读写互斥、写读互斥。读时直接读,不用加锁同步,线程安全。写/删/修改数据时复制一个副本,在新的List副…...
centos自动同步北京时间
1、安装ntpdate服务 yum -y install ntpdate 2、加入自动任务计划 查找ntpdate的路径: which ntpdate 复制这个路径。 编辑自动任务计划并加入ntpdate: crontab -e # 每小时第30分钟同步AD域控时间 30 * * * * /usr/sbin/ntpdate -u 192.168.2.8 > …...
element-ui表格跨页多选实现
前言 在我们日常项目开发中,经常会有表格跨页多选的需求,接下来让我们用 el-table 示例一步步来实现这个需求。 动手开发 在线体验 https://codesandbox.io/s/priceless-mcclintock-4cp7x3?file/src/App.vue 常规版本 本部分只写了一些重点代码,心急的彦祖可以直接看 性…...
线性代数(三) 线性方程组向量空间
前言 如何利用行列式,矩阵求解线性方程组。 线性方程组的相关概念 用矩阵方程表示 齐次线性方程组:Ax0;非齐次线性方程组:Axb. 可以理解 齐次线性方程组 是特殊的 非齐次线性方程组 如何判断线性方程组的解 其中R(A)表示矩阵A的…...
学习跨度级交互以提取方面情感三元组
方面情感三元组 方面情感三元组(Aspect Sentiment Triplet)是一种在情感分析中使用的结构,它包含三个部分:方面目标(Aspect Target)、情感(Sentiment)和对应的观点词(Op…...
那些年的Xposed开发经验记录
把之前写的Xposed相关文章合并到一块,方便查阅 目录 多进程App的Hook问题XposedHelper中的静态变量demo的AndroidManifest.xml的测试核心代码结论限制handleLoadPackage被单个进程多次执行的问题 多dex Hook问题为应用增加权限利用Xposed删除权限参考 Hook框架集锦…...
android studio内存分析之Memory profiler的使用
目录 Android Studio中内存分析工具Memory profiler的使用1. 打开Memory Profiler2. 工具使用3. 内存选项说明4. 内存性能分析器概览5. 内存计算方式6. 查看内存分配7. 捕获java/kotlin方式查看内存分配8. 堆转储文件导入和导出 内存性能分析器中的泄漏检测 Android Studio中内…...
Qt下载慢/无法下载解决方式
文章目录 一. Qt在线安装下载二. 安装方式 一. Qt在线安装下载 官网下载:https://www.qt.io/download清华源下载:https://mirrors.tuna.tsinghua.edu.cn/qt/official_releases/online_installers/ 二. 安装方式 进入下载好的目录 在目录栏输入CMD&…...
【UE4 RTS】04-Camera Pan
前言 本篇实现了CameraPawn的旋转功能。 效果 步骤 1. 打开项目设置,添加两个操作映射 2. 打开玩家控制器“RTS_PlayerController_BP”,新建一个浮点型变量,命名为“PanSpeed” 在事件图表中添加如下节点 此时运行游戏可以发现当鼠标移动…...
出现raise NotImplementedError报错
在学习《动手学深度学习》时,实现下面代码时,报出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,…...
第一百二十二天学习记录:C++提高:STL-vector容器(上)(黑马教学视频)
vector基本概念 功能: vector数据结构和数组非常相似,也称为单端数组 vector与普通数组区别: 不同之处在于数组是静态空间,而vector可以动态扩展 动态扩展: 并不是在原空间之后续接新的空间,而是找更大的内…...
《Linux从练气到飞升》No.11 初识操作系统
🕺作者: 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 😘欢迎关注:👍点赞🙌收藏✍️留言 🏇码字不易,你的👍点赞🙌收藏❤️关注对我真的…...
CefFlashBrowser:拯救Flash游戏的终极方案,你的童年记忆有救了!
CefFlashBrowser:拯救Flash游戏的终极方案,你的童年记忆有救了! 【免费下载链接】CefFlashBrowser Flash浏览器 / Flash Browser 项目地址: https://gitcode.com/gh_mirrors/ce/CefFlashBrowser 还记得那些年我们一起在4399、7k7k网站…...
港口淡水罐远程监控物联网系统方案
随着全球贸易的持续增长,港口作为物流枢纽的重要性日益凸显。淡水作为港口运营的关键资源,不仅用于船舶补给、设备冷却,还涉及消防、生活用水等多个环节。当前,智慧码头理念与物联网技术深度融合,降本增效与数字化管理…...
全球真空电子方向研究单位集锦
摘要:微波电子管是雷达、卫星、导弹、核聚变的核心 "心脏",也是全球少数几个真正的 "卡脖子" 技术之一。全世界能独立研制高端微波管的国家不超过 5 个,顶尖研究机构更是屈指可数。本文承接《微波电真空器件硬核科普》系…...
死细胞去除磁珠如何优化细胞实验质量?
一、死细胞为何影响实验结果可靠性?在细胞培养及组织样本制备过程中,不可避免地存在一定比例的死细胞。这些死亡细胞不仅占用培养空间和营养资源,更重要的是会释放胞内内容物,包括蛋白酶、核酸酶及活性氧等,对活细胞造…...
8 年面试实战派导师陈晨:用精准教学,帮你叩开公职上岸之门
一、讲师简介:深耕面试教学 8年,全领域实战专家陈晨老师是初心教育核心面试讲师,拥有8年一线面试授课经验,精通国考、省考、事业单位、银行等全品类面试的研发与教学,是学员口中 “靠谱、专业、提分快” 的面试领路人。…...
一键清理Windows驱动垃圾:DriverStore Explorer帮你释放20GB磁盘空间
一键清理Windows驱动垃圾:DriverStore Explorer帮你释放20GB磁盘空间 【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 你的Windows电脑是否越用越慢?C盘空间总是莫…...
Rust 时间处理神器:chrono 从入门到实战
Rust 时间处理神器:chrono 从入门到实战 在 Rust 生态中,chrono 凭借其遵循 ISO 8601 标准、支持时区、类型安全且性能优异的特性,成为了 Rust 开发者的首选工具。本文将从入门到进阶,并结合实际开发场景带你全面掌握 chrono 的使…...
终极JSON字符串转义指南:深入解析jless中jsonstringunescaper模块的完整设计思路
终极JSON字符串转义指南:深入解析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…...
AI开发工具对决:LangChain/LangGraph深度编码 vs. Dify/Coze低代码平台,如何精准选择?
1. 当AI开发遇上选择困难症:从零理解两种技术路线 最近在技术社区看到不少开发者纠结:该用LangChain这类代码框架还是Dify这类低代码平台?这就像装修房子时面临的抉择——是买毛坯房自己设计(LangChain),还…...
【计算机网络八股】【欧弟求职】TCP相关
TCP 必须能讲清: 三次握手 / 四次挥手(状态流转)拥塞控制: slow startcongestion avoidancefast retransmit / fast recovery 滑动窗口重传机制(RTO / dup ack)TIME_WAIT 为什么存在高并发下 TIME_WAIT 堆积…...
