地震属性热力图

载入需要的模块

import View from 'ol/View.js';
import VectorLayer from 'ol/layer/Vector'
import TileLayer from 'ol/layer/Tile';
import {OSM, Vector} from 'ol/source.js';
import XYZ from 'ol/source/XYZ.js';
import Heatmap from 'ol/layer/Heatmap'
import MousePosition from 'ol/control/MousePosition';
import {createStringXY} from 'ol/coordinate';

创建一个source文件，这个文件是热力图的数据来源文件。

var vecsourcekml1 = new Vector({
    url:文件存放路径,
    format: new KML(),
  
  })

创建矢量热力图，这个图是就是加载在地图上进行显示的图，他的数据源设置为上面的sourcevector文件

var vetorkml = new Heatmap({
    source:vecsourcekml1,
    radius:10,//设置半径
    blur:15//这应该是模糊度
  })

还有一些其他参数可以修改的，具体的可以参考openlayers的官网

再加载天地图的底图和注记层

var veclayer = new TileLayer({
    name: "天地图矢量图层",
    source: new XYZ({
        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=天地图密钥" ,
        wrapX: false
    })
  });
var veclayer2 =new TileLayer({
  title: "天地图矢量注记图层",
  source: new XYZ({
      url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=天地图密钥" ,
  })
})

# 添加一个要素载入响应事件。

vetorkml.getSource.on('addfeature',function(e){
var name = feature.get('name');
var we = name.getstr(2);
feature.set('weight',we);
})

上面是一段伪代码，意思是通过要素的kml数据中的name属性，得到一个地震的等级，将这个等级设置为权重。

载入地图

var map = new Map({
    target:'heatmap',
    layers:[veclayer,vetorkml,veclayer2],
    controls:[Mouse],
    view:new View({
        center:[0,0],
        zoom:2,
        projection:'EPSG:4326'
})
  });