<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
href="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<script src="/bmgl/3dheatMap/heatmap.min.js"></script>
<script src="/bmgl/3dheatMap/util.js"></script>
<script src="/bmgl/3dheatMap/heatmap3d.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none;
}
.tools {
display: flex;
position: absolute;
width: 200px;
height: 200px;
z-index: 999;
justify-content: space-between;
top: 20px;
right: 80px;
}
.item {
width: 80px;
height: 40px;
background-color: #59acff;
color: #ffffff;
text-align: center;
font-size: 14px;
line-height: 40px;
padding: 0 6px;
border-radius: 4px;
cursor: pointer;
}
</style>
<title>热力图3D</title>
</head>
<body>
<div id="container">
<div class="tools">
<h4 class="item one">销毁热力图</h4>
<h4 class="item two">创建热力图</h4>
</div>
</div>
<script>
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
var viewer = new bmgl.Viewer("container", {
mapId: "bigemap.zhongkexingtu",
requestRenderMode:false,
});
let heat = null;
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//开启抗锯齿
viewer.scene.postProcessStages.fxaa.enabled = true;
//热力图经纬度和对应的数值
let list = [
{
lnglat: [117.31650620472698, 31.90717015378681],
value: 492.0551915777627,
},
{
lnglat: [117.19292115544232, 31.919015040691853],
value: 14.778295344125336,
},
{
lnglat: [117.24392067643033, 31.982951517904024],
value: 452.3432453589313,
},
{
lnglat: [117.19186192843988, 32.006341492383065],
value: 794.6444550863479,
},
{
lnglat: [117.26577880689568, 31.97892526126794],
value: 226.37623146731477,
},
{
lnglat: [117.32465808319644, 31.93459807286933],
value: 929.1402307381684,
},
{
lnglat: [117.21571864864599, 31.829473420463753],
value: 961.5225108205215,
},
{
lnglat: [117.3694413042228, 31.97142102550316],
value: 120.30464561644116,
},
{
lnglat: [117.22841821804785, 31.8335035846036],
value: 266.2615388493081,
},
{
lnglat: [117.3708508375893, 31.938232123553725],
value: 726.0544725997245,
},
{
lnglat: [117.29274954514418, 31.993177650528395],
value: 773.6178603139185,
},
{
lnglat: [117.33921165779587, 32.0153501938145],
value: 167.7500368360787,
},
{
lnglat: [117.26450427619697, 31.891035978319614],
value: 341.81146877620284,
},
{
lnglat: [117.21859460768218, 31.965737636039137],
value: 863.7412849391397,
},
{
lnglat: [117.35275179831797, 31.912882155590275],
value: 605.7096436838553,
},
{
lnglat: [117.29245286190982, 31.89103656882723],
value: 89.82591803894601,
},
{
lnglat: [117.3257406796014, 31.87925352944771],
value: 348.61222196654086,
},
{
lnglat: [117.33617538271912, 31.86557661688333],
value: 713.3164993567011,
},
{
lnglat: [117.21124079270321, 31.88462588642381],
value: 427.0398706974168,
},
{
lnglat: [117.21103473475564, 31.934306712055783],
value: 370.14634927043153,
},
{
lnglat: [117.2573614344461, 31.890479425949223],
value: 624.5021787686691,
},
{
lnglat: [117.28195934396744, 32.000929560862915],
value: 287.2344416842101,
},
{
lnglat: [117.27418414928003, 31.908252005650912],
value: 743.7243447067802,
},
{
lnglat: [117.3117452613449, 31.956125172103338],
value: 976.6589620656241,
},
{
lnglat: [117.2626625545459, 31.97206853566354],
value: 508.05489007989604,
},
{
lnglat: [117.32882592343944, 32.00719141808376],
value: 785.0073372890927,
},
{
lnglat: [117.29694408843845, 31.967435703636223],
value: 458.75461780579775,
},
{
lnglat: [117.26982897491388, 31.88905222860068],
value: 255.34273465086034,
},
{
lnglat: [117.23338637554362, 31.838581969558557],
value: 993.0252308783806,
},
{
lnglat: [117.22439730406317, 31.878523935758608],
value: 812.7346975895396,
},
{
lnglat: [117.29725725628393, 31.977148794270857],
value: 320.25865223504235,
},
{
lnglat: [117.29377622946545, 31.911730518081683],
value: 623.1951160493032,
},
{
lnglat: [117.31588150507861, 31.874498544740774],
value: 527.369454892243,
},
{
lnglat: [117.29304209221256, 31.83785584925952],
value: 665.6868930006192,
},
{
lnglat: [117.20261720325158, 32.014032353133025],
value: 17.66264621474423,
},
{
lnglat: [117.32959711525885, 31.999142575958427],
value: 831.2513791284497,
},
{
lnglat: [117.3560951515373, 31.86043014518757],
value: 107.4629449862079,
},
{
lnglat: [117.2475736610689, 31.992929989180226],
value: 511.7493754123268,
},
{
lnglat: [117.2876698097963, 31.891748024085615],
value: 254.66694710204396,
},
{
lnglat: [117.24428225953262, 32.01271240286776],
value: 840.0146470669425,
},
{
lnglat: [117.30264959177491, 32.00805400994572],
value: 755.0679437306085,
},
{
lnglat: [117.22103683601048, 32.01771995087162],
value: 48.31737156559113,
},
{
lnglat: [117.33377041131811, 31.913205795757904],
value: 96.32124570375744,
},
{
lnglat: [117.19110073520737, 31.982821585194763],
value: 463.34176883857083,
},
{
lnglat: [117.3486343944902, 31.878958114955623],
value: 780.9766023685419,
},
{
lnglat: [117.2762234268848, 31.99788366098087],
value: 650.676948619626,
},
{
lnglat: [117.31418128730124, 31.93241632856691],
value: 341.7361496865754,
},
{
lnglat: [117.37099386229853, 31.901434285293707],
value: 218.32359616364604,
},
{
lnglat: [117.28427454921882, 31.887851893804143],
value: 705.4713901200294,
},
{
lnglat: [117.30322524268604, 31.875699009561377],
value: 251.4825276860635,
},
{
lnglat: [117.29721889986457, 31.97547118783994],
value: 764.3899490097476,
},
{
lnglat: [117.18468685820771, 31.987566963534004],
value: 306.96024058768387,
},
{
lnglat: [117.19302223974547, 31.882718274517316],
value: 646.8281409661112,
},
{
lnglat: [117.31466612735863, 31.91599246153278],
value: 528.0164125684188,
},
{
lnglat: [117.36016323368543, 31.954088985644848],
value: 5.822245839917972,
},
{
lnglat: [117.21251772621096, 31.844089873776888],
value: 840.0808632097971,
},
{
lnglat: [117.31542608749412, 32.02141127755148],
value: 316.28660005788925,
},
{
lnglat: [117.3308699679922, 31.978295284576692],
value: 44.21642366607803,
},
{
lnglat: [117.28763273987975, 32.00396657337112],
value: 842.8842967646655,
},
{
lnglat: [117.21166143196844, 31.884454381428412],
value: 953.6802515491496,
},
{
lnglat: [117.3093665751873, 31.885564436075544],
value: 441.9874425560304,
},
{
lnglat: [117.27403601637678, 31.833085285127424],
value: 205.65233990347576,
},
{
lnglat: [117.25539129230192, 31.824084641030133],
value: 332.4973456721085,
},
{
lnglat: [117.24079009186715, 31.85479933074965],
value: 188.09151377045131,
},
{
lnglat: [117.2866658052444, 31.89657582226943],
value: 795.6293343956299,
},
{
lnglat: [117.36472889672142, 31.98587531237735],
value: 788.8853358781158,
},
{
lnglat: [117.30093230800566, 31.93558436341359],
value: 502.4515950206685,
},
{
lnglat: [117.18353055377659, 31.99924040157173],
value: 238.18505355866316,
},
{
lnglat: [117.37638651898791, 31.99686117967683],
value: 72.00851986792722,
},
{
lnglat: [117.2657490938389, 31.96518369066472],
value: 929.5493747899188,
},
{
lnglat: [117.20149181434208, 31.929184634355952],
value: 426.21206220118,
},
{
lnglat: [117.31518920838411, 31.825144824808696],
value: 123.087993686684,
},
{
lnglat: [117.24335190185809, 31.866347459174598],
value: 744.9759294268786,
},
{
lnglat: [117.33836005280581, 31.823236201792046],
value: 903.0279260654546,
},
{
lnglat: [117.21658221858388, 31.981539821445427],
value: 949.0789146097156,
},
{
lnglat: [117.2115979628332, 31.85013382856101],
value: 633.2114313835517,
},
{
lnglat: [117.23178708157141, 31.856848896639875],
value: 800.2342558731912,
},
{
lnglat: [117.36605449265356, 31.863476015472724],
value: 450.78193612003423,
},
{
lnglat: [117.30118211953447, 31.848106082438214],
value: 587.7124500699098,
},
{
lnglat: [117.19716495491767, 31.859952028770486],
value: 107.41875099873855,
},
{
lnglat: [117.36355803190752, 31.939199868040998],
value: 235.96832426749882,
},
{
lnglat: [117.36941935339792, 31.880879470028802],
value: 36.63542975568102,
},
{
lnglat: [117.19701707849607, 31.893188074441056],
value: 853.5690282006427,
},
{
lnglat: [117.24118258435479, 31.87895307217169],
value: 569.7427767880023,
},
{
lnglat: [117.282672215115, 31.87028020319412],
value: 668.1577186917185,
},
{
lnglat: [117.23843164009553, 31.97252457090769],
value: 167.47791343188888,
},
{
lnglat: [117.18321662307457, 32.01407826298784],
value: 473.80915240701273,
},
{
lnglat: [117.36863851077959, 31.84745266419488],
value: 999.4181922807211,
},
{
lnglat: [117.29763516204302, 31.952541918432924],
value: 225.6913796302893,
},
{
lnglat: [117.36991638639984, 31.880943064992007],
value: 719.4432004716598,
},
{
lnglat: [117.23208946551978, 31.885473411808917],
value: 749.515215240528,
},
{
lnglat: [117.30739025267141, 31.942655082559472],
value: 148.11216910097568,
},
{
lnglat: [117.32956185377799, 31.98134061488504],
value: 171.71720688310654,
},
{
lnglat: [117.3142830966818, 31.837174958948104],
value: 22.07572806956182,
},
{
lnglat: [117.29794903684808, 31.933227412707144],
value: 761.6522869011493,
},
{
lnglat: [117.27831307633217, 31.99413122540948],
value: 142.3289171586235,
},
{
lnglat: [117.21798971964941, 31.953737455414682],
value: 571.3246027410332,
},
{
lnglat: [117.19820340465049, 31.975314141322777],
value: 613.4911531680481,
},
{
lnglat: [117.22172733000596, 32.01590920538933],
value: 113.1098590329227,
},
{
lnglat: [117.19211868181962, 31.975496712144352],
value: 533.9124073498998,
},
];
heat = new Heatmap3d(viewer, {
list: list,
raduis: 15,
baseHeight: 0,
primitiveType: "TRNGLE",
gradient: {
".3": "blue",
".5": "green",
".7": "yellow",
".95": "red",
},
});
viewer.camera.flyTo({
destination: bmgl.Cartesian3.fromDegrees(
117.20982028538846,
31.594884967228147,
25380.200466697992
),
orientation:{
heading:0.14589717904367383,
pitch:-0.6229719026631599,
roll:6.260870789698497
}
});
document.querySelector(".one").onclick = function () {
heat.destroy();
};
document.querySelector(".two").onclick = function () {
if(heat!= null){
heat.destroy();
}
heat = new Heatmap3d(viewer, {
list: list,
raduis: 15,
baseHeight: 0,
primitiveType: "TRNGLE",
gradient: {
".3": "blue",
".5": "green",
".7": "yellow",
".95": "red",
},
});
};
</script>
</body>
</html>
源码