Layui与WebGL结合之兴趣点标注

nannan

Layui是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。它拥有自己的模式，更加轻量和简单，非常适合界面的快速开发。先看小编1分钟内做的界面，如下图:

为什么说只用1分钟呢？因为Layui基本界面可以直接在Layui官网https://www.layui.com/doc/element/layout.html#admin文档里找后台布局复制粘贴，然后改成自己的内容即可。如果想格外制作更精美的界面，请移步https://www.layui.com/doc/进行学习。
Layui需调用如下文件：

<link rel="stylesheet" href="./layui/css/layui.css">
<link rel="stylesheet" href="./layui/css/modules/layer/default/layer.css">
<script src="./layui/layui.js"></script>

现在想让底部固定区随着鼠标移动实时显示鼠标的坐标，怎样在上面显示文字呢？看下图：

var oBox = document.getElementById("状态栏");
oBox.innerHTML = "东经：" + longitude + " 北纬：" + latitude + " 相机高度：" + height1 + "m";

结果如下：

下面我们进入主题，通过鼠标自定义添加兴趣点标注，并可设置自定义属性，点击兴趣点，可查询兴趣点自定义属性。先看一下炫酷的效果:

代码思路如下：

1.Layui水平导航菜单按钮触发事件

var pMarking = document.getElementById('pointMarking');
pMarking.onclick = function() {}

2.WebGL中场景鼠标左键触发事件

var handlerbiaozhu = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handlerbiaozhu.setInputAction(function(e) {
    ...
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

3.在鼠标左键触发事件里写添加兴趣点

entity = viewer.entities.add(new Cesium.Entity({
	point: new Cesium.PointGraphics({
	color: new Cesium.Color(1, 1, 0),
	pixelSize: 10,
	outlineColor: new Cesium.Color(0, 1, 1),
	outlineWidth: 5
    }),
position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
}));

4.Layui的弹出框用layer.open

layer.open({
	type: 1, //此处以iframe举例
	title: '标注信息',
	area: ['300px', '300px'],
	shade: 0,
	offset: 'auto',
	skin: 'layui-layer-molv', //加上边框
	content: $("#firstLayer"),
	btn: ['新增属性'],
	closeBtn: 2
});

5.弹出框里添加table

layui.use(['layer', 'table'], function() {
	var table = layui.table; //表格

6.Layui的动态table构建表头和添加数据

table.render({
	elem: '#demo',
	height: '200px',
	title: '标注信息表',
	limit: 10,
	cols: [
		[ //表头
			{
			   field: '属性名称',
			   title: '经度',
			   width: 60,
			   edit: 'text',
			}, {
				field: '属性值',
				title: longitude,
				width: 200,
				edit: 'text'
			}
		  ]
	    ],
	skin: 'row ',
	data: [{
		"属性名称": "纬度",
		"属性值": latitude
		}],
	});

7.Layui的动态table监听单元格编辑，对单元格数值进行属性更新

   //监听单元格编辑
   table.on('edit(test)', function(obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
	var value = obj.value //得到修改后的值
	,data = obj.data //得到所在行所有键值
	,field = obj.field; //得到字段
	layer.msg(field + ' 字段更改为：' + value);
	entity.description = createDescription(Cesium, table.cache.demo);
  });
},
	yes: function() {
		var oldData = table.cache["demo"];
		var data1 = {
		"属性名称": "高度",
		"属性值": height,
		};
		oldData.push(data1);
		table.reload('demo', {
		data: oldData
		});
	entity.description = createDescription(Cesium, table.cache.demo);
}

8.将编辑的属性值以静态表格的形式存到entity的描述信息description里

function createDescription(Cesium, properties) {
	var html = '';
	for(var key in properties) {
		var tt = properties[key];
		var name = tt["属性名称"];
		var value = tt["属性值"];
		html += '<tr><td style="width: 61px;text-align: center;">' + name + '</td><td style="width: 201px;left: 17px;">' + value + '</td></tr>';
		}
	return html;
}

9.点击兴趣点触发选中实体事件

viewer._selectedEntityChanged.addEventListener(function(entity) {
    ...
});

10.在选中实体事件里继续写打开弹出框及table附属的代码。
本文详细代码请参见：https://download.csdn.net/download/supermapsupport/11995947