注意：本案例是基于vue现实的
一、加载要素服务和添加地图图例
**先通过FeatureLayer方法添加地图服务**
const ModelLayer = new that.FeatureLayer({
id: 'hydraulicModel',
url: configMap.LeakSource,
})
that.map.add(ModelLayer)
**通过Legend方法添加图例**
that.legend = new that.Legend({
view: that.mapView,
layerInfos: [
{
layer: ModelLayer,
title: '图例',
},
],
})
that.mapView.ui.add(that.legend, 'bottom-right')
二、构建HeatmapRenderer公共方法
**封装一个热力图的公共方法**
export function thermodynamicDiagram(color, max, min, HeatmapRenderer) {
return new HeatmapRenderer({
type: 'heatmap',
colorStops: color,
maxPixelIntensity: max,
minPixelIntensity: min,
})
}
三、调用HeatmapRenderer方法添加热力图
const color = [
{
color: 'rgba(63, 40, 102, 0)', ratio: 0 },
{
color: '#472b77', ratio: 0.083 },
{
color: '#4e2d87', ratio: 0.166 },
{
color: '#563098', ratio: 0.249 },
{
color: '#5d32a8', ratio: 0.332 },
{
color: '#6735be', ratio: 0.415 },
{
color: '#7139d4', ratio: 0.498 },
{
color: '#7b3ce9', ratio: 0.581 },
{
color: '#853fff', ratio: 0.664 },
{
color: '#a46fbf', ratio: 0.747 },
{
color: '#c29f80', ratio: 0.83 },
{
color: '#e0cf40', ratio: 0.913 },
{
color: '#ffff00', ratio: 1 },
]
const simpleRenderer = thermodynamicDiagram(color, 300, 0, that.HeatmapRenderer)
ModelLayer.renderer = simpleRenderer
四、根据缩放地图比例优化热力图显示
**构建一个替代热力图的符号**
const removeRenderer = {
type: 'simple',
symbol: {
type: 'simple-marker',
color: '#009E89',
size: 5,
},
}
**根据地图比例显示不同前端效果**
that.mapView.watch('scale', function (newValue) {
layer.renderer = newValue < 23146 ? removeRenderer : simpleRenderer
})