openlayers3 ol3热力图 json

最近分配一个 gis地图的 任务,要我弄个热力图巨坑啊,当时就是没啥想,后来想想。

后面弄完 确实发现简单,为了方便广大网友 也方便自己写在博客

<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: [0, 0],
        zoom: 2
      })
    });
    
    var blur = document.getElementById(‘blur’);
    var radius = document.getElementById(‘radius’);
    //矢量图层 获取gejson数据
    var vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(heatData,{
                                                    dataProjection : ‘EPSG:4326’,
                                                    featureProjection : ‘EPSG:3857’
                                                  })
    });
    // Heatmap热力图             
    var vector = new ol.layer.Heatmap({
      source: vectorSource,
      blur: parseInt(blur.value, 10),
      radius: parseInt(radius.value, 10),
    });
    map.addLayer(vector);

</script>

效果图


数据量太大目前丢在资源里 地址:

http://download.csdn.net/detail/u012374381/9885617

转载自:https://blog.csdn.net/u012374381/article/details/74012187

You may also like...