lisp坐标一键生成_教你一键制作热力图，想要什么效果就是什么效果

openlayer热力图制作，本文结合最新的openlayer6.2.1版本，讲述热力图的生成过程。

首先看一下热力图的效果，这里我自己生成的一些样例数据。其中数据主要包含热力点的经纬度，和权重。热力图也是根据这三个数据生成的。下面给大家先看一下效果。

热力图效果

数据是geojson格式的，下面是我的一个样例数据。

热力图数据

具体实现代码为：

1 导入相关openlayer类

import {Map, Vector, View} from 'ol';import TileLayer from 'ol/layer/Tile';import XYZ from 'ol/source/XYZ'import 'ol/ol.css'import VectorSource from 'ol/source/Vector.js'import { transform } from 'ol/proj'import GeoJSON from 'ol/format/GeoJSON'import Heatmap from "ol/layer/Heatmap";

2 解析要生成热力图的数据

let vector = new Heatmap({  // 矢量数据源  source: new VectorSource({    features: (new GeoJSON()).readFeatures(heatData1[0], {      dataProjection: 'EPSG:4326',      featureProjection: 'EPSG:3857'    }),  }),  blur: 15, // 模糊尺寸  radius: 20 // 热点半径})

在这里可以设置坐标系统、热力点的模糊尺寸、热力点半径。

3 创建地图，并引入热力图图层

let map = new Map({  target: 'map',  layers: [    vector  ],  view: new View({    center: transform( [121.407,41.146], 'EPSG:4326', 'EPSG:3857'),    zoom: 10  })});

至此，运行便可看到相应的热力图。

热力图效果

好了，今天就给大家分享到这里。后续我也会制作热力图相关的在线工具，只要上传相应的数据，即可一键生成你想要的热力图。

想要代码的可关注私信我，送完整代码。