标签：ol 效果 力图 openlayers new import data

openlayers实现热力图效果

这个在之前的博客里面分享过了，再稍微说一下。

先说效果，最终实现的效果就是下面这个样子的，如果需要的话就接着看，如果不是这个样子就不要看了。

使用

vue 项目导入 openlayers 这个就不说了，如果需要的话去看之前的博客。

使用热力图其实和添加点是一样的，只不过图层需要单独设置一下。

首先导入几个包，这里可能我粘贴的不全，如果缺了的话直接自己加上就可以。

import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { OSM, Vector as VectorSource } from "ol/source";
import { Heatmap as HeatmapLayer } from "ol/layer";
import Feature from "ol/Feature";
import { Point } from "ol/geom";

好，这篇博文都是关键代码，强调一下，是关键代码，不是全部的哈，也就是说你直接找个文件粘进去不一定能跑起来，因为总有人都说我的代码不对，粘过去报错跑不起来，这东西是需要根据自己的实际代码修改的，不是全部代码的宝子们！

接下来创建一个图层来存放热力图的数据。

		// 热力图层
        sourceHeat = new VectorSource();
        layerHeat = new HeatmapLayer({
          title: 'heatmap',
          source: sourceHeat,
          blur: 30,
          radius: 15,
          gradient: ["#2200FF", "#E8D225", "#EF1616"],
          zIndex: 4,
          opacity: 0.5
        });
        map.addLayer(layerHeat);

上边就不多说了，然后会写 openlayers 的都可以看懂这些代码，关于热力图的相关配置我这边贴一下官网热力图部分文档，可以直接进去看中怎么配置出自己想要的效果。

接下来就是往里面存数据。

		let data  = heatData
        let featrues = []
        data.forEach(item => {
          let f = new Feature({
            geometry: new Point(fromLonLat([item.longitude, item.latitude]))  // 添加点坐标
          });
          featrues.push(f)
        })
        sourceHeat.addFeatures(featrues)

上面的 data 就是一个列表，里面存放着一些经纬度信息，类似于下面的样子：

data = [{longitude: '116.23511', latitude: '36.253645' }, ....]

然后就没了，完成了，热力图需要大数据量，所以说一两个数据不明显，但是大数据量就可以想最开始截图一样的效果，我截图大概是几千条数据吧，就这样简单。

然后清除的话也很简单，只要 clear 掉就可以了，换颜色密度啥的看配置就可以，好，就这样了。

标签：ol,效果,力图,openlayers,new,import,data
来源： https://www.cnblogs.com/wjw1014/p/16668964.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。