剖面分析集成

zengh

2020-11-06 d1d62b3a7fa9f514c55edfc8b7c845fdc35f76d3

剖面分析集成

 widgets/MapSection/SectionChart.js

New file
@@ -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);
            }
        });
    });


 widgets/MapSection/Widget.html

New file
@@ -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>

 widgets/MapSection/Widget.js

New file
@@ -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;
        }
    });
});

 widgets/MapSection/css/style.css

New file
@@ -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;
}

 widgets/MapSection/images/icon.png

 widgets/MapSection/manifest.json

New file
@@ -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
  }
}

 widgets/MapSection/nls/es/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "MapSection"
  })
);

 widgets/MapSection/nls/strings.js

New file
@@ -0,0 +1,7 @@
define({
  root: ({ 
    _widgetLabel: "MapSection"
  }), 
  "es": 1, 
  "zh-cn": 1
});

 widgets/MapSection/nls/zh-cn/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "剖面分析"
  })
);