首先说明一下,这个demo是我当时很着急写的,因为当时用的是heatmap.js的,但是好像只能加载x,y,z,所以临时换了一个高德地图加载热力图
官网api lbs.amap.com/demo/javasc…
yarn add amap-js
引入
import AMapJS from "amap-js/dist/amap-js";
初始化加载
aMapJSAPILoader.load().then((AMap) => {
aMapUILoader.load().then((initAMapUI) => {
// 其他逻辑
console.log(this.props.currentPlant.acc_point);//你要加载的数据
let bound = [];
if (props.currentPlant.acc_point) {
bound = props.currentPlant.acc_point && JSON.parse(JSON.stringify(props.currentPlant.acc_point)).split(",");
}
const map = new AMap.AMap.Map("map", {
center: bound,
zoom: 15,
resizeEnable: true,
layers: [new AMap.AMap.TileLayer.Satellite()],
});
this.viewer = map;
var tilerLayer = new AMap.AMap.TileLayer({
zIndex: 10,
getTileUrl: function (x, y, z) {
var imgurl = `file://${getMapPath(props.currentPlant.id)}/${z}/${y}/${x}.png`;
return imgurl;
},//加载图层
});
// 同时引入工具条插件,比例尺插件和鹰眼插件
AMap.AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.MapType"], function () {
// 在图面添加工具条控件,工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
map.addControl(
new AMap.AMap.ToolBar({
locate: false,
}),
);
// 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺
map.addControl(new AMap.AMap.Scale());
// 在图面添加类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(
new AMap.AMap.MapType({
defaultType: 1,
}),
);
});
tilerLayer.setMap(map);
loadHeatPlugin(map, AMap)//加载热力图
});
});
加载热力图
map.plugin(["AMap.Heatmap"], function (e) {
// 初始化heatmap对象
const heatMap = new AMap.AMap.Heatmap(map, {
resizeEnable: true,
radius: 30, //给定半径
opacity: [0, 1],
gradient: {
0.1: "blue",
0.5: "green",
0.75: "yellow",
1: "red",
},
blur: 0.1,
});
initHeatMapLiveApp(heatMap);//渲染热力图
//监听页面加载完毕
map.on("complete", function (e) {
props.getShowImageHeatMap();
});
});
}
function initHeatMapLiveApp(heatMap) {
return new Promise((res, rej) => {
let pointList = [];
props.points &&
props.points.map((item, index) => {
let position = transform(item.longitude * 1, item.latitude * 1);
item.defects.length >= 1 &&
pointList.push({ lng: position[0], lat: position[1], value: item.defects.length });
});
if (!pointList.length) {
message.error("当前没有缺陷可以呈现出热力图");
}
try {
heatMap.setDataSet({
data: pointList,
max: 10,
});
res("");
} catch (error) {
rej("");
}
});
}
整体代码
import { AimOutlined } from "@ant-design/icons";
import AMapJS from "amap-js/dist/amap-js";
import { message, Tooltip } from "antd";
import React, { Component, RefObject } from "react";
import { getMapPath } from "../../../../../assets/js/getPaths";
import { transform } from "../../../../../assets/js/methods";
import "./heatMap.scss";
interface Props {
points: any;
currentPlant: any;
getShowImageHeatMap: any;
mapNormalLatitude: any;
mapNormalLongitude: any;
}
class ShowHeatMap extends Component<Props> {
props: Props;
viewer: any;
public mapRef: RefObject<HTMLDivElement>;
constructor(props: Props) {
super(props);
this.props = props;
this.mapRef = React.createRef();
this.viewer = null;
}
componentDidMount() {
const props = this.props;
const aMapJSAPILoader = new AMapJS.AMapLoader({
v: "1.4.12",
key: "4611f58483d79aa58bf6d2b508078f9c&plugin=AMap.Autocomplete,AMap.PlaceSearch",
});
const aMapUILoader = new AMapJS.AMapUILoader({
v: "1.0", // UI组件库版本号
});
aMapJSAPILoader.load().then((AMap) => {
aMapUILoader.load().then((initAMapUI) => {
// 其他逻辑
console.log(this.props.currentPlant.acc_point);
let bound = [];
if (props.currentPlant.acc_point) {
bound = props.currentPlant.acc_point && JSON.parse(JSON.stringify(props.currentPlant.acc_point)).split(",");
}
const map = new AMap.AMap.Map("map", {
center: bound,
zoom: 15,
resizeEnable: true,
layers: [new AMap.AMap.TileLayer.Satellite()],
});
this.viewer = map;
var tilerLayer = new AMap.AMap.TileLayer({
zIndex: 10,
getTileUrl: function (x, y, z) {
var imgurl = `file://${getMapPath(props.currentPlant.id)}/${z}/${y}/${x}.png`;
return imgurl;
},
});
// 同时引入工具条插件,比例尺插件和鹰眼插件
AMap.AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.MapType"], function () {
// 在图面添加工具条控件,工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
map.addControl(
new AMap.AMap.ToolBar({
locate: false,
}),
);
// 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺
map.addControl(new AMap.AMap.Scale());
// 在图面添加类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(
new AMap.AMap.MapType({
defaultType: 1,
}),
);
});
tilerLayer.setMap(map);
loadHeatPlugin(map, AMap);
});
});
function loadHeatPlugin(map, AMap) {
map.plugin(["AMap.Heatmap"], function (e) {
// 初始化heatmap对象
const heatMap = new AMap.AMap.Heatmap(map, {
resizeEnable: true,
radius: 30, //给定半径
opacity: [0, 1],
gradient: {
0.1: "blue",
0.5: "green",
0.75: "yellow",
1: "red",
},
blur: 0.1,
});
initHeatMapLiveApp(heatMap);
//监听页面加载完毕
map.on("complete", function (e) {
props.getShowImageHeatMap();
});
});
}
function initHeatMapLiveApp(heatMap) {
return new Promise((res, rej) => {
let pointList = [];
props.points &&
props.points.map((item, index) => {
let position = transform(item.longitude * 1, item.latitude * 1);
item.defects.length >= 1 &&
pointList.push({ lng: position[0], lat: position[1], value: item.defects.length });
});
if (!pointList.length) {
message.error("当前没有缺陷可以呈现出热力图");
}
try {
heatMap.setDataSet({
data: pointList,
max: 10,
});
res("");
} catch (error) {
rej("");
}
});
}
}
setCenter(position) {
return new Promise((res, rej) => {
if (!this.viewer) {
rej("");
} else {
try {
this.viewer.setZoomAndCenter(15, position);
res(true);
} catch (error) {
rej(error);
}
}
});
}
render() {
return (
<div className="appMap" style={{ height: "100%" }}>
<div ref={this.mapRef} id="map" style={{ height: "100%" }}></div>
<div className="heat-map-controls">
<Tooltip placement="right" title="返回">
<AimOutlined
onClick={() => this.setCenter([this.props.mapNormalLongitude, this.props.mapNormalLatitude])}
/>
</Tooltip>
</div>
</div>
);
}
}
export default ShowHeatMap;