基于openlayer4生成热力图

最新推荐文章于 2023-05-18 15:39:48 发布

_奈落_

最新推荐文章于 2023-05-18 15:39:48 发布

阅读量3.3k

点赞数

分类专栏： openlayer4

本文链接：https://blog.csdn.net/qq_27186245/article/details/82227396

版权

openlayer4 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!-- openlayers:地图控件 -->
<script src="js/openlayers/v4.3.3-dist/ol.js"></script>
<!-- openlayers CSS 文件 -->
<link rel="stylesheet" href="js/openlayers/v4.3.3-dist/ol.css" type="text/css" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol加载热力图</title>

</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
  </div>
  <div class="span4">
    <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>
  </div>
</div>

</div>
<script>

//底图
var raster = new ol.layer.Tile({
      source: new ol.source.Stamen({
        layer: 'toner'
      })
    });
var map = new ol.Map({
      layers: [raster],
      target: 'map',
      view: new ol.View({
        center: [117.3626, 32.9184],
        projection: ol.proj.get('EPSG:4326'),
        zoom: 12
      })
    });

    var blur = document.getElementById('blur');
    var radius = document.getElementById('radius');
    //热力图数据 GeoJSON默认参考坐标系为 EPSG:4326.，根据实际需要进行更改
    var heatData = [
            {type: "FeatureCollection",
            features:  [
                {type: "Point","coordinates": [117.363228, 32.939667], count: 80},
                {type: "Point","coordinates": [117.359623, 32.941612], count: 60},
                {type: "Point","coordinates": [117.365631, 32.94651], count: 90},
                {type: "Point","coordinates": [117.36443, 32.928789], count: 80},
                {type: "Point","coordinates": [117.351212, 32.95328], count: 60},
                {type: "Point","coordinates": [117.363228, 32.936281], count: 90},
                {type: "Point","coordinates": [117.385029, 32.948383], count: 60},
                {type: "Point","coordinates": [117.370781, 32.920144], count: 80},
                {type: "Point","coordinates": [117.393097, 32.936137], count: 80},
                {type: "Point","coordinates": [117.373528, 32.919856], count: 80},
                {type: "Point","coordinates": [117.353443, 32.916541], count: 80},
                {type: "Point","coordinates": [117.397217, 32.913803], count: 80},
                {type: "Point","coordinates": [117.35207, 32.904148], count: 80}
            ]}];
    //矢量图层 获取geojson数据
    var vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(heatData[0],{
                 dataProjection : 'EPSG:4326',
                 featureProjection : 'EPSG:4326'
        })
    });
    // Heatmap热力图             
    var vector = new ol.layer.Heatmap({
      source: vectorSource,
      opacity: [0, 0.8],//透明度
      blur: 15,//模糊大小（以像素为单位）,默认15
      radius: 12,//半径大小（以像素为单位,默认8
      shadow: 250,//阴影像素大小，默认250
      //矢量图层的渲染模式：
      //'image'：矢量图层呈现为图像。性能出色，但点符号和文本始终随视图一起旋转，像素在缩放动画期间缩放。
      //'vector'：矢量图层呈现为矢量。即使在动画期间也能获得最准确的渲染，但性能会降低。
      renderMode: 'vector'
    });
    map.addLayer(vector);
</script>
</body>
</html>

_奈落_

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
6
评论
基于openlayer4生成热力图

&lt;!-- openlayers:地图控件 --&gt;&lt;script src="js/openlayers/v4.3.3-dist/ol.js"&gt;&lt;/script&gt;&lt;!-- openlayers CSS 文件 --&gt;&lt;link rel="stylesheet" href="js/openlayers/v4.3.3-dist/ol.cs
复制链接

扫一扫