啥也不说直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<script src="./heatmap.js"></script>
<script src="./leaflet-heatmap.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
.a {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<!-- 显示地图的盒子 -->
<div id="map"></div>
<!-- 选择想要获取的文件 -->
<input type="file" id="testJsonFile" οnchange="openFile(event)" multiple>
<script>
//获取本地文件数据数据
var openFile = function (event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function () {
if (reader.result) {
// 将文件内容转为数组样式
const list = reader.result.split("\n")
// 将数组转换成对象样式
const lista = list.map((item, index) => {
return {
lat: Number(item.slice(15, 24)),
lng: Number(item.slice(2, 12)),
}
})
// 坐标数据
var testData = {
max: 10,
data: lista
};
//热力图配置
var cfg = {
"radius": 4,
"maxOpacity": 0.8,
"scaleRadius": false,
"useLocalExtrema": false,
latField: 'lat',
lngField: 'lng',
valueField: 'count',
};
var heatmapLayer = new HeatmapOverlay(cfg);
//图层
var baseLayer = L.tileLayer(
'http://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7', {
subdomains: '1234',
attribution: '...',
maxZoom: 18
}
);
// 初始化地图
var map = new L.Map('map', {
center: new L.LatLng(35.274507, 122.600289),
zoom: 10,
layers: [baseLayer, heatmapLayer],
scale: 8192
});
heatmapLayer.setData(testData);
}
};
// 获取第几个文件 注意：只能同时获取一个文件
reader.readAsText(input.files[0]);
};
</script>
</body>
</html>
1125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
