ChatGPT工作提效之使用百度地图在首都为六一儿童节献爱心(多边形覆盖物、文本标注、自动获取经纬度、爱心函数)

news2024/11/23 19:07:58

ChatGPT工作提效系列

  1. ChatGPT工作提效之初探路径独孤九剑遇强则强
  2. ChatGPT工作提效之在程序开发中的巧劲和指令(创建MySQL语句、PHP语句、Javascript用法、python的交互)
  3. ChatGPT工作提效之生成开发需求和报价单并转为Excel格式
  4. ChatGPT工作提效之小鹅通二次开发批量API对接解决方案（学习记录同步、用户注册同步、权益订购同步、开发文档）
  5. ChatGPT工作提效之使用python开发对接百度地图开放平台API的实战方案（批量路线规划、批量获取POI、突破数量有限制、批量地理编码）

使用百度地图在首都为六一儿童节献爱心

  • ChatGPT工作提效系列
  • 前言
  • 一、准备工作
    • （一）.ChatGPT沟通环境准备
    • （二）.百度地图运行环境准备
  • 二、开启沟通
    • （一）初试身手：生成一个圆形
    • （二）再接再厉：再生成一个圆形
    • （三）大展身手：生成一个爱心
    • （四）爱心萌动：心想事成
    • （五）画龙点睛：祝福到家
  • 总结
    • (一)爱心多边形覆盖物完整代码
    • (二)实际过程的坎坷
    • (三)深有感触

前言

作为程序员，结合自己的专业技能和兴趣爱好，为小朋友们制作和提供各种有意义的教育和娱乐内容，帮助他们在有趣的游戏和应用中学习和成长，提高他们的学习兴趣和认知水平。今天做个尝试吧！

一、准备工作

（一）.ChatGPT沟通环境准备

因不断地不断地和ChatGPT沟通交流，然后她很客气的告诉我：You exceeded your current quota, please check yourplan and billing details.
在这里插入图片描述
所以，我就转向的了“通义千问”：
在这里插入图片描述
好吧。既然如此，看来，献爱心肯定要破费的，还是继续和ChatGPT沟通吧

