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

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

day3 STM32 GPIO口介绍

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

【ElasticSearch】ElasticSearch 内存设置原则

由于ES构建基于lucene,而lucene设计强大之处在于lucene能够很好的利用操作系统内存来缓存索引数据&#xff0c;以提供快速的查询性能。lucene的索引文件segements是存储在单文件中的&#xff0c;并且不可变&#xff0c;对于OS来说&#xff0c;能够很友好地将索引文件保持在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的新闻当然不是即时的&#xff0c;但作为趋势和苗头&#xff0c;我们不得不做出自己的决定。比如&#xff0c;一些软件的支持是否持续&#xff0c;哪些现成的软件将不再使用&#xff0c;等等。 图片来自中途 以下是NLPlanet为您选择的有关NLP和AI的每周文章&#x…...

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

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

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

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

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

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

Kotlin读写分离CopyOnWriteArrayList

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

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 > …...

element-ui表格跨页多选实现

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

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

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

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

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

那些年的Xposed开发经验记录

把之前写的Xposed相关文章合并到一块&#xff0c;方便查阅 目录 多进程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在线安装下载 官网下载&#xff1a;https://www.qt.io/download清华源下载&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/qt/official_releases/online_installers/ 二. 安装方式 进入下载好的目录 在目录栏输入CMD&…...

【UE4 RTS】04-Camera Pan

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

出现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,…...

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

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

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

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

Python数据分析实战:用np.random.normal生成正态分布数据的5个实用场景

Python数据分析实战&#xff1a;用np.random.normal生成正态分布数据的5个实用场景 正态分布作为统计学中最基础也最重要的概率分布之一&#xff0c;在数据分析、机器学习、金融建模等领域无处不在。许多自然现象和人类行为都呈现出正态分布的特征&#xff0c;比如身高、考试成…...

55、RAII技术---------多线程、竟态条件和同步

RAII技术RAII&#xff08;Resource Acquisition Is Initialization&#xff0c;资源获取即初始化&#xff09;是一种C编程技术&#xff0c;它将资源的获取&#xff08;例如分配的堆内存、打开的文件、锁定的互斥量等&#xff09;与对象的生命周期绑定在一起。具体来说&#xff…...

Le Git Graph 终极指南:GitHub提交图谱可视化工具快速上手

Le Git Graph 终极指南&#xff1a;GitHub提交图谱可视化工具快速上手 【免费下载链接】le-git-graph Browser extension to add git graph to GitHub website. 项目地址: https://gitcode.com/gh_mirrors/le/le-git-graph Le Git Graph 是一款功能强大的浏览器扩展&…...

2026毕业论文降AI指南:deepseek免费降AI指令+降AI神器测评,有效降低AI率【建议收藏】

快过年了&#xff0c;毕业生们日子并不好过&#xff0c;最近私信里哀鸿遍野。 “学姐&#xff0c;我明明是自己写的&#xff0c;为什么查重报告显示AI率80%&#xff1f;” “救命&#xff0c;用了劣质降AI工具结果语句不通&#xff0c;导师直接退回了……” 这几年AI领域发展…...

微信聊天记录安全备份与全平台管理指南:从数据危机到永久保存

微信聊天记录安全备份与全平台管理指南&#xff1a;从数据危机到永久保存 【免费下载链接】WeChatExporter 一个可以快速导出、查看你的微信聊天记录的工具 项目地址: https://gitcode.com/gh_mirrors/wec/WeChatExporter 你的微信数据正面临哪些隐形风险&#xff1f; …...

VeRL框架介绍解析--小白能看懂篇

1 VeRL介绍 verl&#xff08;Volcano Engine Reinforcement Learning&#xff09;是由字节跳动火山引擎团队开源的一个灵活、高效且可用于生产环境的强化学习训练框架&#xff0c;专门用于大型语言模型&#xff08;LLMs&#xff09;的后训练&#xff08;post-training&#xff…...

个人创作者必看:靠谱知识付费平台实测,热门排行榜推荐

对于个人创作者来说&#xff0c;知识付费的核心的是“内容变现”&#xff0c;而选对靠谱的平台&#xff0c;就是打通变现路径的关键一步。不少创作者明明有优质内容&#xff0c;却因选错平台&#xff0c;要么被复杂操作劝退&#xff0c;要么无法沉淀私域用户&#xff0c;要么收…...

Claude年化收入首次反超OpenAI

梦晨 发自 凹非寺量子位 | 公众号 QbitAIAnthropic年化收入首超OpenAI&#xff01;最新披露的热乎数据&#xff0c;Claude背后这家公司年化营收已突破300亿美元。作为对比的OpenAI最新数据&#xff0c;2月底披露年化收入为250亿美元。Anthropic大部分收入来自API&#xff0c;其…...

【调度算法】NSGA-II:多目标优化中的精英策略与多样性保持

1. NSGA-II算法入门&#xff1a;多目标优化的破局利器 第一次接触多目标优化问题时&#xff0c;我盯着屏幕上相互冲突的指标曲线发愁——提高系统响应速度就会增加能耗&#xff0c;降低延迟又会导致吞吐量下降。直到遇到NSGA-II算法&#xff0c;这种"既要又要"的困境…...

用了这么久 Claude Code,你可能从来没打开过它最重要的文件夹!

点击上方卡片关注我设置星标 学习更多AI出海知识装完 Claude Code 跑第一个项目的时候&#xff0c;根目录会多出一个 .claude/ 文件夹。大部分人看到了&#xff0c;没点开过&#xff0c;也没想过里面有什么。这就错过了 Claude Code 最值得折腾的部分。.claude/ 不是缓存目录&a…...