///////////////////////////////////////////////////////////////////////////
|
// Copyright © 2020 zhongsong. All Rights Reserved.
|
// 模块描述:河流水面线分析
|
///////////////////////////////////////////////////////////////////////////
|
define(['dojo/_base/declare', 'dojo/_base/lang', 'dojo/_base/array', 'dojo/_base/html', 'dojo/topic', 'jimu/BaseWidget', './Tooltip-div', './DynamicDraw'], function (declare, lang, array, html, topic, BaseWidget) {
|
return declare([BaseWidget], {
|
baseClass: 'jimu-widget-DynamicRiver',
|
name: 'DynamicRiver',
|
riverWidth: 200,
|
riverHeight: 0.01,
|
speed: 10,
|
positions: [],
|
sideRes: null,
|
riverPrimitive: null,
|
material: null,
|
drawingPolyline: null,
|
startup: function startup() {
|
// this.inherited(arguments);
|
var self = this;
|
|
// 暴露在外的接口
|
topic.subscribe("openWin", lang.hitch(this, this.openWin));
|
|
this.map.scene.globe.depthTestAgainstTerrain = true;
|
//取消双击事件
|
this.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
|
$("#hzsm").click(function () {
|
DrawDynamicClampGround.startDrawingPolyline(self.map, function (cartesians) {
|
if (self.drawingPolyline != undefined) self.map.entities.remove(self.drawingPolyline);
|
var lineOpts = {
|
polyline: {
|
positions: cartesians,
|
clampToGround: true,
|
width: 3,
|
color: "#279a9a"
|
}
|
};
|
self.drawingPolyline = self.map.entities.add(lineOpts);
|
cartesians.splice(cartesians.length - 1, cartesians.length);
|
self.drawLines(cartesians);
|
});
|
});
|
|
$('#station').change(function () {
|
var water = $(this).val();
|
var zbd = {};
|
$.ajax({
|
url: "http://localhost:82/blade-ycreal/waterline/querylist?",
|
type: 'get',
|
dataType: 'json',
|
success: function success(result) {
|
for (var i = 0; i < result.data.length; i++) {
|
zbd[result.data[i].id] = result.data[i].zb;
|
}
|
if (water != "") {
|
self.queryLoc(zbd[water]);
|
} else {
|
$('#qcsmx').click();
|
}
|
}
|
});
|
});
|
|
$('#qcsmx').click(function () {
|
self.map.entities.remove(self.drawingPolyline);
|
self.map.scene.primitives.remove(self.riverPrimitive);
|
});
|
|
$("#hlkd").change(function (e) {
|
self.riverWidth = Number($(this).val());
|
self.resetPos();
|
});
|
$("#hlgd").change(function (e) {
|
self.riverHeight = Number($(this).val());
|
self.resetPos();
|
});
|
$("#sls").change(function (e) {
|
self.speed = Number($(this).val());
|
self.resetPos();
|
});
|
|
$("#smsz").click(function () {
|
self.offsetHeight(Number($("#bhz").val()), 5);
|
});
|
|
$("#smxj").click(function () {
|
self.offsetHeight(-Number($("#bhz").val()), 5);
|
});
|
|
$('.close-dynamicriver').click(function () {
|
var that = this;
|
$('#qcsmx').click();
|
$('.jimu-widget-DynamicRiver').hide();
|
topic.publish("Re/graph", {});
|
});
|
|
/*for(var e = [
|
[115.907543, 30.441563, 541.47],
|
[115.904337, 30.439412, 491.79],
|
[115.900612, 30.438483, 449.11],
|
[115.896375, 30.439377, 388.29],
|
[115.890586, 30.442215, 345.94],
|
[115.876946, 30.444641, 292.73]
|
], r = [], i = 0; i < e.length; i++) r.push(Cesium.Cartesian3.fromDegrees(e[i][0], e[i][1], e[i][2]));
|
this.positions = r;
|
this.init();*/
|
},
|
init: function init() {
|
this.prepareVertex();
|
if (this.sideRes) {
|
this.material = this.prepareMaterial();
|
this.riverPrimitive && this.map.scene.primitives.remove(this.riverPrimitive);
|
this.riverPrimitive = this.createPrimitive();
|
this.map.scene.primitives.add(this.riverPrimitive);
|
}
|
},
|
prepareVertex: function prepareVertex() {
|
if (this.positions.length > 0) {
|
this.sideRes = this._lines2Plane(this.positions, this.riverWidth, this.riverHeight);
|
}
|
},
|
setPositions: function setPositions(e) {
|
this.positions = e;
|
this.init();
|
},
|
resetPos: function resetPos() {
|
this.sideRes = this._lines2Plane(this.positions, this.riverWidth, this.riverHeight);
|
if (this.sideRes) {
|
this.material = this.prepareMaterial();
|
this.riverPrimitive && this.map.scene.primitives.remove(this.riverPrimitive);
|
this.riverPrimitive = this.createPrimitive();
|
this.map.scene.primitives.add(this.riverPrimitive);
|
}
|
},
|
drawLines: function drawLines(r) {
|
this.setPositions(r);
|
},
|
prepareMaterial: function prepareMaterial() {
|
var e = new Cesium.Material({
|
fabric: {
|
uniforms: {
|
image: "widgets/DynamicRiver/images/movingRiver.png",
|
alpha: 0.5,
|
moveVar: new Cesium.Cartesian3(50, 1, 100),
|
reflux: -1,
|
speed: this.speed,
|
move: true,
|
flipY: false
|
},
|
source: "czm_material czm_getMaterial(czm_materialInput materialInput) { \n czm_material material = czm_getDefaultMaterial(materialInput); \n vec2 st = materialInput.st;\n if(move){\n float r = sqrt((st.x-0.8)*(st.x-0.8) + (st.y-0.8)*(st.y-0.8));\n float r2 = sqrt((st.x-0.2)*(st.x-0.2) + (st.y-0.2)*(st.y-0.2));\n float z = cos(moveVar.x*r + czm_frameNumber/100.0*moveVar.y)/moveVar.z;\n float z2 = cos(moveVar.x*r2 + czm_frameNumber/100.0*moveVar.y)/moveVar.z;\n st += sqrt(z*z+z2*z2);\n st.s += reflux * czm_frameNumber/1000.0 * speed;\n st.s = mod(st.s,1.0);\n }\n if(flipY){\n st = vec2(st.t,st.s);\n }\n vec4 colorImage = texture2D(image, st);\n material.alpha = alpha;\n material.diffuse = colorImage.rgb; \n return material; \n }"
|
}
|
});
|
return e;
|
},
|
createPrimitive: function createPrimitive() {
|
var t = new Float64Array(this.sideRes.vertexs),
|
i = new Cesium.GeometryAttributes();
|
i.position = new Cesium.GeometryAttribute({
|
componentDatatype: Cesium.ComponentDatatype.DOUBLE,
|
componentsPerAttribute: 3,
|
values: t
|
}), i.st = new Cesium.GeometryAttribute({
|
componentDatatype: Cesium.ComponentDatatype.FLOAT,
|
componentsPerAttribute: 2,
|
values: this.sideRes.uvs
|
});
|
var r = new Cesium.Geometry({
|
attributes: i,
|
indices: this.sideRes.indexs,
|
primitiveType: Cesium.PrimitiveType.TRIANGLES,
|
boundingSphere: Cesium.BoundingSphere.fromVertices(t)
|
}),
|
n = new Cesium.GeometryInstance({
|
geometry: r
|
}),
|
o = new Cesium.RenderState();
|
return o.depthTest.enabled = !0, new Cesium.Primitive({
|
geometryInstances: n,
|
appearance: new Cesium.Appearance({
|
material: this.material,
|
renderState: o,
|
vertexShaderSource: "attribute vec3 position3DHigh;\n attribute vec3 position3DLow;\n attribute vec2 st;\n attribute float batchId;\n \n varying vec3 v_positionMC;\n varying vec3 v_positionEC;\n varying vec2 v_st;\n \n void main()\n {\n vec4 p = czm_computePosition();\n \n v_positionMC = position3DHigh + position3DLow; // position in model coordinates\n v_positionEC = (czm_modelViewRelativeToEye * p).xyz; // position in eye coordinates\n v_st = st;\n \n gl_Position = czm_modelViewProjectionRelativeToEye * p;\n }\n ",
|
fragmentShaderSource: "varying vec3 v_positionMC;\n varying vec3 v_positionEC;\n varying vec2 v_st;\n \n void main()\n {\n czm_materialInput materialInput;\n \n vec3 normalEC = normalize(czm_normal3D * czm_geodeticSurfaceNormal(v_positionMC, vec3(0.0), vec3(1.0)));\n #ifdef FACE_FORWARD\n normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);\n #endif\n \n materialInput.s = v_st.s;\n materialInput.st = v_st;\n materialInput.str = vec3(v_st, 0.0);\n \n // Convert tangent space material normal to eye space\n materialInput.normalEC = normalEC;\n materialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, materialInput.normalEC);\n \n // Convert view vector to world space\n vec3 positionToEyeEC = -v_positionEC;\n materialInput.positionToEyeEC = positionToEyeEC;\n \n czm_material material = czm_getMaterial(materialInput);\n \n #ifdef FLAT\n gl_FragColor = vec4(material.diffuse + material.emission, material.alpha);\n #else\n gl_FragColor = czm_phong(normalize(positionToEyeEC), material,czm_lightDirectionEC);\n #endif\n }\n "
|
})
|
});
|
},
|
offsetHeight: function offsetHeight(height, time) {
|
this.startDH(height, time);
|
},
|
startDH: function startDH(height, time) {
|
if (height && time && this.riverPrimitive) {
|
for (var i = this, r = 0, n = height / (20 * time), o = this.sideRes.self, s = new Cesium.Cartesian3(), l = 0, u = o.length; l < u; l++) {
|
var c = Cesium.Cartesian3.normalize(o[l], new Cesium.Cartesian3());
|
Cesium.Cartesian3.add(s, c, s);
|
}
|
Cesium.Cartesian3.normalize(s, s);
|
var h = Cesium.clone(this.riverPrimitive.modelMatrix);
|
this.dhEvent = function () {
|
if (Math.abs(r) <= Math.abs(height)) {
|
var t = Cesium.Cartesian3.multiplyByScalar(s, r, new Cesium.Cartesian3());
|
i.riverPrimitive.modelMatrix = Cesium.Matrix4.multiplyByTranslation(h, t, new Cesium.Matrix4());
|
} else i.map.clock.onTick.removeEventListener(i.dhEvent);
|
r += n;
|
}, this.map.clock.onTick.addEventListener(this.dhEvent);
|
}
|
},
|
//水面线转成水面
|
_lines2Plane: function _lines2Plane(positions, width, height) {
|
function n(point, height) {
|
if (!(point instanceof Cesium.Cartesian3)) return void console.log("请确认点是Cartesian3类型！");
|
if (!height || 0 == height) return void console.log("请确认高度是非零数值！");
|
var i = Cesium.Cartesian3.normalize(point, new Cesium.Cartesian3()),
|
r = new Cesium.Ray(point, i); //射线
|
return Cesium.Ray.getPoint(r, height);
|
}
|
|
function o(point, point1, height) {
|
var r = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(point1, point, new Cesium.Cartesian3()), new Cesium.Cartesian3()),
|
n = Cesium.Cartesian3.normalize(point, new Cesium.Cartesian3()),
|
o = Cesium.Cartesian3.cross(n, r, new Cesium.Cartesian3()),
|
a = Cesium.Cartesian3.cross(r, n, new Cesium.Cartesian3()),
|
l = new Cesium.Ray(point, o),
|
u = new Cesium.Ray(point, a);
|
return {
|
left: Cesium.Ray.getPoint(l, height),
|
right: Cesium.Ray.getPoint(u, height)
|
};
|
}
|
|
if (!positions || positions.length <= 1 || !width || 0 == width) return void console.log("请确认参数符合规则：数组长度大于1，宽高不能为0！");
|
for (var r = positions.length, a = [], l = [], u = width / 2, c = 0; c < r; c++) {
|
var h = void 0,
|
d = void 0,
|
f = void 0,
|
p = void 0,
|
m = void 0;
|
if (0 == c ? (h = positions[c], d = positions[c], f = positions[c + 1]) : c == r - 1 ? (h = positions[c - 1], d = positions[c], f = positions[c - 1]) : (h = positions[c - 1], d = positions[c], f = positions[c + 1]), 0 != height && (h = n(h, height), d = n(d, height), f = n(f, height)), h && d && f) {
|
var g = o(d, f, u);
|
if (p = g.left, m = g.right, 0 == c) {
|
a.push(p), l.push(m), a.push(p), l.push(m);
|
continue;
|
}
|
if (!(c < r - 1)) {
|
a.push(m), l.push(p), a.push(m), l.push(p);
|
continue;
|
}
|
a.push(p), l.push(m), g = o(d, h, u), p = g.left, m = g.right, a.push(m), l.push(p);
|
}
|
}
|
|
var v = [],
|
y = [];
|
if (a.length != 2 * r) return void console.log("计算左右侧点出问题！");
|
for (var _ = 0; _ < r; _++) {
|
var w = positions[_],
|
b = a[2 * _ + 0],
|
C = a[2 * _ + 1],
|
x = Cesium.Cartesian3.subtract(b, w, new Cesium.Cartesian3()),
|
P = Cesium.Cartesian3.subtract(C, w, new Cesium.Cartesian3()),
|
M = Cesium.Cartesian3.add(x, P, new Cesium.Cartesian3()),
|
E = Cesium.Cartesian3.add(w, M, new Cesium.Cartesian3());
|
v.push(Cesium.clone(E));
|
var T = l[2 * _ + 0],
|
S = l[2 * _ + 1];
|
x = Cesium.Cartesian3.subtract(T, w, new Cesium.Cartesian3()), P = Cesium.Cartesian3.subtract(S, w, new Cesium.Cartesian3()), M = Cesium.Cartesian3.add(x, P, new Cesium.Cartesian3()), E = Cesium.Cartesian3.add(w, M, new Cesium.Cartesian3()), y.push(Cesium.clone(E));
|
}
|
|
for (var O = [], D = [], k = [], A = [], R = [], F = 0; F < r; F++) {
|
var L = Cesium.EncodedCartesian3.fromCartesian(y[F]);
|
D.push(y[F].x), D.push(y[F].y), D.push(y[F].z), k.push(L.high.x), k.push(L.high.y), k.push(L.high.z), A.push(L.low.x), A.push(L.low.y), A.push(L.low.z), O.push(1, 1), F < r - 1 && (R.push(F + 2 * r), R.push(F + 1), R.push(F + 1 + r), R.push(F + 2 * r), R.push(F + 1 + r), R.push(r + F + 2 * r));
|
}
|
|
for (var I = 0; I < r; I++) {
|
var N = Cesium.EncodedCartesian3.fromCartesian(v[I]);
|
D.push(v[I].x), D.push(v[I].y), D.push(v[I].z), k.push(N.high.x), k.push(N.high.y), k.push(N.high.z), A.push(N.low.x), A.push(N.low.y), A.push(N.low.z), O.push(1, 0);
|
}
|
|
for (var V = 0; V < r; V++) {
|
var z = Cesium.EncodedCartesian3.fromCartesian(y[V]);
|
D.push(y[V].x), D.push(y[V].y), D.push(y[V].z), k.push(z.high.x), k.push(z.high.y), k.push(z.high.z), A.push(z.low.x), A.push(z.low.y), A.push(z.low.z), O.push(0, 1);
|
}
|
|
for (var H = 0; H < r; H++) {
|
var B = Cesium.EncodedCartesian3.fromCartesian(v[H]);
|
D.push(v[H].x), D.push(v[H].y), D.push(v[H].z), k.push(B.high.x), k.push(B.high.y), k.push(B.high.z), A.push(B.low.x), A.push(B.low.y), A.push(B.low.z), O.push(0, 0);
|
}
|
|
return {
|
left: v,
|
right: y,
|
self: positions,
|
vertexs: new Float32Array(D),
|
vertexsH: new Float32Array(k),
|
vertexsL: new Float32Array(A),
|
indexs: new Uint16Array(R),
|
uvs: new Float32Array(O)
|
};
|
},
|
onOpen: function onOpen() {
|
//面板打开的时候触发 （when open this panel trigger）
|
$.ajax({
|
url: "http://localhost:82/blade-ycreal/waterline/querylist?",
|
type: 'get',
|
dataType: 'json',
|
success: function success(result) {
|
var sstr = '<option value="">请选择</option>';
|
for (var i = 0; i < result.data.length; i++) {
|
sstr += "<option value='" + result.data[i].id + "'>" + result.data[i].waterline + "</option>";
|
$("#station").html(sstr);
|
}
|
}
|
});
|
},
|
openWin: function openWin() {
|
var self = this;
|
var code = "";
|
var zbd = {};
|
|
$.ajax({
|
url: "http://localhost:82/blade-ycreal/waterline/querylist?",
|
type: 'get',
|
dataType: 'json',
|
success: function success(result) {
|
$.ajax({
|
url: "http://localhost:82/blade-ycreal/waterline/getwater?",
|
type: 'get',
|
dataType: 'json',
|
data: {
|
id: $('#loc_openWin').val()
|
},
|
success: function success(res) {
|
code = res;
|
var sstr = '<option value="">请选择</option>';
|
for (var i = 0; i < result.data.length; i++) {
|
zbd[result.data[i].id] = result.data[i].zb;
|
sstr += "<option value='" + result.data[i].id + "'>" + result.data[i].waterline + "</option>";
|
$("#station").html(sstr);
|
}
|
var select = document.getElementById("station");
|
for (var i = 0; i < select.options.length; i++) {
|
if (select.options[i].value == code) {
|
select.options[i].selected = true;
|
//self.queryLoc(zbd[select.options[i].value]);
|
}
|
}
|
}
|
});
|
}
|
});
|
},
|
|
queryLoc: function queryLoc(item) {
|
var self = this;
|
var cartesians = [];
|
for (var i = 1; i < item.length; i++) {
|
cartesians.push(Cesium.Cartesian3.fromDegrees(Number(item[i].lng), Number(item[i].lat), Number(item[i].water)));
|
}
|
if (self.drawingPolyline != undefined) self.map.entities.remove(self.drawingPolyline);
|
var lineOpts = {
|
polyline: {
|
positions: cartesians,
|
clampToGround: true,
|
width: 3,
|
color: "#279a9a"
|
}
|
};
|
self.drawingPolyline = self.map.entities.add(lineOpts);
|
cartesians.splice(cartesians.length - 1, cartesians.length);
|
self.drawLines(cartesians);
|
},
|
|
onClose: function onClose() {
|
//面板关闭的时候触发 （when this panel is closed trigger）
|
},
|
|
onMinimize: function onMinimize() {
|
this.resize();
|
},
|
|
onMaximize: function onMaximize() {
|
this.resize();
|
},
|
|
resize: function resize() {},
|
|
destroy: function destroy() {
|
//销毁的时候触发
|
//todo
|
//do something before this func
|
this.inherited(arguments);
|
}
|
|
});
|
});
|
