openlayer展示热力图_openlayers热力图

 效果图：

一，安装openlayer

二，完整代码

---

 参考：openlayers6【十九】vue HeatmapLayer热力图层实现热力图效果详解_范特西是只猫的博客-CSDN博客_openlayers热力图实现

 效果图：

 在线预览：

WebGIS之家WebGIS之家,openlayers示例源码，cesium示例源码,openlayers在线调试预览,cesium在线调试预览,webgis,数字地球,数字孪生https://www.webgishome.com/preview?id=71&example_name=heatmap&title=%E7%83%AD%E5%8A%9B%E5%9B%BE

一，安装openlayer

cnpm i -S ol

二，完整代码

<!-- home -->
<template>
  <div class="home">
    <div class="width:500px;height:300px">
      <span>blur</span>
      <el-slider v-model="option_heatmap.blur" show-input></el-slider>
      <span>radius</span>
      <el-slider v-model="option_heatmap.radius" show-input></el-slider>
    </div>
    <el-button @click="refreshData()">refreshData</el-button>
    <el-button @click="addHeatMapLayer()">addHeatMapLayer</el-button>
    <div id="map" class="content"></div>
  </div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import OSM from "ol/source/OSM";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import { Heatmap as HeatmapLayer, Tile as TileLayer } from "ol/layer";
 
export default {
  data() {
    return {
      map: {},
      option_heatmap: {
        blur: 43,
        radius: 50
      },
      heatMapLayer: {},
      heatData: {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [112.4, 31.19] },
            properties: { weight: 0.9 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [113.3, 30.6] },
            properties: { weight: 0.19 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [123.3, 30.6] },
            properties: { weight: 0.419 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [105.3, 30.6] },
            properties: { weight: 0.319 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [106.3, 30.6] },
            properties: { weight: 0.719 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [109.3, 31.6] },
            properties: { weight: 0.519 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [109.3, 30.6] },
            properties: { weight: 0.319 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [108.3, 32.6] },
            properties: { weight: 0.139 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [118.3, 31.6] },
            properties: { weight: 0.129 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [108.3, 33.6] },
            properties: { weight: 0.19 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [108.3, 32.6] },
            properties: { weight: 0.189 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [100.3, 30.6] },
            properties: { weight: 0.1 }
          }
        ]
      },
 
      newHeatData: {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [112.4, 31.19] },
            properties: { weight: 0.9 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [113.3, 30.6] },
            properties: { weight: 0.19 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [123.3, 30.6] },
            properties: { weight: 0.419 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [105.3, 30.6] },
            properties: { weight: 0.319 }
          }
        ]
      }
    };
  },
  components: {},
  created() {},
  mounted() {
    this.initMap();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new OSM()
          })
        ],
        view: new View({
          projection: "EPSG:4326", //使用这个坐标系
          center: [104.704968, 31.540962], //西南科技大学
          zoom: 5
        })
      });
    },
    addHeatMapLayer() {
      this.heatMapLayer = new HeatmapLayer({
        source: new VectorSource({
          features: new GeoJSON().readFeatures(this.heatData)
        }),
        blur: this.option_heatmap.blur,
        radius: this.option_heatmap.radius,
        weight: (e) => {
          return e.values_.weight;//根据权重展示热力图！关键点，weight范围为：0-1！！！
        },
      });
      this.map.addLayer(this.heatMapLayer);
    },
    refreshData() {
      this.heatData = this.newHeatData;
      this.map.removeLayer(this.heatMapLayer);
      this.addHeatMapLayer();
    }
  },
  watch: {
    option_heatmap: {
      handler(newVal, oldVal) {
        this.heatMapLayer.setBlur(this.option_heatmap.blur);
        this.heatMapLayer.setRadius(this.option_heatmap.radius);
      },
      deep: true
    }
  }
};
</script>
 
<style scoped lang="scss">
.home {
  height: 100vh;
  border: 1px solid red;
  .content {
    width: 800px;
    height: 600px;
    border: 1px solid blue;
    margin: auto;
  }
}
</style>

切记：这里实例化出来的heatmaplayer()里面一定要设置weight属性，并且这个属性的范围在【0,1】。这里封装了一下，可以把数组中的值映射为0到1，并返回新的数组，其思路主要是归一化，代码如下：

test(arr) {
      var arr_max = Math.max.apply(null, arr);
      var arr_min = Math.min.apply(null, arr);
      //arr_num的每个值为0-1之间
      var arr_num = arr.map((item) => {
        return (item - arr_min) / (arr_max - arr_min);
      });
      return arr_num;
    },