three.js 使用geojson ,实现中国地图区域,边缘流动效果
three.js 使用geojson ,实现中国地图区域,边缘流动效果
在线链接:https://threehub.cn/#/codeMirror?navigation=ThreeJS&classify=expand&id=geoBorder
国内站点预览:http://threehub.cn
github地址: https://github.com/z2586300277/three-cesium-examples

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'const box = document.getElementById('box')const scene = new THREE.Scene()const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)camera.position.set(0, 0, 500)const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })renderer.setSize(box.clientWidth, box.clientHeight)box.appendChild(renderer.domElement)const controls = new OrbitControls(camera, renderer.domElement)controls.enableDamping = truescene.add(new THREE.AmbientLight(0xffffff, 1))const directionalLight = new THREE.DirectionalLight(0xffffff, 2)directionalLight.position.set(300, 300, 300)scene.add(directionalLight)const map = new THREE.TextureLoader().load(`https://file.threehub.cn/` + 'images/channels/lmap.png')map.wrapS = THREE.RepeatWrappingmap.wrapT = THREE.RepeatWrappingmap.needsUpdate = trueanimate()function animate() {requestAnimationFrame(animate)map.offset.x += 0.001controls.update()renderer.render(scene, camera)}window.onresize = () => {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect = box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()}/* 边界 */
const group = new THREE.Group()fetch(`https://file.threehub.cn/` + 'files/json/chinaBound.json').then(r => r.json()).then(res => {const { features } = resfeatures.forEach((i) => {if (i.geometry.type === 'MultiPolygon') i.geometry.coordinates.forEach((j) => j.forEach((z) => createShapeWithCoord(group, z)))else if (i.geometry.type === 'Polygon') i.geometry.coordinates.forEach((j) => createShapeWithCoord(group, j))else if (i.geometry.type === 'LineString') i.geometry.coordinates.length > 1 && createShapeWithCoord(group, i.geometry.coordinates)})translationOriginForGroup(group)scene.add(group)})function createShapeWithCoord(group, coordinates) {if (coordinates.length < 1000) return // 设置点数限制 如果点太少则不绘制const curvePoints = coordinates.map((k) => coordToVector3(k))const curve = new THREE.CatmullRomCurve3(curvePoints)const geometry = new THREE.TubeGeometry(curve, curvePoints.length - 1, 1, 40, false)const material = new THREE.MeshPhongMaterial({ color: 0xffffff , map , transparent: true })const mesh = new THREE.Mesh(geometry, material)translationOriginForMesh(mesh)group.attach(mesh)}function coordToVector3(coord, slace = 10000) {const [lng, lat] = coordconst x = lng * 20037508.34 / 180const y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180) * 20037508.34 / 180return new THREE.Vector3(x / slace, y / slace, 0)}function translationOriginForMesh(mesh) {const boundingBox = new THREE.Box3().setFromObject(mesh)boundingBox.getCenter(mesh.position)mesh.geometry.center()}// 设置组中心点
function translationOriginForGroup(group) {const boundingBox = new THREE.Box3().setFromObject(group)boundingBox.getCenter(group.position)group.traverse((c) => {c.isMesh && c.position.sub(group.position)})group.position.set(0, 0, 0)}/*** 名称: 地理边界* 作者: 优雅永不过时 https://github.com/z2586300277
*/相关文章:
three.js 使用geojson ,实现中国地图区域,边缘流动效果
three.js 使用geojson ,实现中国地图区域,边缘流动效果 在线链接:https://threehub.cn/#/codeMirror?navigationThreeJS&classifyexpand&idgeoBorder 国内站点预览:http://threehub.cn github地址: https://github.co…...
数据中台业务架构图
数据中台的业务架构是企业实现数据驱动决策和业务创新的关键支撑。它主要由数据源层、数据存储与处理层、数据服务层以及数据应用层组成。 数据源层涵盖了企业内部各个业务系统的数据,如 ERP、CRM 等,以及外部数据来源,如社交媒体、行业数据…...
Docker学习笔记(2)- Docker的安装
1. Docker的基本组成 镜像(image):Docker镜像就像是一个模板,可以通过这个模板来创建容器服务。通过一个镜像可以创建多个容器。最终服务运行或者项目运行就是在容器中。容器(container):Docker…...
PostgreSql的备份和升级
目录 版本概述: 跨大版本数据迁移 QProcess 调用相关进程进行备份和恢复 版本概述: 该数据库版本主要分为主要版本和次要版本,大版本基本每年发布一次,小版本则每几个月即发布,更新较快。在10.0之前所使用的数据库版…...
联系拯救者Y9000P2022笔记本电脑进入BIOS快捷键
联系拯救者Y9000P2022笔记本电脑进入BIOS快捷键 文章目录 联系拯救者Y9000P2022笔记本电脑进入BIOS快捷键1. 进入BIOS快捷键2. 快速进入BIOS设置界面3. 快速进入启动项选择界面 1. 进入BIOS快捷键 进入BIOS设置界面的快捷键为F2快速进入启动项选择界面的快捷键为F12 2. 快速进…...
compose navigation 自定义navtype
Jetpack compose navigation with custom NavType https://www.youtube.com/watch?vqBxaZ071N0c&t182s 定义两个路由 Serializable data object DogListRouteSerializable data class DogDetailRoute(val dog: Dog,val breedSize: BreedSize ) 即两个页面,…...
实现对redis过期键监听案例
开发背景 为了实现当经纪人A提交分佣后如果三天后其他经纪人没有确认分佣就自动确认分佣,如果经纪人A修改分佣后再次提交分佣,时间重置为三天 实现方式 第一步:引入依赖 <dependency> <groupId>redis.clients</groupId> …...
yocto基础 -- bb 文件字段解析
Yocto .bb 文件字段解析 本文详细讲解了 Yocto .bb 文件中各字段的作用和用法,包括 SECTION、SRC_URI、SUMMARY 等,旨在帮助开发者更好地理解和使用 Yocto 构建系统。 目录 1. SECTION 字段 1.1 SECTION 的作用1.2 SECTION 的用法1.3 如何使用 SECTIO…...
Android开发相关的重要网站
本文整理Android相关的重要网站,欢迎大家分享别的网站。 AOSP 官网谷歌官方Android源码搜索Android Issue Tracker 如果在开发过程中遇到与 Android 相关的问题或发现了系统的 bug,可以在这个网站上提交反馈,也可以查询是否存在类似的问题。…...
MySQL 中utfmb3和utfmb4字符集区别
目录 一:utf-8二:utf8mb3三:uft8mb4 一:utf-8 unicode 定义了一套规范来存储各种字符,但是它没有定义这些字符在计算机中应该如何存储。所以基于这种原因,后续基于 Unicode 字符集发展出了多种字符的存储规…...
【C语言】文件操作(1)(文件打开关闭和顺序读写函数的万字笔记)
文章目录 一、什么是文件1.程序文件2.数据文件 二、数据文件1.文件名2.数据文件的分类文本文件二进制文件 三、文件的打开和关闭1.流和标准流流标准流 2.文件指针3.文件的打开和关闭文件的打开文件的关闭 四、文件的顺序读写1.fgetc函数2.fputc函数3.fgets函数4.fputs函数5.fsc…...
今日总结10.18
Exception 和Error 有什么区别 Exception和Error都是Java等编程语言中异常处理机制的重要组成部分,它们都继承自Throwable类。以下是两者的主要区别: 定义与性质 Error: 1.表示严重的系统级错误,如内存溢出(OutOfM…...
React Agent 自定义实现
目录 背景 langchin 中的 agent langchin 中 agent 的问题 langchain 的 agent 案例 自定义 React Agent 大模型 工具定义 问题设定 问题改写,挖掘潜在意图 React Prompt 下一步规划 问题总结 代码 背景 之前使用过 langchian 中的 agent 去实现过一些…...
RabbitMQ 入门(六)SpringAMQP五种消息类型(Direct Exchange)
一、发布订阅-DirectExchange(路由模式) 在Fanout模式中,一条消息,会被所有订阅的队列都消费。但是,在某些场景下,我们希望不同的消息被不同的队列消费。这时就要用到Direct类型的Exchange。 Direct Exchan…...
2062:【例1.3】电影票
【题目描述】 已知一位小朋友的电影票价是10元,计算x位小朋友的总票价是多少? 【输入】 输入x。 【输出】 人数和电影票总价,中间用一个空格隔开。 【输入样例】 2 【输出样例】 2 20 Code #include<iostream> using namespace st…...
Python | Leetcode Python题解之第477题汉明距离总和
题目: 题解: class Solution:def totalHammingDistance(self, nums: List[int]) -> int:n len(nums)ans 0for i in range(30):c sum(((val >> i) & 1) for val in nums)ans c * (n - c)return ans...
Leecode刷题之路第25天之K个一组翻转链表
题目出处 25-K个一组翻转链表-题目出处 题目描述 给你链表的头节点 head ,每 k 个节点一组进行翻转,请你返回修改后的链表。k 是一个正整数,它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍,那么请将最后剩余的节点保…...
nuxtjs3 使用tailwindcss做自适应
步骤 1: 安装 Tailwind CSS npm install tailwindcss postcss autoprefixer nuxtjs/tailwindcss步骤 2: 配置 Tailwind CSS 这将生成一个 tailwind.config.js 文件。 npx tailwindcss init步骤 3: 配置 nuxt.config.ts // https://nuxt.com/docs/api/configuration/nuxt-con…...
数据资产目录构建方法与应用
一、引言随着大数据、云计算、人工智能等技术的飞速发展,数据驱动已经成为企业发展的新引擎。数据资产目录作为数据管理的核心工具,不仅能够帮助企业更好地掌握自身数据资源的状况,还能为数据资产的全生命周期管理提供有力支撑。因此…...
【Python爬虫实战】从文件到数据库:全面掌握Python爬虫数据存储技巧
🌈个人主页:https://blog.csdn.net/2401_86688088?typeblog 🔥 系列专栏:https://blog.csdn.net/2401_86688088/category_12797772.html 目录 前言 一、文本文件数据存储的基础 二、如何将爬取的数据存储为.txt文件 三、如何…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中,有几种方法可以执行Shell指令: 1. 使用system()函数 这是最简单的方法,包含在stdlib.h头文件中: #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
docker 部署发现spring.profiles.active 问题
报错: org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)
前言: 最近在做行为检测相关的模型,用的是时空图卷积网络(STGCN),但原有kinetic-400数据集数据质量较低,需要进行细粒度的标注,同时粗略搜了下已有开源工具基本都集中于图像分割这块,…...
