vue+openlayer展示热力图

最新推荐文章于 2024-07-20 16:35:33 发布

龙袭

最新推荐文章于 2024-07-20 16:35:33 发布

阅读量4k

点赞数 3

分类专栏： GIS 文章标签： vue+openlayer openlayer+热力图

本文链接：https://blog.csdn.net/qq_33016669/article/details/88797624

版权

GIS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

描述：最近在做项目的时候需要用openlayer实现热力图，由于刚开始接触opnelayer，不知道加载的格式是什么，看官网的话也没有给出加载数据的格式。后来经过多次尝试终于显示出来，在此记录一下，不喜可喷！！！话不多说，直接上代码。

效果图：
在这里插入图片描述数据不多，效果不是很明显，有个不足是数据中的count值在鼠标移至热力图点的时候没有显示出来。

vue使用openlayer，可以引入js文件，也可以全局安装，这里使用的是全局安装（npm install ol ）。

vue文件：

<template>
         <div>
           <div id="map"></div>
         </div>
</template>

<script>
  import Map from 'ol/Map.js'
  import View from 'ol/View.js'
  import KML from 'ol/format/KML.js'
  import { Heatmap as HeatmapLayer } from 'ol/layer.js'
  import VectorSource from 'ol/source/Vector.js'
  import { transform } from 'ol/proj'
  import GeoJSON from 'ol/format/GeoJSON'
  export default {
        name: 'heatmap',
        data () {
          return {
            map: null,
            center: [121.05212688446045, 30.600614547729492],
            // 热力图假数据
            heatData: {
              type: 'FeatureCollection',
              features: [
                { type: 'Point', 'coordinates': [ 104.40, 31.19 ], count: 100 },
                { type: 'Point', 'coordinates': [ 113.30, 30.60 ], count: 19 },
                { type: 'Point', 'coordinates': [ 123.30, 30.60 ], count: 419 },
                { type: 'Point', 'coordinates': [ 105.30, 30.60 ], count: 319 },
                { type: 'Point', 'coordinates': [ 106.30, 30.60 ], count: 719 },
                { type: 'Point', 'coordinates': [ 109.30, 31.60 ], count: 519 },
                { type: 'Point', 'coordinates': [ 109.30, 30.60 ], count: 319 },
                { type: 'Point', 'coordinates': [ 108.30, 32.60 ], count: 139 },
                { type: 'Point', 'coordinates': [ 118.30, 31.60 ], count: 129 },
                { type: 'Point', 'coordinates': [ 108.30, 33.60 ], count: 190 },
                { type: 'Point', 'coordinates': [ 108.30, 32.60 ], count: 189 },
                { type: 'Point', 'coordinates': [ 100.30, 30.60 ], count: 1 },
                { type: 'Point', 'coordinates': [ 109.30, 30.60 ], count: 119 },
                { type: 'Point', 'coordinates': [ 108.30, 31.60 ], count: 200 },
                { type: 'Point', 'coordinates': [ 118.30, 30.60 ], count: 300 }
              ]
            }
          }
        },
      methods: {
          initMap () {
          // 创建一个热力图层
            let vector = new HeatmapLayer({
            // 矢量数据源
              source: new VectorSource({
                features: (new GeoJSON()).readFeatures(this.heatData, {
                dataProjection: 'EPSG:4326',
                featureProjection: 'EPSG:3857'
            }),
              }),
              blur: 20, // 模糊尺寸
              radius: 20 // 热点半径
            })

            this.map = new Map({
              target: 'map',
              // 在layers中添加自己所需要的图层，这里不做添加，只添加热力图层
              layers: [
                vector
              ],
              view: new View({
              // 地图初始中心位置
                center: transform(this.center, 'EPSG:4326', 'EPSG:3857'),
                zoom: 5
              })
            })
          }
      },
      mounted () {
          this.initMap()
      }
    }
</script>

<style scoped>
.label{
  font-size: 20px;
}
</style>