openlayer展示热力图

r囧r小猫 2021-07-26 02:29 630阅读 0赞

一，安装openlayer

cnpm i -S ol

二，

<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_.count;//根据权重展示热力图！关键点，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>

### 效果图： ###

![20200802223342513.gif][]

切记：这里实例化出来的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;
        },

[20200802223342513.gif]: /images/20210725/2d67737476dd4180b32e30d934255322.png