Earthquakes Heatmap——地震热点图

来源：互联网发布：mac在线字幕的播放器编辑：程序博客网时间：2024/06/06 07:38

This example parses a KML file and renders the features as aol.layer.Heatmap layer.
这个例子解析一个KML文件并渲染要素为一个ol.layer.Heatmap图层。

代码：

<!DOCTYPE html><html>  <head>    <title>Earthquakes Heatmap</title>    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>  </head>  <body>    <div id="map" class="map"></div>    <form>      <label>radius size</label>      <input id="radius" type="range" min="1" max="50" step="1" value="5"/>      <label>blur size</label>      <input id="blur" type="range" min="1" max="50" step="1" value="15"/>    </form>    <script>      // 模糊大小      var blur = document.getElementById('blur');      // 半径大小      var radius = document.getElementById('radius');      // 创建一个ol.layer.Heatmap图层      var vector = new ol.layer.Heatmap({        source: new ol.source.Vector({          // KML数据          url: 'https://openlayers.org/en/v4.2.0/examples/data/kml/2012_Earthquakes_Mag5.kml',          // KML格式          format: new ol.format.KML({            // 不提取KML自带的样式            extractStyles: false          })        }),        // 模糊度        blur: parseInt(blur.value, 10),        // 半径大小        radius: parseInt(radius.value, 10)      });      // 添加KML文件的时候获取相关属性信息      vector.getSource().on('addfeature', function(event) {        var name = event.feature.get('name');        var magnitude = parseFloat(name.substr(2));        event.feature.set('weight', magnitude - 5);      });      // Stamen瓦片地图      var raster = new ol.layer.Tile({        source: new ol.source.Stamen({          layer: 'toner'        })      });      var map = new ol.Map({        layers: [raster, vector],        target: 'map',        view: new ol.View({          center: [0, 0],          zoom: 2        })      });      // 拖动滑块的时候改变Heatmap图层的模糊值      blur.addEventListener('input', function() {        vector.setBlur(parseInt(blur.value, 10));      });      // 拖动滑块的时候改变Heatmap图层的半径大小      radius.addEventListener('input', function() {        vector.setRadius(parseInt(radius.value, 10));      });    </script>  </body></html>

阅读全文

0 0