CesiumHeatmap2.html

﻿<!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热力图2</title>
    <script src="Cesium/Cesium.js"></script>
    <link href="Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script src="plugin/heatmap/heatmap.min.js"></script>
    <script src="plugin/heatmap/webgl-heatmap.js"></script>
    <script src="plugin/heatmap/CesiumHeatmapGL.js"></script>
    <style>
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #menu {
        position: absolute;
        top: 80px;
        left: 10px;
        z-index: 999;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <p>
        <button onclick="Draw()">绘制</button>
      </p>
    </div>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="creditContainer" style="display: none"></div>
    <span style="white-space: pre"></span>

    <script>
      /*
   参考 https://github.com/wangzhongliang/CesiumHeatmap  wangzhongliang/CesiumHeatmap
   */

      //一： ArcGisMapServerImageryProvider
      var esri = new Cesium.ArcGisMapServerImageryProvider({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
        enablePickFeatures: false,
      })
      var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider: esri,
        selectionIndicator: false,
        animation: false,
        baseLayerPicker: false,
        geocoder: false,
        timeline: false,
        sceneModePicker: true,
        navigationHelpButton: false,
        infoBox: false,
        fullscreenButton: true,
      })

      var heatmap = null
      function Draw() {
        if (heatmap == null) {
          heatmap = new CesiumHeatmapGL(viewer, 'plugin/heatmap/busstop2016.geojson')
        }
      }
    </script>
  </body>
</html>