基于openlayer4生成热力图


<script src="js/openlayers/v4.3.3-dist/ol.js">script>

<link rel="stylesheet" href="js/openlayers/v4.3.3-dist/ol.css" type="text/css" />


<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 sizelabel>
      <input id="radius" type="range" min="1" max="50" step="1" value="5"/>
      <label>blur sizelabel>
      <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>

你可能感兴趣的:(openlayer4)