官方示例之地球模块八:创建GeoODLine

官方示例之地球模块七:创建GeoLine /** * 该示例展示了创建不同样式的 GeoLine */ var app = new THING.App(); app.background = [0, 0, 0] THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () { // 创建一个地图 var map = app.create({ type: 'Map', attribution: 'Google', style 阅读详情
/**
 * 该示例展示了创建不同样式的 GeoODLine
 */
var app = new THING.App();
app.background = [0, 0, 0]

THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () {
	// 创建一个地图
	var map = app.create({
		type: 'Map',
		attribution: 'Google',
		style: {
			night: false
		}
	});
	// 创建一个瓦片图层 添加到地图中
	var tileLayer1 = app.create({
		type: 'TileLayer',
		name: '卫星影像图层',
		// Google WGS84 卫星影像服务
		url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}',
		style: {
			template: CMAP.TileLayerStyle.DARKBLUE // 设置瓦片图层滤镜为 深蓝滤镜
		}
	});
	map.addLayer(tileLayer1);
	// 摄像机飞行到某位置
	app.camera.flyTo({
		'position': [2444232.951679011, 4212783.519880975, 5718487.634005925],
		'target': [2035398.0407804989, 3688764.984932529, 4788428.938756701],
		'time': 2000
	});


	// 创建一个 ThingLayer
	var thingLayer = app.create({
		type: "ThingLayer",
		name: "thingLayer01"
	});
	// 将ThingLayer添加到地图中
	map.addLayer(thingLayer);

	var startPos = [116.39139175415039, 39.906082185995366];

	new THING.widget.Button('像素线', function () {
		var geoODLine = thingLayer.query('北京-济南')[0];
		if (!geoODLine) {
			geoODLine = app.create({
				type: 'GeoODLine',
				name: '北京-济南',
				coordinates: [
					startPos,
					[117.1142578125, 36.63316209558658]
				],
				renderer: {
					type: 'vector', // 代表纯色渲染
					lineType: 'Line',
					color: [255, 0, 0],
					speed: 100, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
					// opacity:0.2 ,// 设置不透明度 默认是1
					// effect: true // 线发光效果 默认为 false 不开启
				}
			});
			thingLayer.add(geoODLine);// 添加到ThingLayer中
		}
		else {
			geoODLine.visible = !geoODLine.visible;
		}
	});
	new THING.widget.Button('像素线(贴图)', function () {
		var geoODLine = thingLayer.query('北京-南京')[0];
		if (!geoODLine) {
			geoODLine = app.create({
				type: 'GeoODLine',
				name: '北京-南京',
				coordinates: [
					startPos,
					[118.76220703125001, 32.045332838858506]
				],
				renderer: {
					type: 'image', // 代表贴图渲染
					lineType: 'Line',
					imageUrl: '/guide/image/uGeo/path.png',
					numPass: 3,
					speed: 0.5, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
					// effect: true // 线发光效果 默认为 false 不开启
				}
			});
			thingLayer.add(geoODLine);// 添加到ThingLayer中
		}
		else {
			geoODLine.visible = !geoODLine.visible;
		}
	});
	new THING.widget.Button('管状线', function () {
		var geoODLine = thingLayer.query('北京-杭州')[0];
		if (!geoODLine) {
			geoODLine = app.create({
				type: 'GeoODLine',
				name: '北京-杭州',
				coordinates: [
					startPos,
					[120.21240234375001, 30.240086360983426]
				],
				renderer: {
					type: 'vector', // 代表纯色渲染
					lineType: 'Pipe',
					color: [255, 0, 0],
					width: 1000, // 设置管线半径 单位米
					// opacity:0.2 , // 设置不透明度 默认是1
					// effect: true // 线发光效果 默认为 false 不开启
				}
			});
			thingLayer.add(geoODLine);// 添加到ThingLayer中
		}
		else {
			geoODLine.visible = !geoODLine.visible;
		}
	});
	new THING.widget.Button('管状线(贴图)', function () {
		var geoODLine = thingLayer.query('北京-武汉')[0];
		if (!geoODLine) {
			geoODLine = app.create({
				type: 'GeoODLine',
				name: '北京-武汉',
				coordinates: [
					startPos,
					[114.345703125, 30.56226095049944]
				],
				renderer: {
					type: 'image', // 代表贴图渲染
					lineType: 'Pipe',
					imageUrl: '/guide/image/uGeo/path.png',
					width: 1000, // 设置管线半径 单位米
					numPass: 3,
					speed: 0.5, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
					// effect: true // 线发光效果 默认为 false 不开启
				}
			});
			thingLayer.add(geoODLine);// 添加到ThingLayer中
		}
		else {
			geoODLine.visible = !geoODLine.visible;
		}
	});
	new THING.widget.Button('片状线', function () {
		var geoODLine = thingLayer.query('北京-郑州')[0];
		if (!geoODLine) {
			geoODLine = app.create({
				type: 'GeoODLine',
				name: '北京-郑州',
				coordinates: [
					startPos,
					[113.66455078125, 34.74161249883172]
				],
				renderer: {
					type: 'vector', // 代表纯色渲染
					lineType: 'Plane',
					color: [255, 0, 0],
					width: 2, // 设置线宽 单位像素
					speed: 100, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
					// opacity: 0.2,// 设置不透明度 默认是1
					// effect: true // 线发光效果 默认为 false 不开启
				}
			});
			thingLayer.add(geoODLine);// 添加到ThingLayer中
		}
		else {
			geoODLine.visible = !geoODLine.visible;
		}
	});
	new THING.widget.Button('片状线(贴图)', function () {
		var geoODLine = thingLayer.query('片状线带贴图')[0];
		if (!geoODLine) {
			geoODLine = app.create({
				type: 'GeoODLine',
				name: '片状线带贴图',
				coordinates: [
					startPos,
					[104.04052734375, 30.600093873550072]
				],
				renderer: {
					type: 'image', // 代表贴图渲染
					lineType: 'Plane',
					imageUrl: '/guide/image/uGeo/path.png',
					width: 2, // 设置线宽 单位像素
					numPass: 3,
					speed: 0.5, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
					// effect: true // 线发光效果 默认为 false 不开启
				}
			});
			thingLayer.add(geoODLine);// 添加到ThingLayer中
		}
		else {
			geoODLine.visible = !geoODLine.visible;
		}
	});

	new THING.widget.Button('开启/关闭 发光', function () {
		var lines = thingLayer.children;
		var cnt = lines.length;
		for (var i = 0; i < cnt; i++) {
			var line = lines[i];
			line.renderer.effect = !line.renderer.effect;
		}
	})
});
官方示例(十二):网页加载道路及Geoline开发ThingJS #前端开发# #交通可视化# #Geoline# 简介:智慧城市对于我们并不陌生,目前已经有600多个城市平台智慧化,拥有空、天、地一体化的基础网络部署,针对城市交通物理实体对象的仿真模拟也有了长足发展。为了更逼真的孪生技术应用于交通出行,ThingJS平台结合物联网专业领域应用经验,构建智慧交通场景,加入定制化特效,让城市交通也有机会展示最好的一面! 体验见demo链接:http://www.thingjs.com/guide/?m=sample 1. 基础图层叠加 动态加载地球组件之后,基于地图Ma 阅读详情

