• 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>

  • 相关阅读:
    机器学习——白板推导系列三——线性回归
    TiDB-从0到1-数据导出导入
    Python第五次作业
    C++ 函数的分文件编写
    ChatGPT在虚拟旅游和文化体验中的潜在作用如何？
    大数据与云计算
    【微信小程序系列：三】前端实现微信支付与代扣签约
    【广州华锐互动】VR全景工厂虚拟导览，虚拟现实技术提升企业数字化信息管理水平
    转债列表筛选及与正股数据整合：qlib+fastapi
    22/6/24~6/25
  • 原文地址：https://blog.csdn.net/u014556081/article/details/133752662