（二）.百度地图运行环境准备

  • 引入百度地图jsAPI文件
	<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
  • 新建百度地图容器和编辑按钮
	<div id="allmap"></div>
	<div id="control">
		<button onclick = "polyline.enableEditing();polygon.enableEditing();">开启线、面编辑功能</button>
		<button onclick = "polyline.disableEditing();polygon.disableEditing();">关闭线、面编辑功能</button>
	</div>
  • 新增多边形覆盖物
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
	map.enableScrollWheelZoom();
	
	var polygon = new BMap.Polygon([
		new BMap.Point(116.387112,39.920977),
		new BMap.Point(116.385243,39.913063),
		new BMap.Point(116.394226,39.917988),
		new BMap.Point(116.401772,39.921364),
		new BMap.Point(116.41248,39.927893)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形
	map.addOverlay(polygon);   //增加多边形
  • 测试目标
    ChatGPT能在百度地图上自动生成polygon覆盖物的经纬度坐标节点，即可成功！
    如果成功，意味着可以随心所欲的在百度地图上加载各种多边形覆盖物，

二、开启沟通

在这里插入图片描述
为了便于展示，将沟通的问题，用引用的方式展示，生成的效果直接截图，具体如下：

（一）初试身手：生成一个圆形

能不能生成一组经纬度坐标，在百度地图上形成一个圆形的多边形覆盖物

当然可以，以下是一个在北京市中心地区（39.915, 116.404）的单位圆（半径为1）所对应的多边形边界点坐标数组：

var path = [];
var R = 0.01; // 圆的半径，这里取0.01经纬度单位

for (var i = 0; i < 360; i++) {
  // 计算每个角度对应的经纬度坐标
  var lat = 39.915 + R * Math.sin(i * Math.PI / 180);
  var lng = 116.404 + R * Math.cos(i * Math.PI / 180);
  path.push(new BMap.Point(lng, lat));
}

这个多边形的边界点坐标可以直接使用如下代码在百度地图上绘制多边形：

// 创建多边形对象
var polygon = new BMap.Polygon(path, {
  strokeColor: '#FF0000', // 描边颜色
  fillColor: '#FF0000', // 填充颜色
  strokeWeight: 2, // 线宽
  strokeOpacity: 0.8, // 线透明度
  fillOpacity: 0.5 // 填充透明度
});

// 将多边形覆盖物添加到地图上
map.addOverlay(polygon);

执行以上代码，即可在百度地图上看到一个以（39.915, 116.404）为圆心、半径为0.01的圆形覆盖物。
在这里插入图片描述
**评价：**一言难尽，我明明说的是圆形，怎么成了椭圆形呢？

（二）再接再厉：再生成一个圆形

上面生成的经纬度坐标，不是圆形，是椭圆形，重新生成下经纬度坐标
非常抱歉，之前的代码确实存在问题，生成的精度不够高导致边界点不在同一个圆上，实际上更接近于椭圆形状。以下是修正后的代码，生成 360 个点坐标组成的圆形边界点：

var path = [];
var R = 0.01; // 圆的半径，这里取0.01经纬度单位
var Cx = 116.404; // 中心经度
var Cy = 39.915; // 中心纬度

for (var i = 0; i < 360; i++) {
  // 计算当前角度对应的经纬度坐标
  var angle = i * Math.PI / 180;
  var x = Cx + R / Math.cos(Cy * Math.PI / 180) * Math.cos(angle);
  var y = Cy + R * Math.sin(angle);
  // 将当前点的经纬度坐标添加到数组中
  path.push(new BMap.Point(x, y));
}

这个修正后的代码可以生成一个圆形的覆盖物边界点坐标，可以直接将其应用于创建多边形对象：

// 创建多边形对象
var polygon = new BMap.Polygon(path, {
  strokeColor: '#FF0000', // 描边颜色
  fillColor: '#FF0000', // 填充颜色
  strokeWeight: 2, // 线宽
  strokeOpacity: 0.8, // 线透明度
  fillOpacity: 0.5 // 填充透明度
});

// 将多边形覆盖物添加到地图上
map.addOverlay(polygon);

执行以上代码，即可在百度地图上看到一个以（39.915, 116.404）为圆心、半径为0.01的圆形覆盖物。

在这里插入图片描述
**评价：**ChatGPT的自我批评和自我提升的能力真好，这次成功了。那么进入正题，开始给小朋友献爱心了！

（三）大展身手：生成一个爱心

以（39.915, 116.404）为中心，生成一个爱心的形状的经纬度坐标数据

要绘制一个爱心图案的多边形覆盖物，需要先生成一组爱心形状的经纬度坐标数据。以下是一个简单的爱心函数，它接受一个中心点的经纬度坐标和半径参数，返回一个由多个经纬度坐标组成的数组，这个数组表示一个以该中心点为中心的爱心形状：

function generateHeartPath(center, radius) {
  var Cx = center.lng; // 圆心经度
  var Cy = center.lat; // 圆心纬度
  var path = [];

  for (var i = 0; i < 360; i++) {
    var angle = i * Math.PI / 180;
    var x = Cx + radius * (16 * Math.pow(Math.sin(angle), 3));
    var y = Cy - radius * (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle));
    path.push(new BMap.Point(x, y)); // 将生成的点添加到路径数组中
  }

  return path;
}

这个函数接受两个参数：圆心的经纬度坐标 center 和心形半径 radius。圆心经纬度坐标可以是一个 BMap.Point 对象，心形半径可以根据需要自行设置。函数内部使用一些简单的数学公式，计算生成一系列点的坐标，并将其添加到路径数组中。函数返回一组经纬度坐标数据，可以直接应用于创建多边形对象。例如，以下代码可在百度地图上创建一个以（39.915, 116.404）为中心、半径为0.02的爱心图案的覆盖物：

// 爱心图案的圆心坐标
var center = new BMap.Point(116.404, 39.915);
// 爱心图案的半径
var radius = 0.02;
// 生成爱心的路径数据
var path = generateHeartPath(center, radius);

// 创建多边形对象
var polygon = new BMap.Polygon(path, {
  strokeColor: '#F33', // 描边颜色
  fillColor: '#F33', // 填充颜色
  strokeWeight: 2, // 线宽
  strokeOpacity: 0.8, // 线透明度
  fillOpacity: 0.5 // 填充透明度
});

//将多边形覆盖物添加到地图上
map.addOverlay(polygon);

执行以上代码，即可在百度地图上看到一个以（39.915, 116.404）为中心、半径为0.02的爱心图案的覆盖物。

在这里插入图片描述
**评价：**突然间爱了，就是心形方向不是自己想要的，换个方向吧？

（四）爱心萌动：心想事成

重新创建一个以（39.915, 116.404）为中心、半径为0.02的上下反向爱心图案

重新创建一个上下反向的爱心图案，只需要将 y 轴的值由负数改为正数即可。以下是代码实现：

// 爱心图案的圆心坐标
var center = new BMap.Point(116.404, 39.915);
// 爱心图案的半径
var radius = 0.02;
// 生成爱心的路径数据
var path = [];

for (var i = 0; i < 360; i++) {
  var angle = i * Math.PI / 180;
  var x = center.lng + radius * (16 * Math.pow(Math.sin(angle), 3));
  var y = center.lat + radius * (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle));
  path.push(new BMap.Point(x, y));
}

