精华内容
下载资源
问答
  • cesium热力图

    2018-08-09 14:34:58
    cesium中添加热力图示例,引用heatmap.min.js后可调用。解决用heatmap绘出的canvas贴到cesium的rectangle上会有黑色背景的问题。
  • 利用javaScript技术,根据json文件数据在地图上绘制热力图进行展示。
  • 一、热力图效果图 二、核心代码 // 模拟热力图坐标范围及核心代码 loadCesiumHeatMapFun(){ let tmpXYList = [ new Cesium.Cartographic(111.2300232,39.5279085, 0), new Cesium.Cartographic(111....

    一、热力图效果图

    二、核心代码

        // 模拟热力图坐标范围及核心代码
        loadCesiumHeatMapFun(){
          let tmpXYList = [
            new Cesium.Cartographic(111.2300232,39.5279085, 0),
            new Cesium.Cartographic(111.2300178,39.5256063, 0),
            new Cesium.Cartographic(111.198801,39.5256635, 0),
            new Cesium.Cartographic(111.1988154,39.527964, 0),
          ]
    
           //生成矩形
          var bound = new Cesium.Rectangle.fromCartographicArray(tmpXYList)
          // 随机生成矩形范围内的点坐标
          let tPoints = turf.randomPoint(Number(this.xyList), {bbox: [bound.west, bound.south, bound.east, bound.north]}) 
          var searchWithin = turf.polygon([[
                                [111.2300232,39.5279085],
                                [111.2300178,39.5256063],
                                [111.198801,39.5256635],
                                [111.1988154,39.527964],
                                [111.2300232,39.5279085]
                            ]]);
          // 返回多边形内的所有点
          var ptsWithin = turf.pointsWithinPolygon(tPoints, searchWithin); 
    
          let tmpMarksList = []
          let heatMax = 0
          let heatPoints = []
          tmpXYList.forEach( xy => {
            this.sampleHeightsCoordinate([xy.longitude,xy.latitude],3,(posi) => {
              tmpMarksList.push(posi)
            })
          })
    
          // 对随机生成的点添加value值
          ptsWithin.features.forEach(dl => {
            var val = Math.floor(Math.random() * 100);
            heatMax = Math.max(heatMax, val);
            let coord = dl.geometry.coordinates
            var point = {
              x: coord[0],
              y: coord[1],
              value: val
            };
            heatPoints.push(point);
          })
          
          let temTime = setInterval(() => {
            if(ptsWithin.features.length === heatPoints.length && tmpXYList.length === tmpMarksList.length){
              heatMap1 ? '' : heatMap1 = window.CesiumHeatmap.create(cesiumHeatViewer,bound,tmpMarksList,{ // heatmap相应参数
                radius: 20,
                maxOpacity: .6,
                minOpacity: 0,
                blur: .75,
                gradient: {
                    '0.95':'red',
                    '0.85':'orange',
                    '0.75':'yellow',
                    '0.55':'blue',
                    '0.3':'green',
                },
              })
              let valueMin = 0;
              heatMap1.setWGS84Data(valueMin, heatMax, heatPoints);
    
              clearInterval(temTime)
            }
          }, 120);
        }

    三、完整代码 

    <template>
      <div id="CesiumHeatMapDiv" v-if="cesiumHeatMapIsShow">
        <table style="text-align: right;">
          <tr>
            <td colspan="2" style="text-align: left">
              <span style="font-size: 18px; font-weight: 600;">模拟热力图</span>
              <div class="closeCesiumHeatMap" @click="handCloserCesiumHeatMap"></div>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div
                style="height: 4px;background-color: rgba(29,164,220,0.6);margin: 4px;"
              ></div>
            </td>
          </tr>
          <tr>
            <td>坐标数量:</td>
            <td>
              <el-input-number
                class="inputNumWidth"
                v-model="xyList"
                :max="99999"
                :min="5000"
                :step="5000"
                @change="handlxlChange"
              ></el-input-number>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <el-button size="mini" :disabled="isDrawCesiumHeatMap" @click="loadCesiumHeatMap">加载热力图</el-button>
              <el-button size="mini" @click="clearCesiumHeatMap">清除</el-button>
            </td>
          </tr>
        </table>
      </div>
    </template>
    <script>
    import * as turf from '@turf/turf'
    import CesiumHeatmap from "../../../../../static/cesium-heatmap/CesiumHeatmap";
    
    let cesiumHeatViewer = undefined
    let heatMap1 = undefined
    let timeInterval = undefined
    
    export default {
      name: "cesiumHeatMap",
      data() {
        return {
          cesiumHeatMapIsShow: false,
          isDrawCesiumHeatMap: false,
          xyList: 5000, 
        };
      },
      methods: {
        handlxlChange(){
          this.loadCesiumHeatMap()
        },
    
        /**
         * @description: 组件调用入口方法
         */    
        openCesiumHeatMap(viewer) {
          cesiumHeatViewer = viewer
          this.cesiumHeatMapIsShow = true;
        },
    
        handCloserCesiumHeatMap() {
          this.cesiumHeatMapIsShow = false;
          cesiumHeatViewer = undefined
          this.clearCesiumHeatMap()
        },
        
        loadCesiumHeatMap(){
          this.clearCesiumHeatMap()
          this.isDrawCesiumHeatMap = true
          
          this.loadCesiumHeatMapFun()
          
          timeInterval = setInterval(() => {
            this.loadCesiumHeatMapFun()
          }, 5000);
        },
    
        // 模拟代码
        loadCesiumHeatMapFun(){
          let tmpXYList = [
            new Cesium.Cartographic(111.2300232,39.5279085, 0),
            new Cesium.Cartographic(111.2300178,39.5256063, 0),
            new Cesium.Cartographic(111.198801,39.5256635, 0),
            new Cesium.Cartographic(111.1988154,39.527964, 0),
          ]
    
           //生成矩形
          var bound = new Cesium.Rectangle.fromCartographicArray(tmpXYList)
          // 随机生成矩形范围内的点坐标
          let tPoints = turf.randomPoint(Number(this.xyList), {bbox: [bound.west, bound.south, bound.east, bound.north]}) 
          var searchWithin = turf.polygon([[
                                [111.2300232,39.5279085],
                                [111.2300178,39.5256063],
                                [111.198801,39.5256635],
                                [111.1988154,39.527964],
                                [111.2300232,39.5279085]
                            ]]);
          // 返回多边形内的所有点
          var ptsWithin = turf.pointsWithinPolygon(tPoints, searchWithin); 
    
          let tmpMarksList = []
          let heatMax = 0
          let heatPoints = []
          tmpXYList.forEach( xy => {
            this.sampleHeightsCoordinate([xy.longitude,xy.latitude],3,(posi) => {
              tmpMarksList.push(posi)
            })
          })
    
          // 对随机生成的点添加value值
          ptsWithin.features.forEach(dl => {
            var val = Math.floor(Math.random() * 100);
            heatMax = Math.max(heatMax, val);
            let coord = dl.geometry.coordinates
            var point = {
              x: coord[0],
              y: coord[1],
              value: val
            };
            heatPoints.push(point);
          })
          
          let temTime = setInterval(() => {
            if(ptsWithin.features.length === heatPoints.length && tmpXYList.length === tmpMarksList.length){
              heatMap1 ? '' : heatMap1 = window.CesiumHeatmap.create(cesiumHeatViewer,bound,tmpMarksList,{ // heatmap相应参数
                radius: 20,
                maxOpacity: .6,
                minOpacity: 0,
                blur: .75,
                gradient: {
                    '0.95':'red',
                    '0.85':'orange',
                    '0.75':'yellow',
                    '0.55':'blue',
                    '0.3':'green',
                },
              })
              let valueMin = 0;
              heatMap1.setWGS84Data(valueMin, heatMax, heatPoints);
    
              clearInterval(temTime)
            }
          }, 120);
        },
      
        clearCesiumHeatMap(){
          this.isDrawCesiumHeatMap = false
          if(heatMap1) {
            heatMap1._layer ? heatMap1._cesium.entities.remove(heatMap1._layer) : ''
            heatMap1._layer = undefined
          }
          clearInterval(timeInterval)
        },
        
        sampleHeightsCoordinate(coordinate, height,callback) {
          const positions = [
            Cesium.Cartographic.fromDegrees(coordinate[0], coordinate[1]),
          ]
          cesiumHeatViewer.scene.sampleHeightMostDetailed(positions).then(function (clampedCartesians) {
            const posi = Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1], clampedCartesians[0].height + height)
            callback(posi)
          })
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
    .closeCesiumHeatMap {
      text-decoration: none;
      position: absolute;
      top: 20px;
      right: 10px;
      z-index: 20;
    }
    .closeCesiumHeatMap:after {
      // content: "✖";
      content: "\e60b";
      font-family: "iconfont";
      font-size: 22px;
      color: rgba($color: gray, $alpha: 0.8);
    }
    
    #CesiumHeatMapDiv {
      color: rgba(29, 164, 220, 0.9);
      background: rgba(34, 69, 91, 0.7);
      border-radius: 6px;
      padding: 10px;
    
      .closeCesiumHeatMap {
        top: 1vh;
        right: 0.6vw;
        cursor: pointer;
      }
      
      /deep/ .inputNumWidth {
        width: 140px;
        .el-input__inner {
          height: 28px;
          line-height: 28px;
          padding: 0px 6px;
          background: #104c66bd;
          color: #cef2ff;
          font-size: 12px;
          border: 0px;
        }
        .el-input-number__decrease,
        .el-input-number__increase {
          background: #104c66;
          color: rgba(255, 255, 255, 0.8);
          border-right: 0px;
          border-left: 0px;
          font-size: 14px;
          top: 4px;
        }
      }
    
      /deep/ .el-button {
        background: rgba(18, 167, 204, 0.52);
        color: #cef2ff;
        border: 0px;
      }
    }
    
    #CesiumHeatMapDiv td {
      padding: 4px 2px;
    }
    </style>
    

    四、CesiumHeatmap 修改后源码下载

    CesiumHeatmap 资源链接

    展开全文
  • cesium 热力图的实现

    2021-07-29 17:18:57
    创建热力图要将引入heat.js 创建热力点heatpoints function createHeatMap() { const data = [ { longitude: 106.695302, latitude: 26.516131, count: 10 }, { longitude: 106.683302, latitude: 26.512131,...

     创建热力图要将引入heat.js

    创建热力点heatpoints

      function createHeatMap() {
        const data = [
            { longitude: 106.695302, latitude: 26.516131, count: 10 },
            { longitude: 106.683302, latitude: 26.512131, count: 50 },
            { longitude: 106.683502, latitude: 26.514131, count: 20 },
            { longitude: 106.688302, latitude: 26.512131, count: 10 }
          ]
          var min = 0
          var max = 0
          const heatpoints = []
          // for (var feature of data) {
          if (feature.longitude && feature.latitude) {
            max = Math.max(max, feature.count)
            min = Math.min(min, feature.count)
            heatpoints.push({
              x: parseFloat(feature.longitude),
              y: parseFloat(feature.latitude),
              value: feature.count
            })
          }
          // }
          addHeatMap(min, max, heatpoints)
      }

    根据最大最小值创建热力图

    function addHeatMap(min, max, heatPoints) {
        debugger
        // 创建一个矩形,包围要做热力的区域
        const features = [
          { longitude: 106.6555543649391, latitude: 26.48334149757955 },
          { longitude: 106.68732179894454, latitude: 26.564155190537694 },
          { longitude: 106.72079820833973, latitude: 26.4917484358577 },
          { longitude: 106.72023263982003, latitude: 26.499988040091054 }
        ]
        const points = []
        const bpoint = []
        for (const coord of features) {
          points.push(coord.longitude, coord.latitude)
          bpoint.push(new Cesium.Cartographic(coord.longitude, coord.latitude, 0))
        }
        // eslint-disable-next-line new-cap
        // 根据数据计算范围
        const bound = new Cesium.Rectangle.fromCartographicArray(bpoint)
        // eslint-disable-next-line no-undef
        const heatMap = CesiumHeatmap.create(
          viewer,
          bound,
          {
            // heatmap相应参数
            backgroundColor: 'rgba(0,0,0,0)',
            radius: 50,
            maxOpacity: 0.5,
            minOpacity: 0,
            blur: 0.85
          }
        )
    
        heatMap.setWGS84Data(min, max, heatPoints)
        const img = heatMap._heatmap._renderer.canvas
        const entity = viewer.entities.add({
          polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArray(points), // 多边形
            material: new Cesium.ImageMaterialProperty({
              image: img
            })
          }
        })
        heatmapPolygon.push(entity)
      }

    创建结果 

     

    展开全文
  • Cesium 热力图代码

    2021-09-07 13:56:17
    Cesium 热力图代码
  • Cesium热力图代码

    2021-09-07 13:54:40
    Cesium热力图代码
  • Cesium热力图:在cesium中实现热力图

    千次阅读 2019-10-30 09:58:41
    原理:使用heatmap.js插件,先生成一个热力图,再在地图上创建一个盒子(如矩形),以纹理的形式把热力图填充到矩形中。 1、首先下载heatmap.js插件,自己随意写了一个热力图的方法,传入热力图所需参数max和data ...

    原理:使用heatmap.js插件,先生成一个热力图,再在地图上创建一个盒子(如矩形),以纹理的形式把热力图填充到矩形中。

     1、首先下载heatmap.js插件,自己随意写了一个热力图的方法,传入热力图所需参数max和data

    // 创建热力图
    function createHeatMap(max, data) {
        // 创建元素
        var heatDoc = document.createElement("div");
        heatDoc.setAttribute("style", "width:1000px;height:1000px;margin: 0px;display: none;");
        document.body.appendChild(heatDoc);
        // 创建热力图对象
        var heatmap = h337.create({
            container: heatDoc,
            radius: 20,
            maxOpacity: .5,
            minOpacity: 0,
            blur: .75,
            gradient: {
                '0.9':'red',
                '0.8':'orange',
                '0.7':'yellow',
                '0.5':'blue',
                '0.3':'green',
            },
        });
        // 添加数据
        heatmap.setData({
            max: max,
            data: data
        });
        return heatmap;
    }

     2、创建一个cesium视图对象

    var viewer = new Cesium.Viewer("viewer");

       3、在之前建的cesium视图中,创建一个矩形(也可是椭圆、正方形、多边形等),在矩形内以纹理的形式填充,自己随意封装了一个方法

    // 创建正方形 绑定热力图 
    function createRectangle(viewer, coordinate, heatMap) {
        viewer.entities.add({
            name: 'Rotating rectangle with rotating texture coordinate',
            show: true,
            rectangle: {
                coordinates: Cesium.Rectangle.fromDegrees(coordinate[0], coordinate[1], coordinate[2], coordinate[3]),
                material: heatMap._renderer.canvas // 核心语句,填充热力图
            }
        });
    }

      4、随意生成多个点数据

    // 生成len个随机数据
    function getData(len) {
        //构建一些随机数据点
        var points = [];
        var max = 0;
        var width = 1000;
        var height = 1000;
        while (len--) {
            var val = Math.floor(Math.random() * 1000);
            max = Math.max(max, val);
            var point = {
                x: Math.floor(Math.random() * width),
                y: Math.floor(Math.random() * height),
                value: val
            };
            points.push(point);
        }
        return {max: max, data: points}
    }

    5、使用上述方法,则生成热力图

    // 第一个热力图
    var coordinate1 = [-109.0, 10.0, -80.0, 35.0];
    var heatMap1 = createHeatMap(getData(1000).max, getData(1000).data);
    creatRectangle(viewer, coordinate1, heatMap1);
    
    // 第二个热力图
    var coordinate2 = [-109.0, 30.0, -80.0, 41.0];
    var heatMap2 = createHeatMap(getData(3000).max, getData(3000).data);
    creatRectangle(viewer, coordinate2, heatMap2);
    
    // 第三个热力图
    var coordinate3 = [-109.0, 41.0, -80.0, 50.0];
    var heatMap3 = createHeatMap(getData(5000).max, getData(5000).data);
    creatRectangle(viewer, coordinate3, heatMap3);

     6、效果如下,因为数据都是随意添加的,所以效果不好,但是可以体现出能在cesium中实现热力图

     

     

     

     

     

    展开全文
  • Cesium 热力图实现

    2020-10-12 16:56:24
    1.效果 2.实现代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=...

    1.效果图

    2.实现代码

    <!DOCTYPE html>
    <html>
    	<head lang="en">
    		<meta charset="UTF-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    		<title>Cesium 热力图</title>
    		<script src="Cesium/Cesium.js"></script>
    		<script src="lib/CesiumHeatmap.js"></script>
    		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    		<link rel="stylesheet" href="Cesium/Widgets/widgets.css">
    		<style>
    			html,
    			body,
    			#cesiumContainer {
    				width: 100%;
    				height: 100%;
    				margin: 0;
    				padding: 0;
    				overflow: hidden;
    			}
    			.btnDiv{				
    				position: absolute;
    				top: 0;
    			}
    			.btn{
    				height: 40px;
    				width: 100px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="cesiumContainer" class="fullSize"></div>		
    		<div class="btnDiv">
    			<button class="btn" id="add">添加</button>
    			<button class="btn" id="remove">删除</button>				
    		</div>
    		<script>
    			var esri = new Cesium.ArcGisMapServerImageryProvider({
    				url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
    				enablePickFeatures: false
    			});
    			var _self = this
    			var viewer = new Cesium.Viewer('cesiumContainer', {
    				imageryProvider: esri,
    				contextOptions: {
    					webgl: {
    						alpha: true
    					}
    				},
    				selectionIndicator: false,
    				animation: false, //是否显示动画控件
    				baseLayerPicker: false, //是否显示图层选择控件
    				geocoder: false, //是否显示地名查找控件
    				timeline: false, //是否显示时间线控件
    				sceneModePicker: true, //是否显示投影方式控件
    				navigationHelpButton: false, //是否显示帮助信息控件
    				infoBox: false, //是否显示点击要素之后显示的信息
    				fullscreenButton: true
    			});
    
    			// 初始化一个矩形坐标
    			var bounds = {
    				west: -109.0,
    				south: 30.0,
    				east: -80.0,
    				north: 50.0
    			};
    			//初始化cesiumheatmap对象,传入相应的参数
    			this.heatMap = window.CesiumHeatmap.create(
    				viewer, // 视图层
    				bounds, // 矩形坐标
    				{ // heatmap相应参数
    					backgroundColor: "rgba(0,0,0,0)",
    					radius: 50,
    					maxOpacity: .5,
    					minOpacity: 0,
    					blur: .75
    				}
    			);
    			// random example data 添加数据 最小值,最大值,数据集
    			let data = [{"x":147.1383442264,"y":-41.4360048372,"value":76},{"x":147.1384363011,"y":-41.4360298848,"value":63},{"x":147.138368102,"y":-41.4358360603,"value":1},{"x":147.1385627739,"y":-41.4358799123,"value":21},{"x":147.1385138501,"y":-41.4359327669,"value":28},{"x":147.1385031219,"y":-41.4359730105,"value":41},{"x":147.1384127393,"y":-41.435928255,"value":75},{"x":147.1384551136,"y":-41.4359450132,"value":3},{"x":147.1384927196,"y":-41.4359158649,"value":45},{"x":147.1384938639,"y":-41.4358498311,"value":45},{"x":147.1385183299,"y":-41.4360213794,"value":93},{"x":147.1384007925,"y":-41.4359860133,"value":46},{"x":147.1383604844,"y":-41.4358298672,"value":54},{"x":147.13851025,"y":-41.4359098303,"value":39},{"x":147.1383874733,"y":-41.4358511035,"value":34},{"x":147.1384981796,"y":-41.4359355403,"value":81},{"x":147.1384504107,"y":-41.4360332348,"value":39},{"x":147.1385582664,"y":-41.4359788335,"value":20},{"x":147.1383967364,"y":-41.4360581999,"value":35},{"x":147.1383839615,"y":-41.436016316,"value":47},{"x":147.1384082712,"y":-41.4358423338,"value":36},{"x":147.1385092651,"y":-41.4358577623,"value":69},{"x":147.138360356,"y":-41.436046789,"value":90},{"x":147.138471893,"y":-41.4359184292,"value":88},{"x":147.1385605689,"y":-41.4360271359,"value":81},{"x":147.1383585714,"y":-41.4359362476,"value":32},{"x":147.1384939114,"y":-41.4358844253,"value":67},{"x":147.138466724,"y":-41.436019121,"value":17},{"x":147.1385504355,"y":-41.4360614056,"value":49},{"x":147.1383883832,"y":-41.4358733544,"value":82},{"x":147.1385670669,"y":-41.4359650236,"value":25},{"x":147.1383416534,"y":-41.4359310876,"value":82},{"x":147.138525285,"y":-41.4359394661,"value":66},{"x":147.1385487719,"y":-41.4360137656,"value":73},{"x":147.1385496029,"y":-41.4359187277,"value":73},{"x":147.1383989222,"y":-41.4358556562,"value":61},{"x":147.1385499424,"y":-41.4359149305,"value":67},{"x":147.138404523,"y":-41.4359563326,"value":90},{"x":147.1383883675,"y":-41.4359794855,"value":78},{"x":147.1383967187,"y":-41.435891185,"value":15},{"x":147.1384610005,"y":-41.4359044797,"value":15},{"x":147.1384688489,"y":-41.4360396127,"value":91},{"x":147.1384431875,"y":-41.4360684409,"value":8},{"x":147.1385411067,"y":-41.4360645847,"value":42},{"x":147.1385237178,"y":-41.4358843181,"value":31},{"x":147.1384406464,"y":-41.4360003831,"value":51},{"x":147.1384679169,"y":-41.4359950456,"value":96},{"x":147.1384194314,"y":-41.4358419739,"value":22},{"x":147.1385049792,"y":-41.4359574813,"value":44},{"x":147.1384097378,"y":-41.4358598672,"value":82},{"x":147.1384993219,"y":-41.4360352975,"value":84},{"x":147.1383640499,"y":-41.4359839518,"value":81}];
    			
    			let valueMin = 0;
    			let valueMax = 100;
    
    			// add data to heatmap
    			// heatMap.setWGS84Data(valueMin, valueMax, data);
    			var a, b;
    			// 动态数据 [{x: -97.6433525165054, y: 45.61443064377248, value: 11.409122369106317}]
    
    			function getData(length) {
    				var data = [];
    				for (var i = 0; i < length; i++) {
    					var x = Math.random() * (-109 + 80) - 80;
    					var y = Math.random() * (50 - 30) + 30;
    					var value = Math.random() * 100;
    					data.push({
    						x: x,
    						y: y,
    						value: value
    					});
    					a = x;
    					b = y;
    				}
    				return data;
    			}
    			//添加场景切换
    			viewer.camera.setView({
    				destination: Cesium.Cartesian3.fromDegrees(90.43,147.13,10000000)
    			});
    			
    			function addHeatMap(){
    				//获取动态数据
    				this.heatMap.setWGS84Data(valueMin, valueMax, getData(300));				
    			}		
    			
    			
    			$("#add").on("click",function(){
    				addHeatMap()
    			})
    			
    			$("#remove").on("click",function(){
    				viewer.entities.remove(_self.heatMap._layer);
    			})
    		</script>
    	</body>
    </html>
    

    3.CesiumHeatmap.js

    具体插件可查看https://www.patrick-wied.at/static/heatmapjs/

    /*
     *  CesiumHeatmap.js v0.1 | Cesium Heatmap Library
     *  
     *  Works with heatmap.js v2.0.0: http://www.patrick-wied.at/static/heatmapjs/
     */
    (function (window) {
    	'use strict';
    
    	function define_CesiumHeatmap() {
    		var CesiumHeatmap = {
    			defaults: {
    				useEntitiesIfAvailable: true, //whether to use entities if a Viewer is supplied or always use an ImageryProvider
    				minCanvasSize: 700,           // minimum size (in pixels) for the heatmap canvas
    				maxCanvasSize: 2000,          // maximum size (in pixels) for the heatmap canvas
    				radiusFactor: 60,             // data point size factor used if no radius is given (the greater of height and width divided by this number yields the used radius)
    				spacingFactor: 1.5,           // extra space around the borders (point radius multiplied by this number yields the spacing)
    				maxOpacity: 0.8,              // the maximum opacity used if not given in the heatmap options object
    				minOpacity: 0.1,              // the minimum opacity used if not given in the heatmap options object
    				blur: 0.85,                   // the blur used if not given in the heatmap options object
    				gradient: {                   // the gradient used if not given in the heatmap options object
    					'.3': 'blue',
    					'.65': 'yellow',
    					'.8': 'orange',
    					'.95': 'red'
    				},
    			}
    		};
    
    		/*  Create a CesiumHeatmap instance
    		 *
    		 *  cesium:  the CesiumWidget or Viewer instance
    		 *  bb:      the WGS84 bounding box like {north, east, south, west}
    		 *  options: a heatmap.js options object (see http://www.patrick-wied.at/static/heatmapjs/docs.html#h337-create)
    		 */
    		CesiumHeatmap.create = function (cesium, bb, options) {
    			var instance = new CHInstance(cesium, bb, options);
    			return instance;
    		};
    
    		CesiumHeatmap._getContainer = function (width, height, id) {
    			var c = document.createElement("div");
    			if (id) {
    				c.setAttribute("id", id);
    			}
    			c.setAttribute("style", "width: " + width + "px; height: " + height + "px; margin: 0px; display: none;");
    			document.body.appendChild(c);
    			return c;
    		};
    
    		CesiumHeatmap._getImageryProvider = function (instance) {
    			//var n = (new Date()).getTime();
    			var d = instance._heatmap.getDataURL();
    			//console.log("Create data URL: " + ((new Date()).getTime() - n));
    
    			//var n = (new Date()).getTime();
    			var imgprov = new Cesium.SingleTileImageryProvider({
    				url: d,
    				rectangle: instance._rectangle
    			});
    			//console.log("Create imageryprovider: " + ((new Date()).getTime() - n));
    
    			imgprov._tilingScheme = new Cesium.WebMercatorTilingScheme({
    				rectangleSouthwestInMeters: new Cesium.Cartesian2(instance._mbounds.west, instance._mbounds.south),
    				rectangleNortheastInMeters: new Cesium.Cartesian2(instance._mbounds.east, instance._mbounds.north)
    			});
    
    			return imgprov;
    		};
    
    		CesiumHeatmap._getID = function (len) {
    			var text = "";
    			var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    
    			for (var i = 0; i < ((len) ? len : 8); i++)
    				text += possible.charAt(Math.floor(Math.random() * possible.length));
    
    			return text;
    		};
    
    		var Cesium = window.Cesium;
    		var WMP = new Cesium.WebMercatorProjection();
    
    		/*  Convert a WGS84 location into a mercator location
    		 *
    		 *  p: the WGS84 location like {x: lon, y: lat}
    		 */
    		CesiumHeatmap.wgs84ToMercator = function (p) {
    			var mp = WMP.project(Cesium.Cartographic.fromDegrees(p.x, p.y));
    			return {
    				x: mp.x,
    				y: mp.y
    			};
    		};
    
    		/*  Convert a WGS84 bounding box into a mercator bounding box
    		 *
    		 *  bb: the WGS84 bounding box like {north, east, south, west}
    		 */
    		CesiumHeatmap.wgs84ToMercatorBB = function (bb) {
    			var sw = WMP.project(Cesium.Cartographic.fromDegrees(bb.west, bb.south));
    			var ne = WMP.project(Cesium.Cartographic.fromDegrees(bb.east, bb.north));
    			return {
    				north: ne.y,
    				east: ne.x,
    				south: sw.y,
    				west: sw.x
    			};
    		};
    
    		/*  Convert a mercator location into a WGS84 location
    		 *
    		 *  p: the mercator lcation like {x, y}
    		 */
    		CesiumHeatmap.mercatorToWgs84 = function (p) {
    			var wp = WMP.unproject(new Cesium.Cartesian3(p.x, p.y));
    			return {
    				x: wp.longitude,
    				y: wp.latitude
    			};
    		};
    
    		/*  Convert a mercator bounding box into a WGS84 bounding box
    		 *
    		 *  bb: the mercator bounding box like {north, east, south, west}
    		 */
    		CesiumHeatmap.mercatorToWgs84BB = function (bb) {
    			var sw = WMP.unproject(new Cesium.Cartesian3(bb.west, bb.south));
    			var ne = WMP.unproject(new Cesium.Cartesian3(bb.east, bb.north));
    			return {
    				north: this.rad2deg(ne.latitude),
    				east: this.rad2deg(ne.longitude),
    				south: this.rad2deg(sw.latitude),
    				west: this.rad2deg(sw.longitude)
    			};
    		};
    
    		/*  Convert degrees into radians
    		 *
    		 *  d: the degrees to be converted to radians
    		 */
    		CesiumHeatmap.deg2rad = function (d) {
    			var r = d * (Math.PI / 180.0);
    			return r;
    		};
    
    		/*  Convert radians into degrees
    		 *
    		 *  r: the radians to be converted to degrees
    		 */
    		CesiumHeatmap.rad2deg = function (r) {
    			var d = r / (Math.PI / 180.0);
    			return d;
    		};
    
    		return CesiumHeatmap;
    	}
    
    	if (typeof(CesiumHeatmap) === 'undefined') {
    		window.CesiumHeatmap = define_CesiumHeatmap(window.Cesium);
    	} else {
    		console.log("CesiumHeatmap already defined.");
    	}
    })(window);
    
    /*  Initiate a CesiumHeatmap instance
     *
     *  c:  CesiumWidget instance
     *  bb: a WGS84 bounding box like {north, east, south, west}
     *  o:  a heatmap.js options object (see http://www.patrick-wied.at/static/heatmapjs/docs.html#h337-create)
     */
    function CHInstance(c, bb, o) {
    	if (!bb) {
    		return null;
    	}
    	if (!o) {
    		o = {};
    	}
    
    	this._cesium = c;
    	this._options = o;
    	this._id = CesiumHeatmap._getID();
    
    	this._options.gradient = ((this._options.gradient) ? this._options.gradient : CesiumHeatmap.defaults.gradient);
    	this._options.maxOpacity = ((this._options.maxOpacity) ? this._options.maxOpacity : CesiumHeatmap.defaults.maxOpacity);
    	this._options.minOpacity = ((this._options.minOpacity) ? this._options.minOpacity : CesiumHeatmap.defaults.minOpacity);
    	this._options.blur = ((this._options.blur) ? this._options.blur : CesiumHeatmap.defaults.blur);
    
    	this._mbounds = CesiumHeatmap.wgs84ToMercatorBB(bb);
    	this._setWidthAndHeight(this._mbounds);
    
    	this._options.radius = Math.round((this._options.radius) ? this._options.radius : ((this.width > this.height) ? this.width / CesiumHeatmap.defaults.radiusFactor : this.height / CesiumHeatmap.defaults.radiusFactor));
    
    	this._spacing = this._options.radius * CesiumHeatmap.defaults.spacingFactor;
    	this._xoffset = this._mbounds.west;
    	this._yoffset = this._mbounds.south;
    
    	this.width = Math.round(this.width + this._spacing * 2);
    	this.height = Math.round(this.height + this._spacing * 2);
    
    	this._mbounds.west -= this._spacing * this._factor;
    	this._mbounds.east += this._spacing * this._factor;
    	this._mbounds.south -= this._spacing * this._factor;
    	this._mbounds.north += this._spacing * this._factor;
    
    	this.bounds = CesiumHeatmap.mercatorToWgs84BB(this._mbounds);
    
    	this._rectangle = Cesium.Rectangle.fromDegrees(this.bounds.west, this.bounds.south, this.bounds.east, this.bounds.north);
    	this._container = CesiumHeatmap._getContainer(this.width, this.height, this._id);
    	this._options.container = this._container;
    	this._heatmap = h337.create(this._options);
    	this._container.children[0].setAttribute("id", this._id + "-hm");
    }
    
    /*  Convert a WGS84 location to the corresponding heatmap location
     *
     *  p: a WGS84 location like {x:lon, y:lat}
     */
    CHInstance.prototype.wgs84PointToHeatmapPoint = function (p) {
    	return this.mercatorPointToHeatmapPoint(CesiumHeatmap.wgs84ToMercator(p));
    };
    
    /*  Convert a mercator location to the corresponding heatmap location
     *
     *  p: a WGS84 location like {x: lon, y:lat}
     */
    CHInstance.prototype.mercatorPointToHeatmapPoint = function (p) {
    	var pn = {};
    
    	pn.x = Math.round((p.x - this._xoffset) / this._factor + this._spacing);
    	pn.y = Math.round((p.y - this._yoffset) / this._factor + this._spacing);
    	pn.y = this.height - pn.y;
    
    	return pn;
    };
    
    CHInstance.prototype._setWidthAndHeight = function (mbb) {
    	this.width = ((mbb.east > 0 && mbb.west < 0) ? mbb.east + Math.abs(mbb.west) : Math.abs(mbb.east - mbb.west));
    	this.height = ((mbb.north > 0 && mbb.south < 0) ? mbb.north + Math.abs(mbb.south) : Math.abs(mbb.north - mbb.south));
    	this._factor = 1;
    
    	if (this.width > this.height && this.width > CesiumHeatmap.defaults.maxCanvasSize) {
    		this._factor = this.width / CesiumHeatmap.defaults.maxCanvasSize;
    
    		if (this.height / this._factor < CesiumHeatmap.defaults.minCanvasSize) {
    			this._factor = this.height / CesiumHeatmap.defaults.minCanvasSize;
    		}
    	} else if (this.height > this.width && this.height > CesiumHeatmap.defaults.maxCanvasSize) {
    		this._factor = this.height / CesiumHeatmap.defaults.maxCanvasSize;
    
    		if (this.width / this._factor < CesiumHeatmap.defaults.minCanvasSize) {
    			this._factor = this.width / CesiumHeatmap.defaults.minCanvasSize;
    		}
    	} else if (this.width < this.height && this.width < CesiumHeatmap.defaults.minCanvasSize) {
    		this._factor = this.width / CesiumHeatmap.defaults.minCanvasSize;
    
    		if (this.height / this._factor > CesiumHeatmap.defaults.maxCanvasSize) {
    			this._factor = this.height / CesiumHeatmap.defaults.maxCanvasSize;
    		}
    	} else if (this.height < this.width && this.height < CesiumHeatmap.defaults.minCanvasSize) {
    		this._factor = this.height / CesiumHeatmap.defaults.minCanvasSize;
    
    		if (this.width / this._factor > CesiumHeatmap.defaults.maxCanvasSize) {
    			this._factor = this.width / CesiumHeatmap.defaults.maxCanvasSize;
    		}
    	}
    
    	this.width = this.width / this._factor;
    	this.height = this.height / this._factor;
    };
    
    /*  Set an array of heatmap locations
     *
     *  min:  the minimum allowed value for the data values
     *  max:  the maximum allowed value for the data values
     *  data: an array of data points in heatmap coordinates and values like {x, y, value}
     */
    CHInstance.prototype.setData = function (min, max, data) {
    	if (data && data.length > 0 && min !== null && min !== false && max !== null && max !== false) {
    		this._heatmap.setData({
    			min: min,
    			max: max,
    			data: data
    		});
    
    		this.updateLayer();
    		return true;
    	}
    
    	return false;
    };
    
    /*  Set an array of WGS84 locations
     *
     *  min:  the minimum allowed value for the data values
     *  max:  the maximum allowed value for the data values
     *  data: an array of data points in WGS84 coordinates and values like { x:lon, y:lat, value }
     */
    CHInstance.prototype.setWGS84Data = function (min, max, data) {
    	if (data && data.length > 0 && min !== null && min !== false && max !== null && max !== false) {
    		var convdata = [];
    
    		for (var i = 0; i < data.length; i++) {
    			var gp = data[i];
    
    			var hp = this.wgs84PointToHeatmapPoint(gp);
    			if (gp.value || gp.value === 0) {
    				hp.value = gp.value;
    			}
    
    			convdata.push(hp);
    		}
    
    		return this.setData(min, max, convdata);
    	}
    
    	return false;
    };
    
    /*  Set whether or not the heatmap is shown on the map
     *
     *  s: true means the heatmap is shown, false means the heatmap is hidden
     */
    CHInstance.prototype.show = function (s) {
    	if (this._layer) {
    		this._layer.show = s;
    	}
    };
    
    /*  Update/(re)draw the heatmap
     */
    CHInstance.prototype.updateLayer = function () {
    
    	// only works with a Viewer instance since the cesiumWidget
    	// instance doesn't contain an entities property
    	if (CesiumHeatmap.defaults.useEntitiesIfAvailable && this._cesium.entities) {
    		if (this._layer) {
    			this._cesium.entities.remove(this._layer);
    		}
    
    		// Work around issue with material rendering in Cesium
    		// provided by https://github.com/criis
    		material = new Cesium.ImageMaterialProperty({
    			image: this._heatmap._renderer.canvas,
    		});
    		if (Cesium.VERSION >= "1.21") {
    			material.transparent = true;
    		} else if (Cesium.VERSION >= "1.16") {
    			material.alpha = 0.99;
    		}
    
    		this._layer = this._cesium.entities.add({
    			show: true,
    			rectangle: {
    				coordinates: this._rectangle,
    				material: material
    			}
    		});
    	} else {
    		if (this._layer) {
    			this._cesium.scene.imageryLayers.remove(this._layer);
    		}
    
    		this._layer = this._cesium.scene.imageryLayers.addImageryProvider(CesiumHeatmap._getImageryProvider(this));
    	}
    };
    
    /*  DON'T TOUCH:
     *
     *  heatmap.js v2.0.0 | JavaScript Heatmap Library: http://www.patrick-wied.at/static/heatmapjs/
     *
     *  Copyright 2008-2014 Patrick Wied <heatmapjs@patrick-wied.at> - All rights reserved.
     *  Dual licensed under MIT and Beerware license
     *
     *  :: 2014-10-31 21:16
     */
    (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()
    //	}
    	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 = +g.width.replace(/px/, "");
    			this._height = e.height = d.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) {
    				this._drawAlpha(a);
    				this._colorize()
    			}, renderAll: function (a) {
    				this._clear();
    				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._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]
    					}
    					n.globalAlpha = (k - c) / (d - c);
    					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
    });

     

    展开全文
  • cesium 热力图

    2021-01-27 18:06:33
    引入CesiumHeatmap.js <!DOCTYPE html> <html lang="en"> ...script src="../Build/Cesium/Cesium.js"></script> <script src="CesiumHeatmap.js"></script> <style>
  • Cesium热力图

    2019-08-15 17:46:21
  • Cesium热力图实现

    万次阅读 2017-05-14 10:01:46
    生成热力图的算法我是用的一个热力图插件 heatmap.js。 heatmap中热力图生成原理: heatmap中首先会根据输入的渐进色参数,在内部生成一个0-255色值的调色板。 var _getColorPalette = function...
  • cesium热力图(cesiumheatmap.js)

    千次阅读 热门讨论 2018-06-28 16:27:08
    无意中看到有个大神写了一个cesiumheatmap.js,顾名思义,就是在cesium框架中实现热力图原理是创建矩形,用heatmap.js生成一个canvas,再将canvas贴到矩形中这位大神将热力图的canvas大小通过传入的矩形坐标生成,将...
  • Cesium热力图之【CesiumHeatmap】

    千次阅读 2018-09-29 10:55:23
    // init heatmap let heatMap = CesiumHeatmap.create( myViewer, // your cesium viewer bounds, // bounds for heatmap layer { // heatmap.js options go here // maxOpacity: 0.3 } ); // random example data ...
  • Cesium模型热力图

    2020-12-21 22:31:04
    Cesium模型热力图效果 效果 详情参见 Cesium实战项目
  • Cesium系列:热力图

    千次阅读 2020-01-14 09:05:15
    Cesium上根据点,可以显示出热力图,在网上有开源的代码,具体的参考网址如下: https://github.com/danwild/CesiumHeatmap 使用方式如下: function testLoc(){ //设定热力图的四至范围 let bounds = { ...
  • 对于热力图,在我们的GIS业务中经常用到,二维的leaflet、openlayers都有成熟的案例,对于Cesium,在进行热力图功能研发的时候发现前辈造好的轮子,由于刚处在Cesium学习阶段,对于我们初学者非常友好了,...
  • Cesium-热力图实现

    千次阅读 2020-04-14 23:27:55
    cesium热力图,heatmap.js,cesium-heatmap
  • vue+js:Heatmap 热力图实现,亲测可用,依赖Heatmap.js插件,下载后添加引用即可。
  • cesium中实现热力图

    千次阅读 2020-07-06 14:44:12
    原理:使用heatmap.js插件,先生成一个热力图,再在地图上创建一个盒子(如矩形),以纹理的形式把热力图填充到矩形中。 1、首先下载heatmap.js插件,自己随意写了一个热力图的方法,传入热力图所需参数max和data...
  • cesium 加载热力图

    2021-04-14 20:34:14
    效果 1.首先引入CesiumHeatmap.js,CesiumHeatmap.js,地址不要积分。 2.地图初始化 var viewer = new Cesium.Viewer("csiumContain", { homeButton: true,//是否显示Home按钮 animation: false,//是否显示动画...
  • Cesium|xt3d热力图

    2021-08-30 17:01:58
    Cesium|xt3d热力图效果代码预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial...
  • cesium中实现热力图

    千次阅读 热门讨论 2018-06-14 16:42:32
    刚开始接触cesium,说实话,对于像我这类的小白来说,要想快速上手,确实有一定的难度,但是站在巨人的... 1、首先下载heatmap.js插件,自己随意写了一个热力图的方法,传入热力图所需参数max和data// 创建热力图 f...
  • 热力图中每一个点可以拥有的最大值(超出这个值则和这个值相等) 最小值(min) 热力图中每一个点可以拥有的最小值(低于这个值则忽略改点) 如何绘制 使用热力图插件 heatmap.js: heatmap中首先会根
  • Cesium中展示热力图heatmap

    千次阅读 2020-08-25 13:50:05
    本文介绍如何在Cesium中展示热力图。目前比较常用的热力图插件是heatmap.js,实现的原理是使用heatmap.js生成热力图后,再将图贴到Cesium的相应位置。 准备工作: 1. 首先下载heatmap.js插件,官网地址:...
  • [cesium] 绘制热力图

    千次阅读 2019-07-13 20:19:52
    效果 代码 ... * @CesiumHeatmap CesiumHeatmap热力图 * @CesiumHeatmapGL CesiumHeatmapGL热力图 * @dataType wfs geojson * @version v1 */ var cesiumHeatMap = (function (){...
  • geojson生成热力图cesium加载 转载至:http://blog.sina.com.cn/s/blog_15e866bbe0102yysr.html 先说原理:创建canvas,遍历json文件中的坐标生成热点,把生成的图片弄到canvas上。 上面那位博主的js文件已经做了...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 258
精华内容 103
关键字:

cesium热力图