[信令]添加信令相关功能

Jin Lei

2023-12-23 5df6240f6cd274e698d1e6358443364d543c126c

[信令]添加信令相关功能

 index.html

@@ -61,6 +61,7 @@
  <script src="./static/SmartEarthSDK/Workers/jquery-2.0.3.js"></script>
  <script src="./static/SmartEarthSDK/SmartEarth.min.js"></script> -->

  
  <script src="./static/SmartEarthSDK/Workers/jquery.xml2json.js"></script>
  <script src="./static/SmartEarthSDK/Workers/layui/layui.all.js"></script>
  <script src="./static/SmartEarthSDK/Workers/TreeTool.js"></script>
@@ -74,6 +75,13 @@
  <script src="./static/rsa.min.js"></script>


  <script src="./static/Signalling/js/heatmap.min.js"></script>
  <script src="./static/Signalling/js/Color.js"></script>
  <script src="./static/Signalling/js/DataManager.js"></script>
  <script src="./static/Signalling/js/DataRender.js"></script>
  <script src="./static/Signalling/js/DataGrid.js"></script>


  <script src="./static/othersMap/othersMap.js"></script>
  <script type="text/javascript">
    // å¯ä»¥è¿›è¡Œif判断区分不用域名

 src/components/index.vue

@@ -46,6 +46,7 @@
      <leftpanel ref="Left" />
      <menupanel />
      <bottommenu ref="bottommenu" />
      <signalling v-if="signallingShow"></signalling>
      <setting v-if="showSetting" />
      <qycharts v-if="$store.state.qyEchartsShow" />
    </div>
@@ -63,7 +64,7 @@
import qycharts from "@/components/bottom/qycharts";
import menupanel from "@/components/menu/index";
import setting from "@/components/menu/tools/setting";

import signalling from "@/components/menu/signalling";
import bottommenu from "@/components/menu/bottom-menu";
import { mapState, mapMutations } from "vuex";

@@ -81,6 +82,7 @@
    setting,
    qycharts,
    History,
    signalling
  },
  data() {
    return {
@@ -94,6 +96,7 @@
      offset: "0%",
      tooltipInfo: "请稍后。。。",
      tooltipShow: false,
      signallingShow:false,
      switchKey: 0,
      // viewer1Show: false,
    };

 src/components/login.vue

@@ -4,13 +4,8 @@
      <img src="../assets/img/login/background.png" alt="" />
    </div>
    <div class="login-box">
      <el-form
        class="loginBox"
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        @keyup.enter.native="submitForm('loginForm')"
      >
      <el-form class="loginBox" :model="loginForm" :rules="rules" ref="loginForm"
        @keyup.enter.native="submitForm('loginForm')">
        <el-form-item prop="loginname">
          <div class="user-box">
            <div class="imgbox">
@@ -23,14 +18,8 @@
              <img src="../assets/img/login/line.png" alt="" />
            </div>
            <div class="inputbox">
              <el-input
                v-model="loginForm.loginname"
                placeholder="输入您的账号"
                class="nobr"
                size="meddle"
                autocomplete="off"
                clearable
              >
              <el-input v-model="loginForm.loginname" placeholder="输入您的账号" class="nobr" size="meddle" autocomplete="off"
                clearable>
              </el-input>
            </div>
          </div>
@@ -47,14 +36,8 @@
              <img src="../assets/img/login/line.png" alt="" />
            </div>
            <div class="inputbox">
              <el-input
                show-password
                v-model="loginForm.password"
                placeholder="输入您的密码"
                class="nobr"
                autocomplete="off"
                clearable
              >
              <el-input show-password v-model="loginForm.password" placeholder="输入您的密码" class="nobr" autocomplete="off"
                clearable>
              </el-input>
            </div>
          </div>
@@ -106,7 +89,7 @@
      },
    };
  },
  created() {},
  created() { },
  mounted() {
    window.addEventListener("keydown", this.keyDown);
    // if (
@@ -139,54 +122,58 @@
    },
    // è´¦å·å¯†ç ç™»å½•
    submitForm(formName) {
      // this.$router.push("/index");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
      let tokenData = "1111111111111";
      let times = new Date().getTime();
      window.localStorage.setItem("TokenTime", times);
      window.localStorage.setItem("TokenKey", tokenData);
      this.$router.push("/index");
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     const loading = this.$loading({
      //       lock: true,
      //       text: "Loading",
      //       spinner: "el-icon-loading",
      //       background: "rgba(0, 0, 0, 0.7)",
      //     });

          login({
            username: this.loginForm.loginname,
            password: this.loginForm.password,
          })
            .then((res) => {
              loading.close();
              if (res.code !== 200) {
                this.$message.error(res.msg);
              } else {
                let tokenData = res.token;
                let times = new Date().getTime();
                window.localStorage.setItem("TokenTime", times);
                window.localStorage.setItem("TokenKey", tokenData);
                this.$router.push("/index");
              }
            })
            .catch((error) => {
              //网络超时异常处理
              loading.close();
              if (
                error.code === "ECONNABORTED" ||
                error.message === "Network Error" ||
                error.message.includes("timeout")
              ) {
                this.$message.error("请求超时，请稍后重试");
              }
              return Promise.resolve(error.response);
              // reject(error);
            });
      //     login({
      //       username: this.loginForm.loginname,
      //       password: this.loginForm.password,
      //     })
      //       .then((res) => {
      //         loading.close();
      //         if (res.code !== 200) {
      //           this.$message.error(res.msg);
      //         } else {
      //           let tokenData = res.token;
      //           let times = new Date().getTime();
      //           window.localStorage.setItem("TokenTime", times);
      //           window.localStorage.setItem("TokenKey", tokenData);
      //           this.$router.push("/index");
      //         }
      //       })
      //       .catch((error) => {
      //         //网络超时异常处理
      //         loading.close();
      //         if (
      //           error.code === "ECONNABORTED" ||
      //           error.message === "Network Error" ||
      //           error.message.includes("timeout")
      //         ) {
      //           this.$message.error("请求超时，请稍后重试");
      //         }
      //         return Promise.resolve(error.response);
      //         // reject(error);
      //       });

          // //如果登录失败，需要刷新验证码的
          // this.$refs.refresh.createdCode();
          // this.validCode = ""; //清空验证码输入框的内容
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
      //     // //如果登录失败，需要刷新验证码的
      //     // this.$refs.refresh.createdCode();
      //     // this.validCode = ""; //清空验证码输入框的内容
      //   } else {
      //     // console.log("error submit!!");
      //     return false;
      //   }
      // });
    },
    // CA免密登录
    passCAFree() {
@@ -308,9 +295,11 @@
  height: 60%;
  margin-left: 74px;
}

.imgbox img {
  width: 100%;
}

.titlebox {
  color: #fff;
  font-size: 18px;
@@ -364,7 +353,7 @@
  padding: 0 !important;
}

.el-form >>> .el-form-item__error {
.el-form>>>.el-form-item__error {
  left: 150px;
  top: 106%;
}
@@ -417,7 +406,7 @@
  bottom: -160px;
  animation: square 20s linear infinite;
  border-radius: 45%;
  box-shadow: 0px 0px 10px rgba(255,255,255,0.5);
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
}

.bg-squares li:nth-child(1) {

 src/components/map/viewer.vue

@@ -169,6 +169,7 @@
        }
      );
      window.Viewer = sgworld._Viewer;
      window.viewer = sgworld._Viewer;
      sgworld._Viewer.scene.moon.show = false;
      window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer, Cesium);
      Viewer.shadows = false;

 src/components/menu/bottom-menu.vue