// 创建多边形对象
var polygon = new BMap.Polygon(path, {
  strokeColor: '#F33', // 描边颜色
  fillColor: '#F33', // 填充颜色
  strokeWeight: 2, // 线宽
  strokeOpacity: 0.8, // 线透明度
  fillOpacity: 0.5 // 填充透明度
});

//将多边形覆盖物添加到地图上
map.addOverlay(polygon);

这个实现方式与上面的实现方式基本一致，只有在计算 y 轴坐标时采用了正数符号。执行以上代码，即可在百度地图上看到一个以（39.915, 116.404）为中心、半径为0.02的上下反向爱心图案的覆盖物。

在这里插入图片描述
**评价：**嗯，生成的图形竟然有一种浓浓的“网红科技感”，偏瘦了！

（五）画龙点睛：祝福到家

写个祝福语吧？

上面心形底部的坐标是多少？

上面的代码生成的爱心图案底部的坐标是 (39.88557496508942, 116.40400000000001)。这是因为爱心图案是由 360 个点组成的多边形，这些点位于以圆心为中心的 360 度覆盖范围内，并由一系列复杂的三角函数计算公式生成。在这个具体的实现中，我们在每个角度上计算了一对经纬度坐标，并将其添加到路径数组中。最后，形成的不规则多边形就具有了类似爱心的轮廓。

由于这些点的位置是按照数学公式计算得出的，它们的精确坐标可能与实际情况略有差异，并且具体值可能因实现方式而异。

    var opts = {
        position: new BMap.Point(116.40400000000001,39.88557496508942),
        offset: new BMap.Size(0, 10)//设置文本偏移量
    }
    var label = new BMap.Label('祝全国的朋友们儿童节快乐！', opts); // 创建文本标注对象
    label.setStyle({
        color: "#fff",
        fontSize: "10px",
        height: "24px",
        lineHeight: "20px",
        padding: "2px 5px",
        border: "1px solid rgba(255, 255, 255, 0.9)",
        background: "rgba(255, 0, 0, 0.9)",
        fontWeight: "bold",
        transform: 'translateX(-50%)',
        fontFamily: "微软雅黑"
    });
    map.addOverlay(label);

在这里插入图片描述

总结

(一)爱心多边形覆盖物完整代码

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap {height:500px; width: 100%;}
		#control{width:100%;}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
	<title>六一儿童节献爱心</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 10);
	map.enableScrollWheelZoom();
  
// 爱心图案的圆心坐标
var center = new BMap.Point(116.404, 39.915);
// 爱心图案的半径
var radius = 0.02;
// 生成爱心的路径数据
var path = [];

for (var i = 0; i < 360; i++) {
  var angle = i * Math.PI / 180;
  var x = center.lng + radius * (16 * Math.pow(Math.sin(angle), 3));
  var y = center.lat + radius * (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle));
  path.push(new BMap.Point(x, y));
}

// 创建多边形对象
var polygon = new BMap.Polygon(path, {
  strokeColor: '#F33', // 描边颜色
  fillColor: '#F33', // 填充颜色
  strokeWeight: 5, // 线宽
  strokeOpacity: 0.8, // 线透明度
  fillOpacity: 0.5 // 填充透明度
});

//将多边形覆盖物添加到地图上
map.addOverlay(polygon);
  
     var opts = {
        position: new BMap.Point(116.40400000000001,39.88557496508942),
        offset: new BMap.Size(0, 10)//设置文本偏移量
    }
    var label = new BMap.Label('祝全国的朋友们儿童节快乐！', opts); // 创建文本标注对象
    label.setStyle({
        color: "#fff",
        fontSize: "10px",
        height: "24px",
        lineHeight: "20px",
        padding: "2px 5px",
        border: "1px solid rgba(255, 255, 255, 0.9)",
        background: "rgba(255, 0, 0, 0.9)",
        fontWeight: "bold",
        transform: 'translateX(-50%)',
        fontFamily: "微软雅黑"
    });
    map.addOverlay(label);
  
</script>

(二)实际过程的坎坷

期初在高德地图上测试，效果如下：
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

(三)深有感触

  • ChatGPT取代不了高精尖层次的人，但是只有基础技能的人，取代的可能性还是很大的；
  • ChatGPT是个工具，只有懂某个行业的基础逻辑，才能更好的使用，也才有可能有更好的创意实现。