相关推荐

官方示例之地球模块一:创建地球

/** * 说明:该示例介绍如何创建一个简单的地球 */ var app = new THING.App(); // 设置app背景为黑色 app.background = [0, 0, 0]; // 引用地图组件脚本 THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () { // 创建一个地球 var map = app.create({ type: 'Map', atmo

ThingJS的博客 659

【UE】制作OD线

选中“Initialize Particle”模块,设置粒子生命周期为用户参数“LifeCycle”,设置粒子大小为用户参数“Width”为了观察此时的效果,这里添加一个“Spawn Rate”模块,设置SpawnRate为10,然后禁用“Spawn Per Unit”模块。7. 回到蓝图“BP_ODLine”,添加一个Niagara系统组件,设置Niagara系统资产为“NS_ODLine”4. 创建一个空心圆柱体,半径设置为500mm,高度设置为1000mmm,高度分段为50,然后绕Y轴旋转90°。

ChaoChao66666的博客 2320

通过创建GeoLine给地图添加烟花图效果

ThingJS除了提供多种类型的模型外,还预置了多种粒子效果,包括:水、火、烟、雨、雪等,每种粒子效果按照不同的使用场景又有多种表现形式,可以满足在不同的天气条件下数字孪生可视化场景中的情况。那能不能在数字孪生可视化地图上添加效果呢?下面我就通过创建GeoLine(地理线)给数字孪生可视化地图添加烟花图效果。 几个关键点: 1. 烟花的火花颜色,大小,位置这三个变量。 2. 烟花飞出的方向:只向上。 3. 烟花的颜色:烟花也就是GeoLine(地理线)一共设置了三种颜色:黄、紫、蓝。 4. 线

ThingJS的博客 1624

supermap地图展示OD图

/**  * =============================================  *  危险品电子路单OD展示  * =============================================  */ var ODpoints=[],   ODlines=[],ODlabels=[]; var markerLayer; var select