@@ -90,6 +90,8 @@
        </el-form-item>
      </el-form>
    </div>


  </div>
</template>

@@ -294,7 +296,9 @@

import axios from "axios";
export default {
  components: {},
  components: {

  },
  name: "bottom-menu",
  data() {
    return {
@@ -303,6 +307,7 @@
      isShowSPRH: true,
      csbjShow: false,
      jxmxShow: false,
    
      romanOption: [
        { name: "核心区" },
        { name: "景观绿地" },
@@ -582,52 +587,17 @@
    shoujixinling() {
      this.switchMenu(3);
      if (this.isShowSjxl) {

        const loading = this.$loading({
          lock: true,
          text: "手机信令数据加载中，请稍后",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        setTimeout(() => {
          loading.close();
        }, 1500);
        this.isShowSjxl = false;
        let heatMapUrl = URLInCode.heatMapUrl;
        sgworld.Core.getJSON(heatMapUrl, (data) => {
          let res = [];
          data.features.forEach((item) => {
            let obj = {
              x: item.properties["center_x"],
              y: item.properties["center_y"],
              value: item.properties["sd_total"],
              radius: 50,
            };
            res.push(obj);
          });
          // //创建热力图
          heatMapItem = sgworld.Creator.addHeatMap("热力图", {
            type: "Heatmap", // çƒ­åŠ›å›¾ç±»åž‹ã€Heatmap/HeatmapGL】（可选）
            sourceData: res,
            radius: 7,
            gradient: {
              ".3": "blue",
              ".5": "green",
              ".7": "yellow",
              ".95": "red",
            },
            tooltip: true, // tooltip显示数值
          });
        });
        this.$parent.signallingShow = true;
      } else {
        this.closeSjxl();
      }
    },
    closeSjxl() {
      if (heatMapItem) {
      
        this.isShowSjxl = true;
        heatMapItem.deleteObject();
      }
        this.$parent.signallingShow = false;

    },
    // historyHandle() {
    //   this.$store.commit("showHistory", true);

 src/components/menu/signalling.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,239 @@
<template>
    <div class="signalling">
        <div class="signalling_describe">单位：万人</div>
        <div>
            <ul class="signalling_ul">
                <li class="signalling_node" :class="{ signalling_active: i == selectIndex }" v-for="(item, i) in time"
                    @click="changeTime(i)">
                    <div class="signalling_value">{{ Math.round(value[i] / 10000) }}</div>
                    <div class="signalling_symbol"></div>
                    <div class="signalling_time">{{ item }}</div>
                </li>
            </ul>
        </div>
        <div class="signalling_play" @click="signallingPlay()">
            <img src="~@/assets/img/new/rightArrow.png" />
        </div>
        <div class="signalling_type">
            <el-radio-group v-model="type" @change="changeType">
                <el-radio-button label="热力"></el-radio-button>
                <el-radio-button label="柱状"></el-radio-button>
                <el-radio-button label="网格"></el-radio-button>
            </el-radio-group>
        </div>
    </div>
</template>
<style>
.signalling_type .el-radio-group {
    line-height: 0px !important;
    color: white !important;
}

.signalling_type .el-radio-group {
    height: 30px !important;
}

.signalling_type .el-radio-button__inner {
    background: rgba(0, 132, 255, 0.8) !important;
    border: none !important;
    color: white !important;
    height: 30px !important;

}



.signalling_type .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background: rgba(255, 136, 0, 0.8) !important;
}
</style>
<style scoped>
.signalling {
    position: absolute;
    left: 50%;
    margin-left: -650px;
    bottom: 230px;
    color: white;
    width: 1300px;
    z-index: 9999999;
    pointer-events: all;
}

.signalling_type {

    position: absolute;
    right: 130px;
    top: 120px;
}

.signalling_describe {
    position: absolute;
    right: 0px;
    top: 110px;
}

.signalling_play {
    position: absolute;
    left: 0px;
    top: 110px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 32px;
    border: 1px solid #fff;
}

.signalling_play img {
    width: 32px;
    height: 32px;
    margin: 8px 6px 8px 10px;

}

.signalling_ul {}

.signalling_node {
    float: left;
    width: 40px;
    margin: 2.5px 7px;
    list-style: none;
    cursor: pointer;

}

.signalling_value,
.signalling_symbol,
.signalling_time {
    width: 40px;
    text-align: center;

}

.signalling_symbol {
    height: 5px;
    background-color: rgb(0, 132, 255);
    border-radius: 2px;
}

.signalling_node:hover .signalling_symbol {
    background-color: rgb(255, 136, 0) !important;
}

.signalling_node:hover {
    color: rgb(255, 136, 0) !important;
}

.signalling_active {
    color: rgb(255, 136, 0) !important;
}

.signalling_active .signalling_symbol {
    background-color: rgb(255, 136, 0) !important;
}
</style>
<script>

export default {
    name: "signalling",
    components: {

    },
    data() {
        return {
            type: "热力",
            play: false,
            selectIndex: 0,
            time: ["00:00", "00:30", "01:00", "01:30", "02:00", "02:30", "03:00", "03:30", "04:00", "04:30", "05:00", "05:30", "06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"],
            value: [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18, 19, 19, 20, 20, 21, 21, 22, 22, 23, 23]
        };
    },
    beforeDestroy() {
        removeDataRender();
        removeGrid();
    },
    mounted() {
        let that = this;
        const loading = this.$loading({
            lock: true,
            text: "信令数据加载中，请稍后",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
        });
        window.requestData(function () {
            that.value = signallingData.count;
            loading.close();
        });
    },
    methods: {
        changeType(val) {
            const loading = this.$loading({
                lock: true,
                text: "信令数据加载中，请稍后",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            this.play = false;
            if (val == "热力") {
                removeGrid();
                dataDraw();
            } else if (val == "柱状") {
                setDataRenderVisible(false);
                dataGrid(true);
            } else if (val == "网格") {
                setDataRenderVisible(false);
                removeGrid();
                dataGrid(false);
            }
            loading.close();
        },
        changeTime(id) {
            this.play = false;
            this.selectIndex = id;
            if (this.type == "热力") {
                signallingData.selectid = id;
            } else if (this.type == "柱状") {
                const loading = this.$loading({
                    lock: true,
                    text: "信令数据加载中，请稍后",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                signallingData.selectid = id;
                updateDataGrid(true);
                loading.close();
            } else if (this.type == "网格") {
                const loading = this.$loading({
                    lock: true,
                    text: "信令数据加载中，请稍后",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                signallingData.selectid = id;
                updateDataGrid(false);
                loading.close();
            }
        },
        modify() {
            if (signallingData.selectid == list.length - 1) {
                signallingData.selectid = 0;
            } else {
                signallingData.selectid++;
            }
            this.selectIndex = signallingData.selectid;
            setTimeout(() => {
                if (this.play) {
                    this.modify();
                }
            }, 300);
        },
        signallingPlay() {
            if (this.type == "热力") {
                this.play = !this.play;
                if (this.play) {
                    this.modify();
                }
            }
        },
    }
};
</script>

 static/Signalling/data/positions.dat

Binary files differ

 static/Signalling/data/yz_202312210000.dat

Binary files differ

 static/Signalling/data/yz_202312210030.dat

Binary files differ

 static/Signalling/data/yz_202312210100.dat

Binary files differ

 static/Signalling/data/yz_202312210130.dat

Binary files differ

 static/Signalling/data/yz_202312210200.dat

Binary files differ

 static/Signalling/data/yz_202312210230.dat

Binary files differ

 static/Signalling/data/yz_202312210300.dat

Binary files differ

 static/Signalling/data/yz_202312210330.dat

Binary files differ

 static/Signalling/data/yz_202312210400.dat

Binary files differ

 static/Signalling/data/yz_202312210430.dat

Binary files differ

 static/Signalling/data/yz_202312210500.dat

Binary files differ

 static/Signalling/data/yz_202312210530.dat

Binary files differ

 static/Signalling/data/yz_202312210600.dat

Binary files differ

 static/Signalling/data/yz_202312210630.dat

Binary files differ

 static/Signalling/data/yz_202312210700.dat

Binary files differ

 static/Signalling/data/yz_202312210730.dat

Binary files differ

 static/Signalling/data/yz_202312210800.dat

Binary files differ

 static/Signalling/data/yz_202312210830.dat

Binary files differ

 static/Signalling/data/yz_202312210900.dat

Binary files differ

 static/Signalling/data/yz_202312210930.dat

Binary files differ

 static/Signalling/data/yz_202312211000.dat

Binary files differ

 static/Signalling/data/yz_202312211030.dat

Binary files differ

 static/Signalling/data/yz_202312211100.dat

Binary files differ

 static/Signalling/data/yz_202312211130.dat

Binary files differ

 static/Signalling/data/yz_202312211200.dat

Binary files differ

 static/Signalling/data/yz_202312211230.dat

Binary files differ

 static/Signalling/data/yz_202312211300.dat

Binary files differ

 static/Signalling/data/yz_202312211330.dat

Binary files differ

 static/Signalling/data/yz_202312211400.dat

Binary files differ

 static/Signalling/data/yz_202312211430.dat

Binary files differ

 static/Signalling/data/yz_202312211500.dat

Binary files differ

 static/Signalling/data/yz_202312211530.dat

Binary files differ

 static/Signalling/data/yz_202312211600.dat

Binary files differ

 static/Signalling/data/yz_202312211630.dat

Binary files differ

 static/Signalling/data/yz_202312211700.dat

Binary files differ

 static/Signalling/data/yz_202312211730.dat

Binary files differ

 static/Signalling/data/yz_202312211800.dat

Binary files differ

 static/Signalling/data/yz_202312211830.dat

Binary files differ

 static/Signalling/data/yz_202312211900.dat

Binary files differ

 static/Signalling/data/yz_202312211930.dat

Binary files differ

 static/Signalling/data/yz_202312212000.dat

Binary files differ

 static/Signalling/data/yz_202312212030.dat

Binary files differ

 static/Signalling/data/yz_202312212100.dat

Binary files differ

 static/Signalling/data/yz_202312212130.dat

Binary files differ

 static/Signalling/data/yz_202312212200.dat

Binary files differ

 static/Signalling/data/yz_202312212230.dat

Binary files differ

 static/Signalling/data/yz_202312212300.dat

Binary files differ

 static/Signalling/data/yz_202312212330.dat

Binary files differ

 static/Signalling/js/Color.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,95 @@


var RD_SALT_COLOR = [
    [30, [10, 25, 68]],
    [32, [10, 25, 250]],
    [33.5, [255, 233, 102]],
    [34.5, [255, 155, 15]],
    [38, [255, 0, 0]],
];
function colorInterpolator(start, end) {
    var r = start[0],
        g = start[1],
        b = start[2];
    var Î”r = end[0] - r,
        Î”g = end[1] - g,
        Î”b = end[2] - b;
    return function(i, a) {
        return [
            Math.floor(r + i * Î”r),
            Math.floor(g + i * Î”g),
            Math.floor(b + i * Î”b),
            a,
        ];
    };
}
/**
 * Creates a color scale composed of the specified segments. Segments is an array of two-element arrays of the
 * form [value, color], where value is the point along the scale and color is the [r, g, b] color at that point.
 * For example, the following creates a scale that smoothly transitions from red to green to blue along the
 * points 0.5, 1.0, and 3.5:
 *
 *     [ [ 0.5, [255, 0, 0] ],
 *       [ 1.0, [0, 255, 0] ],
 *       [ 3.5, [0, 0, 255] ] ]
 *
 * @param segments array of color segments
 * @returns {Function} a function(point, alpha) that returns the color [r, g, b, alpha] for the given point.
 */
function segmentedColorScale(segments) {
    var points = [],
        interpolators = [],
        ranges = [];
    for (var i = 0; i < segments.length - 1; i++) {
        points.push(segments[i + 1][0]);
        interpolators.push(
            colorInterpolator(segments[i][1], segments[i + 1][1])
        );
        ranges.push([segments[i][0], segments[i + 1][0]]);
    }

    return function(point, alpha) {
        var i;
        for (i = 0; i < points.length - 1; i++) {
            if (point <= points[i]) {
                break;
            }
        }
        var range = ranges[i];
        return interpolators[i](proportion(point, range[0], range[1]), alpha);
    };
}
/**
 * @returns {Number} the value x clamped to the range [low, high].
 */
function clamp(x, low, high) {
    return Math.max(low, Math.min(x, high));
}

/**
 * @returns {number} the fraction of the bounds [low, high] covered by the value x, after clamping x to the
 *          bounds. For example, given bounds=[10, 20], this method returns 1 for x>=20, 0.5 for x=15 and 0
 *          for x<=10.
 */
function proportion(x, low, high) {
    return (clamp(x, low, high) - low) / (high - low);
}
var RD_OVERLAY_ALPHA = Math.floor(0.8 * 255); // é»˜è®¤è¦†ç›–透明度 ([0, 255])
const Color = function (option){
    let colorBar = RD_SALT_COLOR;
    let valMax = option.max;
    let valMin = option.min;
    let delta = valMax - valMin;
    delta = delta / (colorBar.length - 1);
    for (let i = 0; i < colorBar.length; i++) {
        colorBar[i][0] = valMin + i * delta;
    }
    this._colorgradient = segmentedColorScale(colorBar);

};
Color.prototype.getColor = function (value){
    let color = this._colorgradient(value);
    let nColor;
    nColor = Cesium.Color.fromBytes(color[0], color[1], color[2], 255, nColor);
    return nColor;
}

 static/Signalling/js/DataGrid.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,122 @@


function createGrid(id) {
    let positions = signallingData.positions;
    let x = positions[id][0];
    let y = positions[id][1];
    let value = signallingData.values[signallingData.selectid][id];
    let color = signallingData.color.getColor(value);
    let entity = viewer.entities.add({
        id: "box_" + id,
        position: Cesium.Cartesian3.fromDegrees(x, y, value * 1.5),
        box: {
            dimensions: new Cesium.Cartesian3(100.0, 100.0, value * 3),
            outline: false,
            material: color,
        }
    });
    viewer.entities.add({
        id: "label_" + id,
        position: Cesium.Cartesian3.fromDegrees(x, y, value * 3),
        label: {
            text: value + "",
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            font: "18px",
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
                0, 10000
            ),
        },

    });
    return entity;
}
function createGridPanel(id) {
    let positions = signallingData.positions;
    let x = positions[id][0];
    let y = positions[id][1];
    let value = signallingData.values[signallingData.selectid][id];
    let color = signallingData.color.getColor(value);
    color.alpha = 0.3;
    let entity = signallingData.dataSource.entities.add({
        id: "box_" + id,
        position: Cesium.Cartesian3.fromDegrees(x, y, 0.1),
        box: {
            dimensions: new Cesium.Cartesian3(100.0, 100.0, 0),
            outline: true,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
            material: color,
        }
    });
    signallingData.dataSource.entities.add({
        id: "label_" + id,
        position: Cesium.Cartesian3.fromDegrees(x, y, 1),
        label: {
            text: value + "",
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            font: "18px",
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
                0, 10000
            ),
        },

    });
    return entity;
}
// new Cesium.CallbackProperty(function() {
//     let value = signallingData.values[signallingData.selectid][id];
//     let dim = new Cesium.Cartesian3(100.0, 100.0, value * 10);
//     return dim;
// }, false),
// new Cesium.CallbackProperty(function() {
//     let value = signallingData.values[signallingData.selectid][id];
//     let color = signallingData.color.getColor(value);
//     return color;
// }, false)
function dataGrid(type) {
    if (signallingData.dataSource == null) {
        signallingData.dataSource = new Cesium.CustomDataSource('signallingList');

        signallingData.color = new Color({
            max: 120,
            min: 0,
        });
        let positions = signallingData.positions;
        for (let i = 0; i < positions.length; i++) {
            if (type) {
                createGrid(i);
            } else {
                createGridPanel(i);
            }
        }
        viewer.dataSources.add(signallingData.dataSource);
    }
    return true;
}
function removeGrid() {
    try {
        viewer.dataSources.remove(signallingData.dataSource);
        signallingData.dataSource = null;
    } catch (e) { }
    return true;
}
function updateDataGrid(type) {
    let positions = signallingData.positions;
    for (let i = 0; i < positions.length; i++) {
        let x = positions[i][0];
        let y = positions[i][1];
        let value = signallingData.values[signallingData.selectid][i];
        let color = signallingData.color.getColor(value);
        let labelEntity = signallingData.dataSource.entities.getById("label_" + i);
        let boxEntity = signallingData.dataSource.entities.getById("box_" + i);
        labelEntity.label.text = value + "";
        if (type) {
            labelEntity.position.setValue(Cesium.Cartesian3.fromDegrees(x, y, value * 3));
            boxEntity.position.setValue(Cesium.Cartesian3.fromDegrees(x, y, value * 1.5));

            boxEntity.box.dimensions = new Cesium.Cartesian3(100.0, 100.0, value * 3);
        }
        boxEntity.box.material = color;
    }
    return true;
}

 static/Signalling/js/DataManager.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,127 @@

var list = ["yz_202312210030.dat",
    "yz_202312210100.dat",
    "yz_202312210130.dat",
    "yz_202312210200.dat",
    "yz_202312210230.dat",
    "yz_202312210300.dat",
    "yz_202312210330.dat",
    "yz_202312210400.dat",
    "yz_202312210430.dat",
    "yz_202312210500.dat",
    "yz_202312210530.dat",
    "yz_202312210600.dat",
    "yz_202312210630.dat",
    "yz_202312210700.dat",
    "yz_202312210730.dat",
    "yz_202312210800.dat",
    "yz_202312210830.dat",
    "yz_202312210900.dat",
    "yz_202312210930.dat",
    "yz_202312211000.dat",
    "yz_202312211030.dat",
    "yz_202312211100.dat",
    "yz_202312211130.dat",
    "yz_202312211200.dat",
    "yz_202312211230.dat",
    "yz_202312211300.dat",
    "yz_202312211330.dat",
    "yz_202312211400.dat",
    "yz_202312211430.dat",
    "yz_202312211500.dat",
    "yz_202312211530.dat",
    "yz_202312211600.dat",
    "yz_202312211630.dat",
    "yz_202312211700.dat",
    "yz_202312211730.dat",
    "yz_202312211800.dat",
    "yz_202312211830.dat",
    "yz_202312211900.dat",
    "yz_202312211930.dat",
    "yz_202312212000.dat",
    "yz_202312212030.dat",
    "yz_202312212100.dat",
    "yz_202312212130.dat",
    "yz_202312212200.dat",
    "yz_202312212230.dat",
    "yz_202312212300.dat",
    "yz_202312212330.dat",
    "yz_202312210000.dat"
];
var signallingData = {
    extent: {
        minx: 999,
        miny: 999,
        maxx: -999,
        maxy: -999,
        dx: 999,
        dy: 999,
    },
    pixels: [],
    positions: [],
    values: [],
    count: [],
    canvas: [],
    heatmap: [],
    dataSource:null,
    heatmapEntity: null,
    posFinish: false,
    valueFinish: 0,
    selectid: 0,
    color: null,
};


function getData(id, callback) {
    fetch("./static/Signalling/data/" + list[id]).then(response => response.arrayBuffer()).then(data => {
        var dataView = new DataView(data);
        signallingData.values[id] = [];
        for (var i = 0; i < dataView.byteLength; i += 2) {
            let value = dataView.getInt16(i, true);
            signallingData.values[id].push(value);
        }
        signallingData.valueFinish++;
        if (signallingData.valueFinish == list.length) {
            dataDraw(callback);
        }
    });

}

function getDatas(callback) {
    signallingData.valueFinish = 0;
    for (let i = 0; i < list.length; i++) {

        getData(i, callback);
    }
}
function updataExtent(x, y) {
    if (signallingData.extent.minx > x) {
        signallingData.extent.minx = x;
    }
    if (signallingData.extent.miny > y) {
        signallingData.extent.miny = y;
    }
    if (signallingData.extent.maxx < x) {
        signallingData.extent.maxx = x;
    }
    if (signallingData.extent.maxy < y) {
        signallingData.extent.maxy = y;
    }
    signallingData.extent.dx = signallingData.extent.maxx - signallingData.extent.minx;
    signallingData.extent.dy = signallingData.extent.maxy - signallingData.extent.miny;
}
function requestData(callback) {
    fetch("./static/Signalling/data/positions.dat").then(response => response.arrayBuffer()).then(data => {
        var dataView = new DataView(data);
        for (var i = 0; i < dataView.byteLength; i += 8) {
            let x = dataView.getFloat32(i, true);
            let y = dataView.getFloat32(i + 4, true);
            updataExtent(x, y);
            signallingData.positions.push([x, y]);
        }
        signallingData.posFinish = true;

        getDatas(callback);
    });
}

 static/Signalling/js/DataRender.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,151 @@
let drConfig = {
    width: 1000,
    height: 1000,
};

function createCanvas() {
    var canvas = document.createElement("canvas");
    canvas.width = drConfig.width;
    canvas.height = drConfig.height;
    return canvas;
}
function drawHeatMap(datas) {

    let gradient = {
        '.3': 'blue',
        '.5': 'green',
        '.7': 'yellow',
        '.95': 'red'
    }
    let heatmapContainer = document.createElement('div');
    heatmapContainer.setAttribute('style', 'width:' + drConfig.width + 'px;height:' + drConfig.height + 'px;display:none;');
    document.body.appendChild(heatmapContainer);

    let heatmapInstance = h337.create({
        container: heatmapContainer,
        // æœ€å¤§é€æ˜Žåº¦
        maxOpacity: 0.8,
        // æœ€å°é€æ˜Žåº¦
        minOpacity: 0.1,
        // æ¨¡ç³Šç³»æ•°ï¼Œæ¨¡ç³Šç³»æ•°è¶Šé«˜ï¼Œæ¸å˜å°±è¶Šå¹³æ»‘
        blur: 0.85,
        // é»˜è®¤åŠå¾„
        radius: 7,
        // æ¸å˜
        gradient: gradient
    });

    heatmapInstance.setData(datas);
    signallingData.canvas.push(heatmapInstance._renderer.canvas);
    signallingData.heatmap.push(heatmapContainer);
    return heatmapInstance._renderer.canvas;
}

function pointToPixel(point) {
    let result = {
        x: 0, y: 0,
    };
    let dx = signallingData.extent.dx;
    let dy = signallingData.extent.dy;
    result.x = Math.floor((point[0] - signallingData.extent.minx) * drConfig.width / dx);
    result.y = Math.floor((signallingData.extent.maxy - point[1]) * drConfig.height / dy);
    return result;
}
function coordinateTransformation() {
    let positions = signallingData.positions;

    for (let i = 0; i < positions.length; i++) {
        let position = positions[i];
        let point = pointToPixel(position);
        signallingData.pixels.push(point);
    }
}
function createEntity() {
    let pArray = [];
    let extent = signallingData.extent;
    pArray.push(extent.minx, extent.miny);
    pArray.push(extent.maxx, extent.miny);
    pArray.push(extent.maxx, extent.maxy);
    pArray.push(extent.minx, extent.maxy);
    let hierarchy = Cesium.Cartesian3.fromDegreesArray(pArray);
    let entity = viewer.entities.add({
        id: "signalling",
        polygon: {
            hierarchy: new Cesium.PolygonHierarchy(hierarchy),
            material: new Cesium.ImageMaterialProperty({
                image: new Cesium.CallbackProperty(function () {
                    return signallingData.canvas[signallingData.selectid];
                }, false),

                repeat: new Cesium.Cartesian2(1, 1)
            })
        }
    });
    return entity;
}
function dataDraw(callback) {
    if (signallingData.heatmapEntity == null) {
        coordinateTransformation();
        let values = signallingData.values;
        let points = signallingData.pixels;
        for (let i = 0; i < values.length; i++) {
            let value = values[i];
            let datas = [];
            let vmax = 0;
            signallingData.count[i] = 0;
            for (let j = 0; j < value.length; j++) {
                let point = points[j];
                if (value[j] != 0) {
                    signallingData.count[i] += value[j];
                    if (vmax < value[j]) {
                        vmax = value[j];
                    }
                    let data = {
                        x: point.x,
                        y: point.y,
                        value: value[j],
                        radius: 7
                    };
                    datas.push(data);
                }
            }
            vmax = 500;
            let canvas = drawHeatMap({
                max: vmax,
                min: 0,
                data: datas
            });

        }
        signallingData.heatmapEntity = createEntity();
        if (callback) {
            callback();
        }
    }else{
        setDataRenderVisible(true);
    }
    return signallingData.heatmapEntity;
}
function setDataRenderVisible(show) {
    try {
        if (signallingData.heatmapEntity) {
            signallingData.heatmapEntity.show = show;
        }
    } catch (e) { }
}
function removeDataRender() {
    try {
        //let entity = viewer.entities.getById("signalling");
        viewer.entities.remove(signallingData.heatmapEntity);
        signallingData.heatmapEntity = null;

    } catch (e) { }
    try {
        for (let i = 0; i < signallingData.heatmap.length; i++) {
            try {
                document.body.removeChild(signallingData.heatmap[i]);
            } catch (e) { }
        }
        signallingData.heatmap = [];
    } catch (e) { }
}

 static/Signalling/js/heatmap.min.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,9 @@
/*
 * heatmap.js v2.0.2 | JavaScript Heatmap Library
 *
 * Copyright 2008-2016 Patrick Wied <heatmapjs@patrick-wied.at> - All rights reserved.
 * Dual licensed under MIT and Beerware license 
 *
 * :: 2016-02-04 21:25
 */
(function(a,b,c){if(typeof module!=="undefined"&&module.exports){module.exports=c()}else if(typeof define==="function"&&define.amd){define(c)}else{b[a]=c()}})("h337",this,function(){var a={defaultRadius:40,defaultRenderer:"canvas2d",defaultGradient:{.25:"rgb(0,0,255)",.55:"rgb(0,255,0)",.85:"yellow",1:"rgb(255,0,0)"},defaultMaxOpacity:1,defaultMinOpacity:0,defaultBlur:.85,defaultXField:"x",defaultYField:"y",defaultValueField:"value",plugins:{}};var b=function h(){var b=function d(a){this._coordinator={};this._data=[];this._radi=[];this._min=0;this._max=1;this._xField=a["xField"]||a.defaultXField;this._yField=a["yField"]||a.defaultYField;this._valueField=a["valueField"]||a.defaultValueField;if(a["radius"]){this._cfgRadius=a["radius"]}};var c=a.defaultRadius;b.prototype={_organiseData:function(a,b){var d=a[this._xField];var e=a[this._yField];var f=this._radi;var g=this._data;var h=this._max;var i=this._min;var j=a[this._valueField]||1;var k=a.radius||this._cfgRadius||c;if(!g[d]){g[d]=[];f[d]=[]}if(!g[d][e]){g[d][e]=j;f[d][e]=k}else{g[d][e]+=j}if(g[d][e]>h){if(!b){this._max=g[d][e]}else{this.setDataMax(g[d][e])}return false}else{return{x:d,y:e,value:j,radius:k,min:i,max:h}}},_unOrganizeData:function(){var a=[];var b=this._data;var c=this._radi;for(var d in b){for(var e in b[d]){a.push({x:d,y:e,radius:c[d][e],value:b[d][e]})}}return{min:this._min,max:this._max,data:a}},_onExtremaChange:function(){this._coordinator.emit("extremachange",{min:this._min,max:this._max})},addData:function(){if(arguments[0].length>0){var a=arguments[0];var b=a.length;while(b--){this.addData.call(this,a[b])}}else{var c=this._organiseData(arguments[0],true);if(c){this._coordinator.emit("renderpartial",{min:this._min,max:this._max,data:[c]})}}return this},setData:function(a){var b=a.data;var c=b.length;this._data=[];this._radi=[];for(var d=0;d<c;d++){this._organiseData(b[d],false)}this._max=a.max;this._min=a.min||0;this._onExtremaChange();this._coordinator.emit("renderall",this._getInternalData());return this},removeData:function(){},setDataMax:function(a){this._max=a;this._onExtremaChange();this._coordinator.emit("renderall",this._getInternalData());return this},setDataMin:function(a){this._min=a;this._onExtremaChange();this._coordinator.emit("renderall",this._getInternalData());return this},setCoordinator:function(a){this._coordinator=a},_getInternalData:function(){return{max:this._max,min:this._min,data:this._data,radi:this._radi}},getData:function(){return this._unOrganizeData()}};return b}();var c=function i(){var a=function(a){var b=a.gradient||a.defaultGradient;var c=document.createElement("canvas");var d=c.getContext("2d");c.width=256;c.height=1;var e=d.createLinearGradient(0,0,256,1);for(var f in b){e.addColorStop(f,b[f])}d.fillStyle=e;d.fillRect(0,0,256,1);return d.getImageData(0,0,256,1).data};var b=function(a,b){var c=document.createElement("canvas");var d=c.getContext("2d");var e=a;var f=a;c.width=c.height=a*2;if(b==1){d.beginPath();d.arc(e,f,a,0,2*Math.PI,false);d.fillStyle="rgba(0,0,0,1)";d.fill()}else{var g=d.createRadialGradient(e,f,a*b,e,f,a);g.addColorStop(0,"rgba(0,0,0,1)");g.addColorStop(1,"rgba(0,0,0,0)");d.fillStyle=g;d.fillRect(0,0,2*a,2*a)}return c};var c=function(a){var b=[];var c=a.min;var d=a.max;var e=a.radi;var a=a.data;var f=Object.keys(a);var g=f.length;while(g--){var h=f[g];var i=Object.keys(a[h]);var j=i.length;while(j--){var k=i[j];var l=a[h][k];var m=e[h][k];b.push({x:h,y:k,value:l,radius:m})}}return{min:c,max:d,data:b}};function d(b){var c=b.container;var d=this.shadowCanvas=document.createElement("canvas");var e=this.canvas=b.canvas||document.createElement("canvas");var f=this._renderBoundaries=[1e4,1e4,0,0];var g=getComputedStyle(b.container)||{};e.className="heatmap-canvas";this._width=e.width=d.width=b.width||+g.width.replace(/px/,"");this._height=e.height=d.height=b.height||+g.height.replace(/px/,"");this.shadowCtx=d.getContext("2d");this.ctx=e.getContext("2d");e.style.cssText=d.style.cssText="position:absolute;left:0;top:0;";c.style.position="relative";c.appendChild(e);this._palette=a(b);this._templates={};this._setStyles(b)}d.prototype={renderPartial:function(a){if(a.data.length>0){this._drawAlpha(a);this._colorize()}},renderAll:function(a){this._clear();if(a.data.length>0){this._drawAlpha(c(a));this._colorize()}},_updateGradient:function(b){this._palette=a(b)},updateConfig:function(a){if(a["gradient"]){this._updateGradient(a)}this._setStyles(a)},setDimensions:function(a,b){this._width=a;this._height=b;this.canvas.width=this.shadowCanvas.width=a;this.canvas.height=this.shadowCanvas.height=b},_clear:function(){this.shadowCtx.clearRect(0,0,this._width,this._height);this.ctx.clearRect(0,0,this._width,this._height)},_setStyles:function(a){this._blur=a.blur==0?0:a.blur||a.defaultBlur;if(a.backgroundColor){this.canvas.style.backgroundColor=a.backgroundColor}this._width=this.canvas.width=this.shadowCanvas.width=a.width||this._width;this._height=this.canvas.height=this.shadowCanvas.height=a.height||this._height;this._opacity=(a.opacity||0)*255;this._maxOpacity=(a.maxOpacity||a.defaultMaxOpacity)*255;this._minOpacity=(a.minOpacity||a.defaultMinOpacity)*255;this._useGradientOpacity=!!a.useGradientOpacity},_drawAlpha:function(a){var c=this._min=a.min;var d=this._max=a.max;var a=a.data||[];var e=a.length;var f=1-this._blur;while(e--){var g=a[e];var h=g.x;var i=g.y;var j=g.radius;var k=Math.min(g.value,d);var l=h-j;var m=i-j;var n=this.shadowCtx;var o;if(!this._templates[j]){this._templates[j]=o=b(j,f)}else{o=this._templates[j]}var p=(k-c)/(d-c);n.globalAlpha=p<.01?.01:p;n.drawImage(o,l,m);if(l<this._renderBoundaries[0]){this._renderBoundaries[0]=l}if(m<this._renderBoundaries[1]){this._renderBoundaries[1]=m}if(l+2*j>this._renderBoundaries[2]){this._renderBoundaries[2]=l+2*j}if(m+2*j>this._renderBoundaries[3]){this._renderBoundaries[3]=m+2*j}}},_colorize:function(){var a=this._renderBoundaries[0];var b=this._renderBoundaries[1];var c=this._renderBoundaries[2]-a;var d=this._renderBoundaries[3]-b;var e=this._width;var f=this._height;var g=this._opacity;var h=this._maxOpacity;var i=this._minOpacity;var j=this._useGradientOpacity;if(a<0){a=0}if(b<0){b=0}if(a+c>e){c=e-a}if(b+d>f){d=f-b}var k=this.shadowCtx.getImageData(a,b,c,d);var l=k.data;var m=l.length;var n=this._palette;for(var o=3;o<m;o+=4){var p=l[o];var q=p*4;if(!q){continue}var r;if(g>0){r=g}else{if(p<h){if(p<i){r=i}else{r=p}}else{r=h}}l[o-3]=n[q];l[o-2]=n[q+1];l[o-1]=n[q+2];l[o]=j?n[q+3]:r}k.data=l;this.ctx.putImageData(k,a,b);this._renderBoundaries=[1e3,1e3,0,0]},getValueAt:function(a){var b;var c=this.shadowCtx;var d=c.getImageData(a.x,a.y,1,1);var e=d.data[3];var f=this._max;var g=this._min;b=Math.abs(f-g)*(e/255)>>0;return b},getDataURL:function(){return this.canvas.toDataURL()}};return d}();var d=function j(){var b=false;if(a["defaultRenderer"]==="canvas2d"){b=c}return b}();var e={merge:function(){var a={};var b=arguments.length;for(var c=0;c<b;c++){var d=arguments[c];for(var e in d){a[e]=d[e]}}return a}};var f=function k(){var c=function h(){function a(){this.cStore={}}a.prototype={on:function(a,b,c){var d=this.cStore;if(!d[a]){d[a]=[]}d[a].push(function(a){return b.call(c,a)})},emit:function(a,b){var c=this.cStore;if(c[a]){var d=c[a].length;for(var e=0;e<d;e++){var f=c[a][e];f(b)}}}};return a}();var f=function(a){var b=a._renderer;var c=a._coordinator;var d=a._store;c.on("renderpartial",b.renderPartial,b);c.on("renderall",b.renderAll,b);c.on("extremachange",function(b){a._config.onExtremaChange&&a._config.onExtremaChange({min:b.min,max:b.max,gradient:a._config["gradient"]||a._config["defaultGradient"]})});d.setCoordinator(c)};function g(){var g=this._config=e.merge(a,arguments[0]||{});this._coordinator=new c;if(g["plugin"]){var h=g["plugin"];if(!a.plugins[h]){throw new Error("Plugin '"+h+"' not found. Maybe it was not registered.")}else{var i=a.plugins[h];this._renderer=new i.renderer(g);this._store=new i.store(g)}}else{this._renderer=new d(g);this._store=new b(g)}f(this)}g.prototype={addData:function(){this._store.addData.apply(this._store,arguments);return this},removeData:function(){this._store.removeData&&this._store.removeData.apply(this._store,arguments);return this},setData:function(){this._store.setData.apply(this._store,arguments);return this},setDataMax:function(){this._store.setDataMax.apply(this._store,arguments);return this},setDataMin:function(){this._store.setDataMin.apply(this._store,arguments);return this},configure:function(a){this._config=e.merge(this._config,a);this._renderer.updateConfig(this._config);this._coordinator.emit("renderall",this._store._getInternalData());return this},repaint:function(){this._coordinator.emit("renderall",this._store._getInternalData());return this},getData:function(){return this._store.getData()},getDataURL:function(){return this._renderer.getDataURL()},getValueAt:function(a){if(this._store.getValueAt){return this._store.getValueAt(a)}else if(this._renderer.getValueAt){return this._renderer.getValueAt(a)}else{return null}}};return g}();var g={create:function(a){return new f(a)},register:function(b,c){a.plugins[b]=c}};return g});