地图多点自动缩放,居中,思路和手写

news2024/9/24 7:22:53

效果如下

  1. 多个标记点顺次标记连接起来
  2. zoom缩放到合适等级,刚好能放下那么多点
  3. 视野刚好在正中间

zoom 实现思路

  1. 获取多点的最大经纬度点和最小经纬度点(这两个点相距离最远)
  2. 计算2个这两点之间的距离
  3. 地图是有比例尺的,根据比例尺可以得到1cm对应的zoom值
  4. 根据要展示的长度,适当调整zoom大小
    1

实现

// 多点
const points = [
    { latitude: 39.87, longitude: 116.38 },
    { latitude: 31.25, longitude: 121.46 },
    { latitude: 30.271, longitude: 119.98 },
    { latitude: 30.2737514, longitude: 120.1358911 }
],

// 转换成标准数据 { lat: 39.87, lng: 116.38 },
// 获取最大和最小经纬度值
let list = [];
let lngMax = data[0].longitude;
let lngMin = data[0].longitude;
let latMax = data[0].latitude;
let latMin = data[0].latitude;
list = r.data.map((item: any, index: number) => {
	if (item.longitude > lngMax) {
	  lngMax = item.longitude;
	}
	if (item.longitude < lngMin) {
	  lngMin = item.longitude;
	}
	if (item.latitude > latMax) {
	  latMax = item.latitude;
	}
	if (item.latitude < latMin) {
	  latMin = item.latitude;
	}
	return {
		lat: item.latitude,
	  	lng: item.longitude,
	};
});

// zoom计算方法 记得引入'./calculateZoom.tsx',下面有
let zoom = calculateZoom(latMin, lngMin, latMax, lngMax);
// 中心点坐标 
const latCenter = ((latMax + latMin) * 500000) / 1000000;
const lngCenter = ((lngMax + lngMin) * 500000) / 1000000;
// 调用更新中心点方法 这个方法自己写,大同小异
updateCenter({ lat: latCenter, lng: lngCenter })

引入的calculateZoom.tsx文件

const getDistance = (lat1: number, lng1: number, lat2: number, lng2: number) => {
  var dis = 0;
  var radLat1 = toRadians(lat1);
  var radLat2 = toRadians(lat2);
  var deltaLat = radLat1 - radLat2;
  var deltaLng = toRadians(lng1) - toRadians(lng2);
  var dis =
    2 *
    Math.asin(
      Math.sqrt(
        Math.pow(Math.sin(deltaLat / 2), 2) +
          Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2),
      ),
    );
  return dis * 6378137;
};

/**
 * 
 * @param distance 
 * 百度地图缩放级别与比例尺对应数值
  百度地图缩放级别从19~1,共分为19级,级别越大,范围越小:
  [19级,18级,17级,16级,15级,14级,13级,12级,11级,10级,9级,8级,7级,6级,5级,4级,3级,2级,1级]
  其分别对应的比例尺为:
  [1:20米(简称20米,后同),50米,100米,200米,500米,1公里,2公里,5公里,10公里,
  20公里,25公里,50公里,100公里,200公里,500公里,1000公里,2000公里,5000公里,10000公里]
 */
