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文件 三、如何…...
Python|GIF 解析与构建(5):手搓截屏和帧率控制
目录 Python|GIF 解析与构建(5):手搓截屏和帧率控制 一、引言 二、技术实现:手搓截屏模块 2.1 核心原理 2.2 代码解析:ScreenshotData类 2.2.1 截图函数:capture_screen 三、技术实现&…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1)准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2)服务端安装软件:bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
