mapboxgl地形切片制作全流程记录
背景:内网环境下使用mapboxgl开发需要加载本地部署的离线地形切片
mapbox支持的地形瓦片规范
Mapbox 地形 RGB 瓦片。更多信息参见 https://www.mapbox.com/help/access-elevation-data/#mapbox-terrain-rgb。
Terrarium 格式的 PNG 瓦片。更多信息参见 https://aws.amazon.com/es/public-datasets/terrain/。
实践步骤:1.DEM下载使用QGIS插件STRM-Downloader可以下载全球任意经纬度范围的DEM切片
注意:使用该插件需要科学上网,如果没有科学上网没有下载成功也不会报错,这个比较坑,我科学上网以后就能正常下载了
下载完成后,在qgis中打开vrt索引文件,长这样
2.地形切片有了DEM数据后,就可以开始地形切片了,这里使用了国内大佬开发的开源地形切片工具:https://github.com/FreeGIS/dem2terrain
根据readme文档一步步操作:
1.工具下载先使用npm全局安装dem2terrai ...
Cesium中几种glsl代码编写入口的盘点与区分
背景:为什么需要在Cesium中编写glsl代码?在三维数字孪生系统中,使用Cesium的基础功能已经能满足常见的三维渲染需求,但想要追求更好的效果,比如高质量水面、体积云、流体模拟、流动飞线、雷达扫描等酷炫的效果,则需要通过编写glsl代码来实现。
Cesium中glsl代码入口盘点1. Appearance(最底层)
本质:直接定义完整的渲染管线,包括顶点着色器、片元着色器、渲染状态(深度测试、剔除等)。
特点:完全从零开始控制渲染,没有预设逻辑,需要自己实现所有顶点变换…
Cesium中Appearance的vertexShaderSource、FragmentShaderSource,Materia的shaderSource,material.fabric.source,这三者里面写着色器代码有啥区别
在 Cesium 中,Appearance的vertexShaderSource/fragmentShaderSource、Material的shaderSource以及material.fabric.source这三种方式都用于编写着色器代码,但它们的抽象层级、使用 ...
手把手教你用NestJS搭建第一个Node.js后端项目
背景:为什么选择 NestJS?作为一名前端 GIS 开发工程师,最近在开发一个小项目时需要搭建后端服务。虽然之前用过 Express 框架,但在工作中发现许多 Node.js 后端项目都在使用 NestJS 框架。借此机会,我决定深入学习 NestJS,探索这款框架如何提升后端开发效率。
Nestjs框架简介:企业级 Node.js 开发的最佳拍档NestJS 是一个基于 TypeScript 的企业级 Node.js 后端框架,它结合了 Express 的灵活性和现代后端框架的最佳实践,特别适合构建可扩展、可维护的应用程序,堪称中大型项目的理想选择。
Nestjs核心架构:清晰分层的工程化设计NestJS 采用了清晰的分层架构,主要包含以下核心层次,每个层次各司其职,让代码结构一目了然:
Controllers(控制器层)
处理 HTTP 请求(支持REST/GraphQL/WebSocket等多种协议)
定义路由和请求 / 响应格式
1234567@Controller('users')export class UsersC ...
原生Cesium加载超图S3M服务
适用场景:通常情况下,加载S3M数据需要使用超图的SuperMap iClient3D for WebGL库。
但在某些项目中,我们可能已经构建了基于原生Cesium的应用框架,不希望引入过多依赖。这时,实现原生Cesium加载S3M就变得很有价值。
关键代码:12345678import "@/components/SuperMap3D/SuperMap3D.js";//获取viewer对象const { viewer } = window;let scenes = "https://www.supermapol.com/realspace/services/3D-CBD/rest/realspace";viewer.scene.open(scenes);
💡 SuperMap3D.js文件中的SUPERMAP_BASE_URL需要配置成上面静态资源的实际请求路径
效果展示
参考文章:https://mp.weixin.qq.com/s/ZimVYQotuAcfB9tXK3FtNw —— 攻城师不浪
Cesium使用自定义Shader渲染3dtiles建筑白膜
适用场景大屏项目,有科技风格主题渲染需求的,可以对建筑白膜进行自定义渲染,实现灵活多变酷炫的风格
实现思路Cesium自1.87.1版本,开始支持3DTileset使用CustomShader:
1Added CustomShader class for styling Cesium3DTileset or ModelExperimental with custom GLSL shaders
在CesiumJS 1.97版本,支持Model entities使用CustomShader:
1Model entities now support CustomShader
借助CustomShader,我们可以轻松的实现模型的自定义Shader渲染
效果展示
关键代码12345678910111213141516171819202122232425262728//基于高度的渐变和线条扫描特效const shader = new Cesium.CustomShader({ fragmentShaderText: ` void fragmentMain ...
在vue3项目中引入Cesium的最佳实践(转载)
基础引入方式的弊端在本人以往的离线Cesium项目中,通常的做法是在下载完cesium依赖后,直接将node_modules/cesium/Build/Cesium文件夹复制到项目根目录的public路径下,这一过程依赖手动操作。如果cesium版本更新后,也要手动更新静态资源,如果忘记了这一步,通常会出现cesium渲染报错;解决这一问题让其自动化是本文的目的。
核心优化1.静态资源自动复制使用一种静态资源复制插件,实现将node_modules中的Cesium/Build/Cesium下的文件复制到public,替代我们的手动操作;
在vite.config.ts文件中增加如下配置:
123456789101112131415161718192021222324252627282930313233343536373839404142import { fileURLToPath, URL } from 'node:url'import { viteStaticCopy } ...
使用certbot申请ssl证书并实现自动续期
背景:最近本站的ssl证书又过期了需要更新,于是趁此机会研究下Certbot自动续期,实现ssl证书自动更新;
环境:操作系统:ubuntu 22.04 LTS
步骤记录:1.安装certbot(使用apt安装)使用以下命令安装
12sudo apt-get updatesudo apt-get install certbot
2.插件选择目前certbot常用的自动续期方式有两种,一种是使用certbot-nginx插件的方式,一种是使用dns服务商插件的方式;第一种方式不支持泛域名,如果需要申请支持泛域名的ssl证书的话,只能选择第二种方式;
3.nginx插件方式(不支持泛域名)3.1 安装nginx插件1sudo apt install certbot python3-certbot-nginx
打开nginx.conf,在你的站点配置中添加ACME挑战路径处理模块
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 ...
mapboxgl离线使用配置(跳过token验证)
背景很多Giser同行在学习mapboxgl开发时大概率会遇到这个问题:mapbox怎么跳过token验证?mapbox怎么离线使用?百度搜了一大堆,很多回答都不靠谱。笔者已经遇到过n多小伙伴有这样的疑惑了,于是写下这篇文章统一回复,以后再遇到有人问直接甩链接,以便为本站增加流量😏;
❌token验证报错:
解决方法:在引入mapboxgl后,添加下面这行代码:
1mapboxgl.baseApiUrl = ""
demo:12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name=" ...
Git仓库添加远程仓库并切换分支映射
背景:在使用Git时,遇到了需要配置多个远程仓库的情况,此时需要为Git添加一个远程仓库配置,并设置分支映射。
操作方法:1.使用命令为本地仓库添加一个远程仓库,取名随意,这里我取名为proxyOrigin
1git remote add proxyOrigin http://your.new.rempository.git
2.拉取新远程仓库的分支
1git fetch proxyOrigin
3.设置本地分支映射到新远程仓库的对应分支(以develop分支为例)
1git branch develop -u proxyOrigin/develop
4.检查结果(非必要步骤)
1git branch -vv
从零开始的python项目-地图切片下载
背景:笔者最近决定开始学python,刚好在工作中遇到了地图切片下载的需求,于是就想用python实现一个切片下载的脚本,简化后续工作的同时也能顺便练习自己的python技能。笔者目前的进度如下图,还停留在语法层面。但是借助强大的AI老师,我完全有信心实现这个脚本!
项目搭建:经过网上查询资料和询问AI,我了解到Python项目搭建分为以下几个关键步骤:
创建项目目录
创建python虚拟环境
安装需要的依赖
编写核心逻辑代码
1.创建项目目录在一个喜欢的位置新建文件夹,用于存放python项目文件。
2.初始化python虚拟环境
什么是python虚拟环境?
虚拟环境是相对于全局环境的概念,每个项目使用的依赖都可能不一样,如果都安装在全局(也就是python的安装目录中),会造成依赖的版本混乱,所以需要每个项目都有一个独立的空间,用于存储项目的依赖,python执行时优先从项目中的依赖空间找依赖;(类似于前端项目中的node_modules目录)
创建虚拟环境有多种方式,常用的是使用Python内置的虚拟环境管理工具venv或第三方的Conda
通过询问AI老师,我了解到C ...
SSH免密登录服务器
1.什么是SSH?SSH(Secure Shell)是一种网络协议,主要用于为远程登录会话和其他网络服务提供安全的传输通道。
安全性:通过加密技术对数据传输进行加密,防止数据在传输过程中被窃取、篡改或监听。它采用非对称加密算法(如 RSA、DSA、ED25519 等)进行密钥交换和身份验证,确保只有授权用户才能访问远程系统,大大提高了网络通信的安全性。
非对称加密:非对称加密算法会生成一对密钥,即公钥(Public Key)和私钥(Private Key) 。这两个密钥在数学上相关,但不能由公钥推导出私钥,也不能由私钥推导出公钥。公钥是公开的,可以分发给任何需要与持有私钥的一方进行通信的人;而私钥则由密钥的所有者妥善保管,严格保密。
主要功能:
远程登录:允许用户从本地计算机安全地登录到远程服务器,就像在本地操作一样执行各种命令。例如,系统管理员可以在办公室通过 SSH 远程管理服务器,进行软件安装、配置调整等操作。
文件传输:支持安全的文件传输,常见的有 SCP(Secure Copy)和 SFTP(SSH File Transfer Protocol)。用户可以方便地在本 ...
了解一下计算机领域常见的编码方式
笔者作为一个非科班出身的前端工程师,对编码这一块的概念一直比较模糊,最近在做需求查资料的过程中了解到相关知识,于是决定把它记录下来;
⚠️注:以下内容为AI生成
1.什么是编码?简单解释: 编码(Encoding)是将信息从一种形式或格式转换成另一种形式的过程。通常,编码的目的是为了更有效地传输、存储、处理或理解数据。在计算机和通信领域,编码广泛应用于数据的表示、存储、加密、压缩等方面。
2.常见的编码方式常见的编码方式有很多,按用途和应用的不同,它们可以分为不同的类别。以下是几种常见的编码方式,每种编码方式有其特定的应用场景和优缺点:
1. 字符编码字符编码是将字符映射到数字(字节)的过程,常见的字符编码有:
1.1 ASCII (American Standard Code for Information Interchange)
用途:主要用于英文字符的编码。
描述:ASCII 是一种 7 位编码方式,能表示 128 个字符(包括 26 个字母、数字 0-9、常见标点符号以及一些控制字符)。
范围:0-127,包含英文字符和一些特殊符号。
优点:简单且占用空间小。
缺点:只能 ...