const getZoom = (distance: number) => {
  // 注意这里是1cm比例展示
  let zoom = 0;
  if (distance > 10000000) {
    zoom = 1;
  } else if (distance > 5000000) {
    zoom = 2;
  } else if (distance > 2000000) {
    zoom = 3;
  } else if (distance > 1000000) {
    zoom = 4;
  } else if (distance > 500000) {
    zoom = 5;
  } else if (distance > 200000) {
    zoom = 6;
  } else if (distance > 100000) {
    zoom = 7;
  } else if (distance > 50000) {
    zoom = 8;
  } else if (distance > 25000) {
    zoom = 9;
  } else if (distance > 20000) {
    zoom = 10;
  } else if (distance > 10000) {
    zoom = 11;
  } else if (distance > 5000) {
    zoom = 12;
  } else if (distance > 2000) {
    zoom = 13;
  } else if (distance > 1000) {
    zoom = 14;
  } else if (distance > 500) {
    zoom = 15;
  } else if (distance > 200) {
    zoom = 16;
  } else if (distance > 100) {
    zoom = 17;
  } else if (distance > 50) {
    zoom = 18;
  } else if (distance > 20) {
    zoom = 19;
  } else {
    // 默认缩放值
    zoom = 12;
  }
  return zoom;
};
// 入参最小经纬度点和最大经纬度点
export const calculateZoom = (latMin: number, lngMin: number, latMax: number, lngMax: number) => {
  // 计算两个点之间距离
  let distance = getDistance(latMin, lngMin, latMax, lngMax);
  // 根据距离计算对应的zoom
  let zoom = getZoom(distance / 4); // 这里除以4是为了展示的范围在4-8cm之间(大致按照2的2次方缩放)
  return zoom;
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1380673.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AI软件开发:探索原理、挑战与未来趋势

AI软件开发已经成为当前最热门和具有前景的技术领域之一。随着人工智能技术的快速发展&#xff0c;AI软件的应用范围也在不断扩大。本文将主要探讨AI软件开发的原理、挑战以及未来的趋势。 首先&#xff0c;AI软件开发的原理是基于机器学习和深度学习算法。机器学习是一种通过…

基于SSM+vue的篮球场预约管理系统(Java毕业设计)

大家好&#xff0c;我是DeBug&#xff0c;很高兴你能来阅读&#xff01;作为一名热爱编程的程序员&#xff0c;我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里&#xff0c;我将会结合实际项目经验&#xff0c;分享编程技巧、最佳实践以及解决问题的方法。无论你是…

计算机毕业设计----Springboot超市订单管理系统

项目介绍 该超市订单管理毕业设计基于jdk8版本开发&#xff0c;在部署时需要使用jdk8以上的版本。使用了目前流行的框架组合springbootmybatis的框架技术&#xff0c; 实现了供应商管理对供应商实现增删改查、订单管理对超市订单实现增删改查、用户管理等功能&#xff0c;适用…

Docker五部曲之一:容器术语介绍

文章目录 前言背景基本术语容器镜像容器镜像格式容器引擎容器容器主机注册中心容器编排 进阶术语容器运行时镜像层标签存储库名称空间 参考 前言 本文内容翻译自参考文献。 背景 要理解容器术语&#xff0c;重要的是要精确地理解容器是什么。容器实际上是两个不同的东西。像…

MySQL基础学习: 使用EXPLAIN查看执行计划详解分析

一、EXPLAIN语句的作用 在客户端执行MySQL的操作语句&#xff0c;会依次经过MySQL客户端连接管理、语法解析与优化&#xff08;查询缓存、语法解析、查询优化&#xff09;、存储引擎层。其中查询优化器在基于成本和规则对查询语句进行优化&#xff0c;并且在优化后会生成一个执…

安装、运行和控制AI apps在您的计算机上一键式

pinokio 你是否曾为安装、运行和自动化 AI 应用程序和大模型而感到困惑&#xff1f;是否希望有一个简单而强大的工具来满足你的需求&#xff1f;如果是这样&#xff0c;那么 Pinokio 将会是你的理想选择&#xff01;Pinokio 是一款革命性的人工智能浏览器&#xff0c;是一个开…

51单片机点阵开发

一.LED点阵屏 LED点阵屏通过LED(发光二极管)组成&#xff0c;以灯珠亮灭来显示文字、图片、动画、视频等&#xff0c;LED点阵显示屏制作简单&#xff0c;安装方便&#xff0c;被广泛应用于各种公共场合&#xff0c;如汽车报站器、广告屏、银行窗口屏叫号屏以及停车系统等等。 …

牛客(JZ36 二叉搜索树与双向链表)

题目链接 思路1&#xff1a;使用中序遍历&#xff0c; 创建一个cur记录当前结点&#xff0c;prev记录上一个结点&#xff0c;这样cur->left prev&#xff0c;prev->right cur&#xff0c; 这样就链接 成功了。 难点&#xff1a;需要使用引用来控制prev。 /* struct T…

C# IOC 容器实战:KeyedService和生命周期

文章目录 前言KeyedServiceKey缺少Key值覆盖 KeyedService.AnyKey生命周期测试代码 总结 前言 我之前写过一篇Ioc容器的使用&#xff0c;用的是微软的IOC容器。这次我们再去深入了解一下IOC 和控制反转 .NET Core 依赖注入 Microsoft.Extensions.DependencyInjection ASP.NET …

js 实现拖动按钮添加布局

效果&#xff1a; h布局生成左右布局&#xff0c; v布局生成上下布局 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, ini…

【MATLAB源码-第104期】基于matlab的MPSK和MQAM调制解调方式仿真,输出误码率曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 MPSK&#xff08;多相位键控&#xff09; MPSK是一种基于载波相位变化的数字调制技术。它的核心原理是通过改变载波的相位来表示不同的数字信息。这种技术可以分为几个不同的级别&#xff0c;其中最常见的包括&#xff1a; 1…

用sql计算两个日期的间隔天数 ,去除周末

快递行业&#xff0c;经常需要计算2个节点的时效&#xff0c;有的计算自然日&#xff0c;有时候需要计算去掉周末的时效&#xff0c;计算自然日很简单&#xff0c;用函数datediff 就可以了&#xff0c;计算工作日时效&#xff0c;我的实现方法如下&#xff0c;借助了一个日期维…

GSTAE

缺失数据的流量预测:一种多任务学习方法 摘要:基于真实交通数据的交通速度预测是智能交通系统(ITS)中的一个经典问题。大多数现有的交通速度预测模型都是基于交通数据完整或具有罕见缺失值的假设而提出的。然而,由于各种人为和自然因素,在现实场景中收集的此类数据往往是…

NUS CS1101S:SICP JavaScript 描述:二、使用数据构建抽象

原文&#xff1a;2 Building Abstractions with Data 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 我们现在来到数学抽象的决定性步骤&#xff1a;我们忘记符号代表什么。…[数学家]不需要闲着&#xff1b;他可以用这些符号进行许多操作&#xff0c;而无需看它们所代…

Elasticsearch 7.8.0从入门到精通

安装Elasticsearch 7.8.0 官网&#xff1a;Elasticsearch 7.8.0 | Elastic 大家下载所需要的安装包即可。然后解压缩&#xff1a; Elasticsearch是通过java编写的&#xff0c;所以自带jdk。多好&#xff0c;下载Elasticsearch赠送jdk 0.0&#xff0c;不过一般我们用自己的jdk…

C++学习笔记——输入、输出和文件

目录 一、标准输入输出 2.1下面是它们的基本用法 解释 二、格式化输入输出 2.2下面是一个示例 解释 三、文件读写 3.3下面是一个文件读写的示例 解释 四、异常处理和错误检测 4.1下面是一个示例 解释 五、一个实例代码 5.1如何读取 CSV 文件&#xff0c;并计算每…

QToolBar、QStatusBar和QDockWidget的使用

1. 工具栏 QToolBar 1.1 创建工具栏 1.1.1 工具栏的基本函数 设置工具栏的停靠区域 参数 Qt::LeftToolBarArea //左边 Qt::RightToolBarArea //右边 Qt::TopToolBarArea //顶部 Qt::BottomToolBarArea //底部 Qt::AllToolBarAreas //所有区域 Qt::NoToolBarArea //没有QMa…

基于NLP的恶意网页识别

基于NLP的恶意网页识别 基于NLP的恶意网页识别引言项目目录回顾优化HTML标签提取结果使用预训练模型Fine-tune数据处理和模型训练模型训练与评估模型导出部署与预测总结 基于NLP的恶意网页识别 引言 欢迎阅读《 基于NLP的恶意网页识别》&#xff0c;在前三篇中&#xff0c;我…

如何保证数据库和缓存双写一致性-----一篇足以

保证数据库和缓存双写一致性的必要性和优点在于确保系统数据的准确性和可靠性。通过双写一致性机制&#xff0c;系统可以防止因为缓存数据与数据库数据不一致而导致的业务错误。这种做法有效降低了系统的脆弱性&#xff0c;提高了数据的完整性。同时&#xff0c;通过缓存加速读…

AI智能分析网关V4烟火检测算法解决方案

一、背景需求 根据国家消防救援局公布的数据显示&#xff0c;2023年共接报处置各类警情213.8万起&#xff0c;督促整改风险隐患397万处。火灾危害巨大&#xff0c;必须引起重视。传统靠人工报警的方法存在人员管理难、场地数量多且分散等问题&#xff0c;无法有效发现险情降低…