From d1d62b3a7fa9f514c55edfc8b7c845fdc35f76d3 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Fri, 06 Nov 2020 17:45:41 +0800
Subject: [PATCH] 剖面分析集成
---
widgets/MapSection/Widget.js | 257 +++++++++++++++++++++++++
widgets/MapSection/Widget.html | 6
widgets/MapSection/manifest.json | 18 +
widgets/MapSection/nls/strings.js | 7
widgets/MapSection/nls/es/strings.js | 5
widgets/MapSection/css/style.css | 61 ++++++
widgets/MapSection/nls/zh-cn/strings.js | 5
widgets/MapSection/SectionChart.js | 236 +++++++++++++++++++++++
widgets/MapSection/images/icon.png | 0
9 files changed, 595 insertions(+), 0 deletions(-)
diff --git a/widgets/MapSection/SectionChart.js b/widgets/MapSection/SectionChart.js
new file mode 100644
index 0000000..d2087cb
--- /dev/null
+++ b/widgets/MapSection/SectionChart.js
@@ -0,0 +1,236 @@
+define([
+ 'dojo/_base/declare',
+ 'dojo/_base/lang',
+ 'dojo/_base/html',
+ 'dijit/_WidgetBase',
+ 'dijit/_TemplatedMixin',
+ 'dojo/on',
+ 'dojo/mouse',
+ 'dojo/query',
+ 'dojo/request/xhr',
+ 'dojo/topic',
+ 'dojo/json',
+ "dojo/dom-construct",
+ "libs/echarts/v4/echarts.min"
+ ],
+ function (declare, lang, html, _WidgetBase, _TemplatedMixin,
+ on, mouse, query, xhr, topic, JSON,domConstruct,echarts) {
+ return declare([_WidgetBase, _TemplatedMixin], {
+
+ templateString: '<div style="width:100%;height:100%;"><div style="width:100%;height:100%;" >' +
+ '<div data-dojo-attach-point="boxNode" style="width:100%;height:285px;border-top:0px solid #caccdd" ></div>' +
+ '<a data-dojo-attach-point="down" download="downlaod.csv" style="position:absolute;right:10px;top:0;height:30px;border-top:0px solid #caccdd" >下载数据</a>' +
+ '</div>' +
+ '</div>',
+
+ constructor: function (options, dom) {
+
+ },
+ Rad:function(d){
+ return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
+ },
+ //计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
+ GetDistance:function(lat1,lng1,lat2,lng2){
+ var radLat1 = this.Rad(lat1);
+ var radLat2 = this.Rad(lat2);
+ var a = radLat1 - radLat2;
+ var b = this.Rad(lng1) - this.Rad(lng2);
+ var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
+ Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
+ s = s *6378.137 ;// EARTH_RADIUS;
+ s = Math.round(s * 10000) / 10000; //输出为公里
+ return s;
+ },
+ modifyT:function(number,level){
+ level = level||1;
+ try{
+ //判断正数负数
+ number = number.toString().replace(/\$|\,/g, '');
+ if (isNaN(number)){
+ number = "0";
+ }
+ }catch(e){
+ return '';
+ }
+ var sign = (number == (number = Math.abs(number)));
+ //返回的是K M G T
+ var valInfo = null;
+ if (number != null && typeof(number) != "undefined") {
+ var numInput = parseFloat(number);
+ valInfo = numInput/level;
+
+ } else {
+ return '';
+ }
+
+ if(valInfo>0&&valInfo<1){//小数
+ valInfo = valInfo.toPrecision(2);
+ }else{//大于1
+ if(valInfo>=1&&valInfo<100){
+ valInfo = Number(valInfo.toPrecision(3));
+ }else if(valInfo>=100&&valInfo<=1000){
+ valInfo = Number(valInfo.toPrecision(3));
+ }else {
+ valInfo = (valInfo+"");
+ valInfo = valInfo.split(".")[0];
+ }
+ }
+
+ return (sign?"":"-")+valInfo+"";
+
+ },
+ isResize:true,
+ postCreate: function () {
+ this.inherited(arguments);
+ this.query();
+
+ this.step = 0;
+ var lg = this.GetDistance(this.oList[0].lttd,this.oList[0].lgtd,this.oList[99].lttd,this.oList[99].lgtd);
+ this.step = lg/99;
+ this.step = Number(this.modifyT(this.step));
+ var str = "";
+ var sumDyp = 0;
+ for(var k=0;k<this.oList.length;k++){
+ var item = this.oList[k];
+ if(k==0){
+ str+= "0,"+item.lgtd+","+item.lttd+","+item.height+"\n";
+ }else{
+ sumDyp+=this.step;
+ str+= this.modifyT(sumDyp)+","+item.lgtd+","+item.lttd+","+item.height+"\n";
+ }
+
+ }
+
+ str = encodeURIComponent(str);
+
+ this.down.href = "data:text/csv;charset=utf-8,\ufeff"+str;
+
+ },
+
+ query: function () {
+ setTimeout(lang.hitch(this,function(){
+ this.createEChart(this.list);
+ }),1000);
+ },
+ startup: function () {
+ this.inherited(arguments);
+ },
+ createEChart: function (list) {
+ domConstruct.empty(this.boxNode);//清空子节点
+
+ if (list.length>0){
+
+ }else{
+ domConstruct.empty(this.boxNode);
+ var content = "暂无相关站点数据";
+ var label2 = html.create('div', {
+ 'class': 'paddCenter',
+ innerHTML: content
+ }, this.boxNode);
+
+ return;
+ }
+
+ var ids = [];
+ var heights = [];
+ var sumDyp = 0;
+ var index = 1;
+ for (var i = 2; i < list.length; i++) {
+ var item = list[i];
+ heights.push(item.toFixed(2));
+ if(i==2){
+ ids.push(0);
+ }else{
+ sumDyp+=this.step;
+ ids.push(this.modifyT(sumDyp));
+ }
+ i++;
+ i++;
+ index++;
+ }
+
+ // 基于准备好的dom，初始化echarts图表
+ var myChart = echarts.init(this.boxNode);
+
+ var option = {
+ title: {
+ x:"center",
+ text: "剖面图(m)",
+ textStyle:{
+ fontSize: 14,
+ fontWeight: 'bolder',
+ color:'gray'
+ },
+ subtextStyle:{
+ fontSize: 10
+ }
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ dataZoom: {
+ show: false,
+ realtime: false,//true为拖动的时候就变化
+ start: 0,
+ end: 100//设置成整体样式的某个位置
+ },
+ grid:{
+ y2:25,y:25,x2:50,x:50
+ },
+
+ toolbox: {
+ show:false,
+ feature: {
+ mark : {show: true},
+ dataView : {show: true, readOnly: false},
+ magicType : {show: true, type: ['line', 'bar']},
+ restore : {show: true},
+ saveAsImage: {show: true}
+ }
+ },
+ calculable: true,
+ xAxis: [
+ {
+ type: 'category',
+ data: ids,
+ name: 'km'
+ }
+ ],
+ yAxis : {
+ type: 'value',
+ scale:true,
+ boundaryGap: [0, '100%']
+ },
+
+ series: [
+ {
+ name:'高程',
+ type:'line',
+ smooth:true,
+ symbol: 'none',
+ itemStyle: {
+ normal: {
+ color: 'rgb(255, 70, 131)'
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgb(255, 158, 68)'
+ }, {
+ offset: 1,
+ color: 'rgb(255, 70, 131)'
+ }])
+ }
+ },
+ data: heights
+ }
+ ]
+ };
+
+ myChart.setOption(option);
+ }
+ });
+ });
+
diff --git a/widgets/MapSection/Widget.html b/widgets/MapSection/Widget.html
new file mode 100644
index 0000000..b2531a2
--- /dev/null
+++ b/widgets/MapSection/Widget.html
@@ -0,0 +1,6 @@
+<div>
+ <!-- <a class="fa fa-area-chart" style=" padding: 4px;
+ cursor: pointer;
+ font-size: 19px;
+ color: white;" title="获取剖面图" data-dojo-attach-event="click:click"></a> -->
+</div>
\ No newline at end of file
diff --git a/widgets/MapSection/Widget.js b/widgets/MapSection/Widget.js
new file mode 100644
index 0000000..a16643a
--- /dev/null
+++ b/widgets/MapSection/Widget.js
@@ -0,0 +1,257 @@
+///////////////////////////////////////////////////////////////////////////
+// Copyright © 2018 NarutoGIS. All Rights Reserved.
+// 模块描述:获取两点间地形剖面
+///////////////////////////////////////////////////////////////////////////
+define([
+ "dojo/_base/declare",
+ "dojo/_base/lang",
+ 'dojo/_base/html',
+ "dojo/_base/fx",
+ 'jimu/BaseWidget',
+ "dojo/topic",
+ "dojo/Deferred",
+ "dojo/on",
+ 'jimu/dijit/Popup',
+ "./SectionChart"
+
+],function(
+ declare,
+ lang,
+ html,
+ fx,
+ BaseWidget,
+ topic,
+ Deferred,
+ on,
+ Popup,
+ SectionChart
+
+){
+ return declare("MapSection", [BaseWidget],{
+ baseClass:"demo-widgets-MapSection",
+ postCreate:function(){
+ this.inherited(arguments);
+
+ this._tooltip = this.createTooltip(this.map.cesiumWidget.container);
+ },
+ createTooltip: function (frameDiv) {
+
+ var tooltip = function(frameDiv) {
+
+ var div = document.createElement('DIV');
+ div.className = "twipsy right";
+
+ var arrow = document.createElement('DIV');
+ arrow.className = "twipsy-arrow";
+ div.appendChild(arrow);
+
+ var title = document.createElement('DIV');
+ title.className = "twipsy-inner";
+ div.appendChild(title);
+
+ this._div = div;
+ this._title = title;
+
+ // add to frame div and display coordinates
+ frameDiv.appendChild(div);
+ }
+
+ tooltip.prototype.setVisible = function(visible) {
+ this._div.style.display = visible ? 'block' : 'none';
+ }
+
+ tooltip.prototype.showAt = function(position, message) {
+ if(position && message) {
+ this.setVisible(true);
+ this._title.innerHTML = message;
+ this._div.style.left = position.x + 10 + "px";
+ this._div.style.top = (position.y - this._div.clientHeight / 2) + "px";
+ }
+ }
+
+ return new tooltip(frameDiv);
+ },
+ destroy:function(){
+
+ this.inherited(arguments);
+ },
+ // click:function(){
+ // this.active = !this.active;
+ // if(this.active){
+ // this._tooltip.setVisible(true);
+ // }else{
+ // this._tooltip.setVisible(false);
+ // }
+ // this.clearEntity();
+ // },
+ onOpen: function () {
+ this.map.scene.globe.baseColor = Cesium.Color.BLACK;
+ $($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[0]).children('div:eq(3)').trigger('click');
+ this.active = true;
+ this.clearEntity();
+ this._tooltip.setVisible(true);
+
+
+ },
+ onClose: function () {
+ this.active = false;
+ this.clearEntity();
+ this._tooltip.setVisible(false); },
+ active:false,
+ startup:function(){
+ this.inherited(arguments);
+
+ var handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
+
+ handler.setInputAction(
+ lang.hitch(this,function (movement) {
+ if(!this.active)return;
+ var ellipsoid = window.viewer.scene.globe.ellipsoid;
+ var ellipsoid = Cesium.Ellipsoid.WGS84;
+// var cartesian = window.viewer.scene.camera.pickEllipsoid(movement.position, ellipsoid);//两种的经纬度获取的不一样
+ var pickRay = window.viewer.scene.camera.getPickRay(movement.position);
+ var cartesian = window.viewer.scene.globe.pick(pickRay, window.viewer.scene);
+
+ if (cartesian) {
+
+ var cartographic = ellipsoid.cartesianToCartographic(cartesian);
+ var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);//.toFixed(2);
+ var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);//.toFixed(2);
+
+ this.points.push({"lgtd":longitudeString,"lttd":latitudeString});
+
+ if(this.points.length==2){
+ //计算
+ var points = this.createHundryPoints(this.points);
+ //弹出
+ this.getData(points);
+ this.points = [];
+ this.active = false;
+ this._tooltip.setVisible(false);
+ this.bill2 = window.viewer.entities.add({
+ position : Cesium.Cartesian3.fromDegrees(longitudeString, latitudeString ),
+ billboard : {
+ image : "images/marker_green.png",
+ pixelOffset: new Cesium.Cartesian2(0, 0),
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY
+ }
+ });
+ return;
+ }
+ this.bill1 = window.viewer.entities.add({
+ position : Cesium.Cartesian3.fromDegrees(longitudeString, latitudeString ),
+ billboard : {
+ image : "images/marker_green.png",
+ pixelOffset: new Cesium.Cartesian2(0, 0),
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY
+ }
+ });
+ }
+
+ }), Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+ handler.setInputAction(
+ lang.hitch(this,function (movement) {
+ if(!this.active)return;
+ if(this.points.length==0){
+ this._tooltip.showAt(movement.endPosition, "请获取起点");
+ return;
+ }
+ this._tooltip.showAt(movement.endPosition, "点击结束");
+
+ }), Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+ },
+ clearEntity:function(){
+ window.viewer.entities.remove(this.bill1);
+ window.viewer.entities.remove(this.bill2);
+ window.viewer.entities.remove(this.line);
+ },
+ createHundryPoints:function(list){
+
+ var lgtd1 = list[0].lgtd;
+ var lgtd100 = list[1].lgtd;
+ var lgtdStep = (lgtd100-lgtd1)/1000;
+
+ var lttd1 = list[0].lttd;
+ var lttd100 = list[1].lttd;
+ var lttdStep = (lttd100-lttd1)/1000;
+ var ary = [];
+ for(var i=0;i<1000;i++){
+ var lgtd = lgtd1 +(lgtdStep*i);
+ var lttd = lttd1 +(lttdStep*i);
+ ary.push({"id":i,"lgtd":lgtd,"lttd":lttd});
+ }
+
+ return ary;
+ },
+ points:[],
+ getData:function(ary){
+ var mappints = [];
+ for(var j=0;j<ary.length;j++){
+ var pt = ary[j];
+ mappints.push({lgtd:pt.lgtd,lttd:pt.lttd,height:0});
+ }
+ //获取高程去
+ this.makeChange(mappints).then(lang.hitch(this,function(list){
+ var ptsAry = [];
+ var numbers_lgtd=[];
+ var numbers_lttd=[];
+ for(var j=0;j<list.length;j++){
+ var pt = list[j];
+ ptsAry.push(Number(pt.lgtd));
+ ptsAry.push(Number(pt.lttd));
+ ptsAry.push(Number(pt.height));
+
+ numbers_lgtd.push(Number(pt.lgtd));
+ numbers_lttd.push(Number(pt.lttd));
+ }
+
+
+ this.line = window.viewer.entities.add({
+ polyline : {
+ positions : Cesium.Cartesian3.fromDegreesArrayHeights(ptsAry),
+ width : 3,
+ material : new Cesium.PolylineOutlineMaterialProperty({
+ color : Cesium.Color.ORANGE,
+ outlineWidth : 1,
+ outlineColor : Cesium.Color.BLACK
+ }),
+ clampToGround: true
+ }
+ });
+
+ var panel = new SectionChart({list:ptsAry,oList:list});
+ new Popup({
+ content: panel,
+ titleLabel: "地形剖面图",
+ width: 650,
+ height: 370,
+ buttons: [],
+ onClose:lang.hitch(this,function(){
+ return true;
+ })
+ });
+ }));
+ },
+ makeChange:function(datas){
+ var datas = datas;
+ var def = new Deferred();
+ var tIds = [];
+ var pos = [];
+ for(var i=0;i<datas.length;i++){
+ var item = datas[i];
+ tIds.push(item.id);
+ pos.push(Cesium.Cartographic.fromDegrees(item.lgtd, item.lttd));
+ }
+ Cesium.sampleTerrain(window.viewer.terrainProvider, 9, pos).then(function (pos) {//去获取高程
+ for (var i=0; i<tIds.length; i++) {
+ datas[i].height = pos[i].height;
+ }
+ def.resolve(datas);
+ });
+ return def;
+ }
+ });
+});
\ No newline at end of file
diff --git a/widgets/MapSection/css/style.css b/widgets/MapSection/css/style.css
new file mode 100644
index 0000000..aa79949
--- /dev/null
+++ b/widgets/MapSection/css/style.css
@@ -0,0 +1,61 @@
+.demo-widgets-MapSection {
+ width: 0!important;
+ height: 0 !important;
+ margin:2px;
+ background: #303336;
+ border: 1px solid #444;
+ text-align: center;
+ border-radius: 4px;
+ padding: 1px;
+}
+
+.twipsy {
+ display: block;
+ position: absolute;
+ visibility: visible;
+ max-width: 200px;
+ min-width: 100px;
+ padding: 5px;
+ font-size: 11px;
+ z-index: 1000;
+ opacity: 0.8;
+ -khtml-opacity: 0.8;
+ -moz-opacity: 0.8;
+ filter: alpha(opacity=80);
+}
+
+.twipsy.left .twipsy-arrow {
+ top: 50%;
+ right: 0;
+ margin-top: -5px;
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-left: 5px solid #000000;
+}
+
+.twipsy.right .twipsy-arrow {
+ top: 50%;
+ left: 0;
+ margin-top: -5px;
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-right: 5px solid #000000;
+}
+
+.twipsy-inner {
+ padding: 3px 8px;
+ background-color: #000000;
+ color: white;
+ text-align: center;
+ max-width: 200px;
+ text-decoration: none;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+
+.twipsy-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
\ No newline at end of file
diff --git a/widgets/MapSection/images/icon.png b/widgets/MapSection/images/icon.png
new file mode 100644
index 0000000..527ec04
--- /dev/null
+++ b/widgets/MapSection/images/icon.png
Binary files differ
diff --git a/widgets/MapSection/manifest.json b/widgets/MapSection/manifest.json
new file mode 100644
index 0000000..5f2a6b3
--- /dev/null
+++ b/widgets/MapSection/manifest.json
@@ -0,0 +1,18 @@
+{
+ "name": "MapSection",
+ "2D": true,
+ "3D": true,
+ "platform": "HTML",
+ "version": "2.10",
+ "wabVersion": "2.10",
+ "author": "NarutoGIS",
+ "description": "",
+ "copyright": "",
+ "license": "",
+ "properties": {
+ "inPanel": false,
+ "hasUIFile": true,
+ "hasConfig": false,
+ "supportMultiInstance": false
+ }
+}
\ No newline at end of file
diff --git a/widgets/MapSection/nls/es/strings.js b/widgets/MapSection/nls/es/strings.js
new file mode 100644
index 0000000..bdc0118
--- /dev/null
+++ b/widgets/MapSection/nls/es/strings.js
@@ -0,0 +1,5 @@
+define(
+ ({
+ _widgetLabel: "MapSection"
+ })
+);
\ No newline at end of file
diff --git a/widgets/MapSection/nls/strings.js b/widgets/MapSection/nls/strings.js
new file mode 100644
index 0000000..8849067
--- /dev/null
+++ b/widgets/MapSection/nls/strings.js
@@ -0,0 +1,7 @@
+define({
+ root: ({
+ _widgetLabel: "MapSection"
+ }),
+ "es": 1,
+ "zh-cn": 1
+});
\ No newline at end of file
diff --git a/widgets/MapSection/nls/zh-cn/strings.js b/widgets/MapSection/nls/zh-cn/strings.js
new file mode 100644
index 0000000..1addcc6
--- /dev/null
+++ b/widgets/MapSection/nls/zh-cn/strings.js
@@ -0,0 +1,5 @@
+define(
+ ({
+ _widgetLabel: "剖面分析"
+ })
+);
\ No newline at end of file
--
Gitblit v1.9.3