@漏刻有时

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

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

相关文章

浏览器跨域的配置

浏览器跨域的配置

目录 1、前言 2、同源策略 3、跨源数据存储访问 4、浏览器跨域设置 4.1 版本号&#xff08;49.x.x.x.x&#xff09;之前的跨域设置 4.2 版本号&#xff08;49.x.x.x.x&#xff09;之后的跨域设置 5、批处理跨域设置 5.1 windows 操作系统。 5.2 Mac 操作系统 1、前言 …
阅读更多...
STL库(1)

STL库(1)

STL库&#xff08;1&#xff09; vectorvector介绍vector使用初始化元素访问内存扩容插入删除 listlist介绍初始化&#xff0c;元素访问插入删除元素 vector和list区别 vector vector介绍 vector是可以改变大小的数组的容器。其内存结构和数组一样&#xff0c;使用连续的存储…
阅读更多...
我是如何精通软件工程的

我是如何精通软件工程的

软件工程是一个庞大且不断演化的领域&#xff0c;涉及许多创新。虽然如此&#xff0c;大多数技术 —— 如果不是全部 —— 在软件工程中往往最终汇聚为几个基本原则。工程师更好地掌握软件工程的方法是熟悉软件工程的基础知识&#xff0c;而不是那些不断变化的框架、语言或平台…
阅读更多...
2023年Web服务器基准测试：NodeJS vs Java vs Rust vs Go

2023年Web服务器基准测试：NodeJS vs Java vs Rust vs Go

现在是2023年&#xff0c;是时候进行一次新的Web服务器基准测试了&#xff01; 结果对我来说有些出乎意料&#xff01; 一个Web服务器必须能够处理大量请求&#xff0c;尽管瓶颈在于IO。这次我决定比较最流行的、速度极快的现代框架的性能。 以下是有关实现细节的许多详细信息…
阅读更多...
安装 vue-element-admin，安装报错解决

安装 vue-element-admin，安装报错解决

安装 vue-element-admin 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git //(英文的)git clone -b i18n https://github.com/PanJiaChen/vue-element-admin.git // 这个克隆出来是有中英文切换的进入项目目录 cd vue-element-admin建议不要用 cnpm…
阅读更多...
chatgpt赋能python：Python交互编程入门指南

chatgpt赋能python：Python交互编程入门指南

Python交互编程入门指南 Python是一种高级编程语言&#xff0c;适合初学者和专业人士使用。Python的互动式编程方式为开发人员提供了快速反馈的环境&#xff0c;从而实现更便捷和高效的开发过程。在本文中&#xff0c;我们将介绍Python的交互编程&#xff0c;为您提供Python编…
阅读更多...
达梦数据库运维常用归档、sql日志、dexp与dimp操作

达梦数据库运维常用归档、sql日志、dexp与dimp操作

目录 一、归档文件配置... 3 二、sql⽇志的开启和关闭以及基本的操作... 3 三、执行计划... 5 四、工具和命令行数据库物理、逻辑备份&#xff0c;还原... 6 1、工具物理备份... 6 2、命令行联机备份... 8 3、命令行脱机备份... 8 4、工具物理还原... 8 5、命令行DMRM…
阅读更多...
C++之动态分配new 删除delete 初始化memset

C++之动态分配new 删除delete 初始化memset

文章目录 1.动态分配 new1.引言2.new的实现 2.删除 delete3.初始化 memset 1.动态分配 new 1.引言 用new创建数组的优势&#xff1a;由于new创建的对象是在运行时确立的&#xff0c;所以有着具体情况具体分析的优点&#xff0c;那么什么叫做具体情况具体分析呢&#xff1f; 举…
阅读更多...
linux led 驱动

linux led 驱动

前言 今天是儿童节&#xff0c;挣个奖牌给小孩玩玩。 在 linux 驱动大家庭中&#xff0c;LED 驱动算是个儿童&#xff0c;今天就写写他吧。正好之前写过他的婴儿时期《i.MX6ULL 裸机点亮 LED》&#xff0c;记得那时候他还穿着开裆裤呢&#xff0c;裸鸡嘛。 ioremap() 裸机程…
阅读更多...
某点资讯Signature纯算逆向

某点资讯Signature纯算逆向

本篇主要是介绍一些工作的运用熟练性&#xff0c;以及跟踪堆栈去看是否做一些其他操作等&#xff1a; 抓包: signature 为加密值&#xff1b; 先上trace下堆栈及加密 我们把结果base64下&#xff0c;看结果是否一致&#xff0c;来判断base64是否魔改 验证base64为标准&…
阅读更多...
新规之下产业园区如何合理收费水电费用

