很多数据时如何让百度地图加载得更快?
1.后端数据结构优化
搞成一个二位数组
![在这里插入图片描述](https://img-blog.csdnimg.cn/fcfedd9ea84245d5a33b7846a6557594.png
2.后台过滤经纬度
经纬度为空的和经纬度不在中国范围内的全部过滤掉
3.百度地图的并发量每天为0.5万次,如果数据过多,后台需要单独再使用一个服务器ak
4.前端使用海量地图加载
https://www.cnblogs.com/googlegis/p/14690053.html
5.区分点的颜色
https://www.jianshu.com/p/2fb2d84fb206
6.确定中心点
//参数数组points的每一项为每一个点的:纬度,精度
//返回中心点的数组[纬度,精度]
export function getPointsCenter(points) {
const point_num = points.length; //坐标点个数
let X = 0,
Y = 0,
Z = 0;
for (let i = 0; i < points.length; i++) {
const point = points[i];
const lng = (point[3] * Math.PI) / 180;
const lat = (point[4] * Math.PI) / 180;
const x = Math.cos(lat) * Math.cos(lng);
const y = Math.cos(lat) * Math.sin(lng);
const z = Math.sin(lat);
X += x;
Y += y;
Z += z;
}
X = X / point_num;
Y = Y / point_num;
Z = Z / point_num;
const tmp_lng = Math.atan2(Y, X);
const tmp_lat = Math.atan2(Z, Math.sqrt(X * X + Y * Y));
return [(tmp_lng * 180) / Math.PI, (tmp_lat * 180) / Math.PI];
}
7.标注地图和地图查询
<div class="search">
<el-input
class="search-input"
v-model="searchMap"
:clearable="true"
placeholder="请输入网关名称/编码/地址"
></el-input>
<el-button
class="search-button"
type="primary"
@click="handleClickSearch"
>搜索</el-button
>
</div>
<div class="inner-total">
<!-- <div class="title">标注</div> -->
<div class="inner-total-list">
<div class="item" v-for="(item, index) in pointNums" :key="index">
<div
:style="{ backgroundColor: item.color }"
class="item-color"
></div>
<div :style="{ color: item.status === '在线' ? 'green' : 'red' }">
{
{
item.status }}
</div>
<div class="item-type">{
{
item.type }}</div>
<div>{
{
item.total + "个" }}</div>
</div>
</div>
</div>
<baidu-map
:data="mapData"
@onClickMap="handleClickMapPoint"
style="height: 600px"
></baidu-map>
function handleClickSearch() {
const arr = [];
data.mapData.forEach(item => {
const reg = new RegExp(data.searchMap);
if (reg.test(item[1]) || reg.test(item[2]) || reg.test(item[0])) {
arr.push(item);
}
});
if (!arr.length) {
errorMessage("查询的信息不存在");
return;
}
data.mapData = arr