• Cesium热力图

    二、代码

    1. <!doctype html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <link rel="stylesheet" href="./css/common.css">
    7.     <title>
    8.         热力图
    9.     </title>
    10.     <script src="./js/config.js"></script>
    11.     <script src="./scripts/vue.min.js"></script>
    12.     <script type="text/javascript" src="./scripts/element.index.js"></script>
    13.     <link rel="stylesheet" href="./scripts/element.index.css">
    14.     <link rel="stylesheet" href="./css/common.css">
    15.     <script src="./scripts/cesiumheatmap.js"></script>
    16.     <script src="./scripts/heatdata.js"></script>
    17. </head>
    18.  
    19. <body>
    20.     <div id="cesiumContainer">
    21.     </div>
    22. </body>
    23.  
    24. </html>
    25.  
    26. <script>
    27.     var app = new Vue({
    28.         el: '#cesiumContainer',
    29.         data() {
    30.             return {};
    31.         },
    32.         mounted() {
    33.             let viewer = new ANOVGIS.Viewer("cesiumContainer", {
    34.                 vrButton: false,
    35.             });
    36.             var baselayer = ANOVGIS.ImageryLayerFactory.createImageryLayer(
    37.                 ANOVGIS.ImageryType.TDT, {
    38.                 style: "img",
    39.                 key: globalConfig.tdtKey
    40.             }
    41.             );
    42.             viewer.imageryLayers.addImageryProvider(baselayer);
    43.  
    44.             var maxx = -180;
    45.             var maxy = -90;
    46.             var minx = 180;
    47.             var miny = 90;
    48.             hdata.forEach((r) => {
    49.                 maxx = Math.max(maxx, r.X);
    50.                 maxy = Math.max(maxy, r.Y);
    51.                 minx = Math.min(minx, r.X);
    52.                 miny = Math.min(miny, r.Y);
    53.             });
    54.  
    55.             var bounds = {
    56.                 west: minx,
    57.                 south: miny,
    58.                 east: maxx,
    59.                 north: maxy,
    60.             };
    61.  
    62.             // 初始化CesiumHeatmap
    63.             var heatMap = ANOVGIS.CesiumHeatMap.create(
    64.                 viewer, // 视图层
    65.                 bounds, // 矩形坐标
    66.                 {
    67.                     // heatmap相应参数
    68.                     backgroundColor: "rgba(0,0,0,0)",
    69.                     radius: 50,
    70.                     maxOpacity: 0.5,
    71.                     minOpacity: 0,
    72.                     blur: 0.7,
    73.                 }
    74.             );
    75.  
    76.             heatMap.setWGS84Data(0, 100, getData());
    77.             setInterval(() => {
    78.                 heatMap.setWGS84Data(0, 100, getData());
    79.             }, 800);
    80.  
    81.             document.ondblclick = () => {
    82.                 heatMap.show(false);
    83.             };
    84.  
    85.             function getData() {
    86.                 var ddata = [];
    87.                 var data = hdata;
    88.                 for (var i = 0; i < data.length; i++) {
    89.                     if (data[i].X < 119.1) {
    90.                         var value = Math.random() * 30;
    91.                     } else {
    92.                         var value = Math.random() * 100;
    93.                     }
    94.                     var x = Number(data[i].X);
    95.                     var y = Number(data[i].Y);
    96.  
    97.                     ddata.push({ x: x, y: y, value: value });
    98.                 }
    99.                 return ddata;
    100.             }
    101.             viewer.flyTo(viewer.entities);
    102.         },
    103.         methods: {},
    104.     });
    105. </script>

  • 相关阅读:
    注解用法含义
    Matplotlib绘制折线图、散点图、柱状图、直方图、饼图代码
    聊聊Redis sentinel 机制
    使用python进行数据分析(二)
    [附源码]Python计算机毕业设计Django勤工俭学管理小程序
    iPhone NFC 设置教程（门禁卡/公交卡/校园卡等等）
    带你读论文丨S&P21 Survivalism: Living-Off-The-Land 经典离地攻击
    MindFusion Spreadsheet for Java 1.0.1
    python电影院购票系统毕业设计源码221133
    Cobalt Strike（五）会话管理
  • 原文地址：https://blog.csdn.net/u014556081/article/details/133752662