新规之下产业园区如何合理收费水电费用

一、政策背景 2018年3月30日&#xff0c;国家发改委发布《国家发展改革委关于降低一般工商业电价有关事项的通知》。明确提出进一步规范和降低电网环节收费&#xff0c;一是提高两部制电价的灵活性&#xff1b;二是全面清理规范电网企业在输配电价之外的收费项目&#xff0c;重…
阅读更多...
三极管 场效应管

三极管 场效应管

NPN 高电平导通 PNP 低电平导通 N-MOS 高电平导通 P-MOS 低电平导通 1. NPN 三极管&#xff0c;对于软件工程师来说&#xff0c;只需要关注数字电路&#xff0c;即: 导通还是截止&#xff0c;高电平还是低电平。至于三级管内部如何构成的&#xff0c;以及串了多少个电阻&am…
阅读更多...
智能安全配电装置在老旧建筑防火中的应用

智能安全配电装置在老旧建筑防火中的应用

【摘要】现代社会的发展离不开电能&#xff0c;随着电能应用的广泛性&#xff0c;对用电安全有了更高的要求。近些年来&#xff0c;用电安全形式严峻&#xff0c;尤其是一些老旧建筑中因用电而引起的火灾事故频发&#xff0c;造成一系列严重的损失&#xff0c;严重影响着民众的…
阅读更多...
PCout(n) -- STM32F103RCT6 位带操作

PCout(n) -- STM32F103RCT6 位带操作

1. 使用位带操作控制GPIO口的输入、输出模式&#xff0c;以及输出的电平高、低 注&#xff1a;位带操作一般是操作单独的一个bit 位&#xff0c;而&&#xff0c;| 则可操作多个bit位&#xff0c;看自己的需求吧。&#xff08;不懂&&#xff0c;| 是什么意思的自行问度…
阅读更多...
MySQL-6-多表操作

MySQL-6-多表操作

一、复制表 格式 create table 表名 select查询语句注意&#xff1a;复制成新表时&#xff0c;键值&#xff08;pri,index等等&#xff09;索引不会同步复制案例 mysql> create table t2 select name,sex,age from user;二、多表查询 2.1、 多表查询–>连接查询 将2个…
阅读更多...
Vue.js 比较重要知识点总结一

Vue.js 比较重要知识点总结一

概述 谈一谈你对 Vue.js 的响应式数据的理解Vue3 出现解决了什么问题&#xff1f;它有哪些优势&#xff1f;Vue3 新特性有哪些vue2 和 vue3 的响应式有什么区别&#xff1f; 谈一谈你对 Vue.js 的响应式数据的理解 Vue 2.x 对象类型&#xff1a;通过 object.defineProperty(…
阅读更多...
MySQL——初窥门径

MySQL——初窥门径

前言 六一&#xff1f;作为一个大小孩当然是快快乐乐搞技术啦~在这篇文章中&#xff0c;荔枝会梳理SQL语句的基本语法以及MySQL中的函数、约束。多表关系以及查询、事务和事务隔离级别等内容&#xff0c;大致内容归属于MySQL基础知识&#xff0c;荔枝又弄了一篇万字长文哈哈哈哈…
阅读更多...
R：GAM非线性回归曲线拟合与散点密度图绘制

R：GAM非线性回归曲线拟合与散点密度图绘制

作者：CSDN @ _养乐多_ 本文将介绍使用R语言以及GAM模型，绘制回归曲线和散点密度图。 文章目录 一、R语言脚本二、色带一、R语言脚本 install.packages("ggpointdensity") install.packages("ggplot2") insta
阅读更多...
IPD发展史

IPD发展史

随着IPD&#xff08;集成产品开发&#xff09;在IBM、华为等企业取得了巨大的成功&#xff0c;其他行业也开始在相关新产品研发中初步引入IPD的研发管理理念及模式&#xff0c;对IPD在行业的应用进行初步的探索和研究。 为了更好地应用IPD &#xff0c;不仅要对它的理念和思想理…
阅读更多...
浅谈高等学校能源监控管理体系建设

浅谈高等学校能源监控管理体系建设

摘要&#xff1a;现代高校担当着人才培养&#xff0c;社会服务和文化传承与创新的光荣使命。高校低碳节能工作是加快建设“和谐社会”、“绿色校园”的重要举措 。当前高校以“数字化能源监测平台”为重心 &#xff0c;积极推动能源管理的转型 。该文总结高校能源监管平台建设的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023