qq_16557323的博客 2225

官方示例之地球模块九:创建GeoPolygon

/** * 该示例展示了创建不同样式的 GeoPolygon */ var app = new THING.App(); app.background = [0, 0, 0] THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () { // 创建一个地图 var map = app.create({ type: 'Map', attribution: 'Google', st

ThingJS的博客 442

官方示例之地球模块五:ThingLayer

/** * 该示例展示了如何向 ThingLayer 中添加点、线、面数据 */ var app = new THING.App(); app.background = [0, 0, 0]; THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () { // 创建一个地图 var map = app.create({ type: 'Map', attribution: 'Googl

ThingJS的博客 444

ThingJS,让物联网开发更简单!

随着互联网的不断发展壮大,物联网可视化也逐步受到各行各业的关注,不但制作出优秀的3D可视化场景是一个难题,而且开发3D可视化场景,形成3d可视化行业应用也是一个难题,那么我们该如何去开发3D可视化场景呢?如何让一个虚拟的3D场景不仅能够展示现实场景,还能够同步现实中的部分功能呢?ThingJS可视化平台就能让你快速开发3D场景! ThingJS提供了从搭建场景到发布项目这四个步骤的资料,其中相关...

qq_42739428的博客 1771

ThingsBoard源码分析 —— 调试环境搭建

摘要: 此文档安装系统为win7 64位,因为使用虚拟机,所以安装软件位置都为C盘,涉及到编译时会有权限问题,和造成电脑很卡,建议大家不要安装在C盘!!!! 1. 依赖工具 2. 源码调试 2.1 源码拉取 2.2 源码编译 2.3 IDE(编译器)导入 3. 数据源处理 4. 登录ThingBoard ​​​​​​1、依赖工具 —JDK ...

julyqian的博客 2万+

arcgis制作OD图

1.加载csv数据 2.导出为dbf文件 3.由于数据量太大,先筛选出所需范围内的数据

weixin_47585011的博客 2063

官方示例之地球模块六:创建GeoPoint

/** * 该示例展示了创建不同样式的 GeoPoint */ var app = new THING.App(); app.background = [0, 0, 0]; THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () { // 创建一个地图 var map = app.create({ type: 'Map', attribution: 'Google', sty

ThingJS的博客 575

3D灯光教程仅需三个步骤,用ThingJS体验极速开发!

人生苦短,3D灯光教程仅需三个步骤,用ThingJS体验极速开发! 灯光有助于表达一种情感,或引导观众的目光看向具体的位置。灯光能够反映一种基调,对整个图像的外观至关重要。下面教你关于打灯光的技巧,以及轻便的开发方法。 ThingJS提供一套操作简便的灯光配置项,只要配置结束后,记得点击生成代码块并执行,一套完整的初级灯光效果就出来了。 主灯光 主灯光对象是对主光源的控制代码,可设置的变量包括阴影、颜色、强度和打灯角度。主光源通常放在四分之三的位置上,位置是从物体的正面转45度,并从中心线向上转45度。夜

ThingJS的博客 1671

大数据案例之OD线分析

​ 我们从网络上爬取了2013年到2017年芝加哥每一辆出租车的每一单行程数据,数据内容示例如图一,包含了出租车ID,行程ID,上下车时间,上下车坐标,行程耗时,费用以及支付方式等信息。有了这些数据,我们就可以对其进行数据挖掘分析,找到打车需求最旺的区域和时间段,以便得到更好的出租车资源调度策略等。本案例中我们明确分析目标,要找出2016年里周末10点到18点这个时间段,从奥黑尔国际机场出...

SuperMap技术控 1万+

ArcGIS绘制OD网络图

在ArcGIS 中导入节点数据,打开插件,选择输入起始节点和目标节点的节点文件Point,以Name字段(地名)为连接线的起始字段和目标字段,(Input Table File)选择连接关系表格SDLine.csv,(Origin Column 和 Destination Column)为起始节点和目标节点,(Output Path)为输出路径,应选择.gdb数据库路径,否则容易报错,(Chord Coefficient)为连线的曲率,数值越大,曲率越高。运行环境:ArcGIS10.2。.....

J_Giser的博客 7802

uniapp使用map地图组件教学

由之前描述可知,markers属性类型为Array,表示标记点用于在地图上显示标记的位置。这个数组属性,它里面有它的对象配置属性,分别是。

qq_57263284的博客 1万+

混合动力系统建模的稳定性和鲁棒性-hybrid dynamical systems modeling stability and robustness.pdf

混合动力系统建模的稳定性和鲁棒性-hybrid dynamical systems modeling stability and robustness.pdf

实测对比:同步 vs 异步 DCDC,轻载时哪个更‘吵’?效率差多少?(以MP1601为例)

本文通过实测对比MP1601同步与异步DCDC在轻载工况下的噪声与效率表现,揭示异步整流在轻载时产生高频振铃的问题,而同步整流则提供更稳定的波形。测试数据显示,轻载下异步方案效率略高,但同步方案在EMI性能上优势明显,为工程选型提供重要参考。

weixin_30904593的博客 301

cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法

cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法。 通过Entity和CZML来实现在cesium上绘制立方体。通过Entity添加立方体 1.2.2 CZML 通过CZML添加立方体 2. 设置材质 2.1 构造时赋材质 2.1.1 效果 2.2 构造后赋材质 2.2.1 效果 3.操作相机 cesium中提供三种方式对相机camera进行操作:setView有两种计算视角方式。

~~~ 3540

企业和个人 AI 编程工具怎么选?2025 年 12 款主流工具(Claude/Cursor 等)核心能力 + 收费对比

2025 年最火的 12 款 AI 编程工具,像 Claude、Cursor 这些热门款,我把它们的核心能力、收费标准全扒得明明白白,看完这篇你不用再瞎琢磨,直接就能挑到对的!再说说 Cursor,美国 Cursor Labs 做的,还拿过红杉资本投资,2022 年推出后,2024 年收入直接涨了 6400%,势头很猛。总之,不管你是企业技术管理者、程序员,还是刚入门的 AI 小白,按自己的需求(语言、合规、预算)挑,保准能找到最适合的 AI 编程工具!最后给大家划重点,不同需求直接对号入座:?

hundred98的博客 2804

Cesium-EarthSdk简单功能实现(二)——流动道路

Cesium-EarthSdk简单功能实现(二)——流动道路 效果: 1、使用QGIS或ArcGIS将道路数据处理成如图所示json oid为某条道路的唯一id,x和y分别为道路上节点的经纬度坐标 2、加载并处理道路json loadODLineData(dataFunc) { Cesium.Resource.fetchJson('./assets/json/line.json').then((data) => { var timeDuration = 5.0; var mov

u011505575的博客 2700

手把手教你搞定MT6701磁编码器的SSI通信与CRC-6校验(附避坑代码)

本文详细介绍了MT6701磁编码器的SSI通信与CRC-6校验的实现方法,包括硬件连接、时序配置、数据读取和专用CRC-6算法。通过提供避坑代码和常见问题解决方案,帮助开发者快速掌握磁编芯片的调试技巧,确保通信稳定可靠。

weixin_30872337的博客 222

RK3568平台 麦克风PDM接口录音_rk pdm配置

在RK平台,Android的Audio HAL层中一般会都会有导出录音播放数据的功能。如播放的,是会直接送到声卡中的,对于播放出现问题的情况,可以从分析导出的音频数据是否正常,可以基本知道,是在应用、解码出现的问题,还是送到声卡过程中出现问题。当点开app进行录音的时候会调用到static int start_input_stream(struct stream_in *in)。音频在PDM接口输入,不经过编解码芯片直接到RK主芯片,RK主芯片自带PCM编解码功能。以下软件能播放保存下来的pdm文件。

2401_83817122的博客 2344

Web 版翻译者资料库

本项目是桌面版《翻译者资料库》的 Web 移植版,基于 Spring Boot 3.3、Thymeleaf、Bootstrap 5.3 与 MySQL 8.0 构建。它面向翻译写作提供资料、词汇、句库、文本工具、对照制作、查找、备份恢复及旧库迁移等功能,完整继承桌面版核心业务规则,支持一键启动与离线访问。

howard2005的专栏 181

如何使用 Python 爬取 58 同城招聘信息

职位名称:招聘的岗位名称,如“前端开发”、“数据分析师”等。公司名称:招聘公司的名称。薪资待遇:职位的薪资范围,通常以“面议”、“10k-20k”这样的形式表示。工作地点:公司所在的城市及具体地址。公司福利:例如五险一金、带薪年假、绩效奖金等。发布时间:职位信息的发布时间。一个典型的招聘页面 URL 格式通常如下:在这个页面上,职位信息会分页展示,爬虫需要模拟翻页,获取多个页面的招聘信息。

2201_76125261的博客 1292
上一篇: 官方示例之地球模块七:创建GeoLine
下一篇: 官方示例之地球模块九:创建GeoPolygon
ThingJS_小锘
博客等级 码龄6年 170粉丝 254原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值