请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 386|回复: 0

[发布] 3步70行代码开辟GIS点坐标【ajax技术出镜】

[复制链接]
avatar

52

主题

57

帖子

79

积分

注册会员

Rank: 2

积分
79
ico_lz  楼主| 发表于 2021-1-21 18:51:56 | 显示全部楼层 |阅读模式


#前端开辟# #三维可视化# #GIS坐标点#
  1. 1. 根本图层叠加
  2. 2. ajax开辟技术剖析
  3. 3. 三步建立点坐标

3步70行代码开辟GIS点坐标【ajax技术出镜】

简介:坐标点是电子舆图的常用元素,用于定位、途径计划和位置标识等。三维空间内的坐标点有长度、宽度和高度,并带有GIS地理信息数据,ThingJS保举利用ajax开辟技术等逻辑,轻松建立点坐标。

1. 根本图层叠加

静态加载地球组件以后,基于Map底图建立瓦片图层、点图层,停止图层叠加,在工具图层ThingLayer停止更灵活的二次开辟。开辟工具主如果点坐标,图层命名为pointLayer。
将衬着后的图片,依照一定的法则连系比例尺切成小的瓦片图形,最初静态加载瓦片以提升收集加载效力,这就是瓦片图层的由来。
经过设备相机的飞翔视角,点窜飞翔时候、地理位置、高度等参数,3D舆图动效更炫酷!

3步70行代码开辟GIS点坐标【ajax技术出镜】

2. ajax开辟技术剖析

操纵ajax开辟技术,在点图层中建立点坐标。ajax函数是一种建立交互式、快速静态网页利用的网页开辟技术,保证不外多占用网页资本,只需要对点坐标部分停止更新,即可快速建立静态坐标。
具体需要读取Geojason中的坐标及属性来提取数据并衬着图片,示例代码见下方。

3. 三步建立点坐标

(1)读取Geojason数据
运转代码遍历geojason中的所稀有据,获得需要的属性数据和坐标,仅3行代码就能轻松建立。
(2)贴图衬着
经过衬着器renderer停止贴图衬着,供给尺寸、命名和图片地址,间接履行javascript不要太简单!
(3)增加点击事务
最初增加交互事务,只要鼠标点击触发控制台输出数据中属性,即可在舆图上增加分歧的点坐标。
$.ajax({
		type: 'GET',
		url: 'https://www.ThingJS.com/uearth/uGeo/sample_point.geojson',
		dataType: 'json',
		success: function (data) {
			// 遍历geojson中的数据
			for (var i = 0; i < data.features.length; i++) {
				// 按照geojson中每笔记录中的geometry.coordinates和properties建立GeoPoint
				// 留意,这里间接传经纬度即可,经度在前纬度在后
				var geoPoint = app.create({
					type: 'GeoPoint',
					name: 'geoPoint' + i,
					coordinates: data.features[i].geometry.coordinates,
					userData: data.features[i].properties,
					renderer: {
						type: 'image', // image代表建立图片范例的点
						url: 'image/uGeo/pop.png', // 图片的url
						size: 5  // 尺寸
					}
				});
				// 增加点击事务,控制台输出数据中属性
				geoPoint.on('click', function (event) {
					console.log(event.object.userData.NAME);
				});
				pointLayer.add(geoPoint);
			}
		}
	});
});


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则