官方示例之地球模块四：底图效果

最新推荐文章于 2022-08-11 14:28:06 发布

ThingJS_小锘

最新推荐文章于 2022-08-11 14:28:06 发布

阅读量262

点赞数

CC 4.0 BY-SA版权

分类专栏： ThingJS 3D可视化物联网文章标签： javascript

本文链接：https://blog.youkuaiyun.com/ThingJS/article/details/109160970

本文详细探讨了使用JavaScript如何创建和实现底图效果，特别是在地球模块中的应用。通过实例代码和步骤解析，揭示了底图加载、定位及交互功能的实现细节，为JavaScript开发者提供了一个实用的参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 该示例主要展示了地图底图颜色以及底图滤镜功能
 * 注：CMap中的颜色rgb取值范围为0-255
 */
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',
		style: {
   
			night: false // 关闭白天黑夜的特效
		},
		attribution: 'Google'
	});
	// 创建一个瓦片图层
	var tileLayer1 = app.create({
   
		type: 'TileLayer',
		name: 'tileLayer1',
		url: 'https://mt0.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'
	});
	// 将瓦片图添加到地图中
	map.addLayer(tileLayer1);

	// 创建一个配置界面组件
	var panel = new THING.widget.Panel({
   
		titleText: '颜色校正',
		hasTitle: true
	});

	var panelCustomColor = new THING.widget.Panel({
   
		titleText: '自定义滤镜颜色',
		hasTitle: true,
		position: [320, 0]
	});
	panelCustomColor.visible = false;

	var dataObj = {
   
		'亮度': 1.0,
		'对比度': 1.0,
		'饱和度': 1.0,
		'色调': 0,
		'gamma'