vue3 + openlayers---实现热力图效果_openlayers gradient 热力图

<div id="ol-map"></div>
  <div class="slider_container">
    <span>半径大小</span>
    <el-slider v-model="radius" @change="updateRadius" show-input :show-tooltip="false"></el-slider>
    <span>聚焦大小</span>
    <el-slider v-model="blur" @change="updateBlur" show-input :show-tooltip="false"></el-slider>
  </div>
1
2
3
4
5
6
7

import HeatData from '@/assets/json/heatData.json'
let HeatmapLayer
const radius = ref(5)
const blur = ref(5)

HeatmapLayer = new Heatmap({
  source: new VectorSource({
    features: new GeoJSON().readFeatures(HeatData, {
      dataProjection: 'EPSG:4326',
      featureProjection: 'EPSG:3857'
    })
  }),
  radius: radius.value, // 半径大小
  blur: blur.value, // 模糊
  gradient: ['#00f', '#0ff', '#0f0', '#ff0', '#f00'] // 热力图颜色（可以不设置）
})
window.olMap.addLayer(HeatmapLayer)


const updateRadius = () => {
  HeatmapLayer.setRadius(radius.value)
}
const updateBlur = () => {
  HeatmapLayer.setBlur(blur.value)
}


// heatData.json 数据格式如下
{"type":"FeatureCollection", "features": [
  {"type":"Feature","geometry":{"type":"Point","coordinates":[121.57605318350262,29.84480421358972]},"properties":{"OBJECTID":1}},
  {"type":"Feature","geometry":{"type":"Point","coordinates":[121.56400787415961,29.846689344125743]},"properties":{"OBJECTID":2}},
  {"type":"Feature","geometry":{"type":"Point","coordinates":[121.5668979072455,29.846608640258008]},"properties":{"OBJECTID":3}}
  // ....................
  ]}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34