Class: HeatMap

HeatMap

热力图层类。热力图是通过颜色分布,描述诸如人群分布、密度和变化趋势等的一种地图表现手法。 热点图的衰减是像素级别的,视觉效果极佳,但不能与具体数据进行一一对应,只能表示权重之间的差别, 因此可以用于一些对精度要求不高而需要重点突出权重渐变的行业,如制作气象温度对比动态效果图、地震区域的震点强弱图等。
在客户端直接渲染栅格图的三要素:
1.热点数据,热点数据需要点数据,每一个热点数据需要有地理位置以及权重值 (能够明显地表现某位置某事件发生频率或事物分布密度等,如可以为温度的高低、人口密集度等等);
2.热点衰减渐变填充色集合, 用于渲染每一个热点从中心向外衰减时的渐变色;
3.热点半径,也就是衰减半径。每一个热点需要从中心点外四周根据半径计算衰减度,对在热点衰减区内的每一个像素计算需要渲染的颜色值。

new HeatMap(name, options)

Usage
// 浏览器
<script type="text/javascript" src="https://iclient.supermap.io/dist/openlayers/iclient-ol.js"></script>
<script>
  new ol.source.HeatMap(name, options);
  
</script>

// ES6 Import
import { HeatMap } from '@supermapgis/iclient-ol';

new HeatMap(name, options);

openlayers/overlay/HeatMap.js, line 16
Name Type Description
name string

图层名称。

options Object

参数。

Name Type Default Description
map ol.Map

OpenLayers 的地图对象。

id string 可选

专题图层 ID,默认使用 CommonUtil.createUniqueID("HeatMapSource_") 创建专题图层 ID。

featureWeight string 可选

对应 feature 属性中的热点权重字段名称,权重值类型为 number。

radius number 50 可选

热点渲染的最大半径(热点像素半径),单位为 px,当 useGeoUnit 参数 为 true 时,单位使用当前图层地理坐标单位。热点显示的时候以精确点为中心点开始往四周辐射衰减,其衰减半径和权重值成比列。

opacity number 1 可选

图层不透明度。

colors Array.<string> ['blue','cyan','lime','yellow','red'] 可选

颜色线性渐变数组,颜色值必须为 canvas 所支持的。

useGeoUnit boolean false 可选

使用地理单位,false 表示默认热点半径默认使用像素单位。当设置为 true 时,热点半径和图层地理坐标保持一致。

Extends

Methods

addFeatures(features)

openlayers/overlay/HeatMap.js, line 105

添加热点信息。

Name Type Description
features GeoJSONObject | Array.<ol.Feature>

待添加的要素数组。

Example
var geojson = {
     "type": "FeatureCollection",
     "features": [
         {
             "type": "feature",
             "geometry": {
                 "type": "Point",  //只支持point类型
                 "coordinates": [0, 0]
             },
             "properties": {
                 "height": Math.random()*9,
             }
         }
     ]
  };
var heatMapSource = new HeatMap("heatMap",{"map": map});
heatMapSource.addFeatures(geojson);
map.addLayer(new ol.layer.Image({
      source: heatMapSource
  }));

getLocalXY(coordinate)

openlayers/overlay/HeatMap.js, line 320

地理坐标转为像素坐标。

Name Type Description
coordinate Object

坐标位置。

removeAllFeatures()

openlayers/overlay/HeatMap.js, line 408

移除全部的热点信息。

removeFeatures(features)

openlayers/overlay/HeatMap.js, line 375

移除指定的热点信息。

Name Type Description
features Array.<FeatureVector> | FeatureVector

热点信息数组。

rotate(pixelP, rotation, center)

openlayers/overlay/HeatMap.js, line 348

获取某像素坐标点 pixelP 绕中心 center 逆时针旋转 rotation 弧度后的像素点坐标。

Name Type Description
pixelP number

像素坐标点位置。

rotation number

旋转角度。

center number

中心位置。

scale(pixelP, center, scaleRatio){Array.<number>}

openlayers/overlay/HeatMap.js, line 361

获取某像素坐标点 pixelP 相对于中心 center 进行缩放 scaleRatio 倍后的像素点坐标。

Name Type Description
pixelP Object

像素点。

center Object

中心点。

scaleRatio number

缩放倍数。

Returns:
Type Description
Array.<number> 返回数组型比例。

setOpacity(opacity)

openlayers/overlay/HeatMap.js, line 137

设置图层的不透明度,取值范围:[0-1]。

Name Type Description
opacity number

不透明度。

toiClientFeature(features){FeatureVector}

openlayers/overlay/HeatMap.js, line 417

转为 iClient 要素。

Name Type Description
features GeoJSONObject | Array.<ol.Feature>

待添加的要素数组。

Returns:
Type Description
FeatureVector 转换后的 iClient 要素。