chatgpt仅用4步生成交互式地图

背景

为了日常工作中数据可视化，打算做一个带有地图功能的小工具。目标是能够根据输入的地图数据文本格式（wkt）在地图上绘图。

之前楼主用python包-folium写过静态的含有地图的html生成代码，尝试多种方法都没有找到folium比较好的交互式地图生成方法。所以，这次尝试用JavaScript库-leaflet 重写并扩展出交互能力。

由于楼主没有学习过前端技能（HTML、JavaScript、CSS），尝试用chatGPT辅助来做这件事情。

正文

step1

第一步，将python版本的代码输入给大模型

import numpy as np
import folium

from folium.plugins import MeasureControl

m= folium.Map(location=(39.757719,116.3761782),tiles=None,attr='Amap Attribution', max_zoom = 24, zoom_start = 10)
tiles ='http://rt1.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0'
folium.TileLayer(tms=True,tiles = tiles, name = "腾讯地图", attr='tencent', control = True).add_to(m)

tmp_warehouse_group = folium.map.FeatureGroup('围栏', show=True).add_to(m)
warehouse_fence = [[116.32298683183761, 39.7831467197871], [116.3224748861466, 39.790995329039255],
[116.32841348648073, 39.794375231551726], [116.33008718490602, 39.79442469230676]]
import copy

warehouse_fence_trans = copy.deepcopy(warehouse_fence)
for i in range(len(warehouse_fence)):
    warehouse_fence_trans[i][0] = warehouse_fence[i][1]
    warehouse_fence_trans[i][1] = warehouse_fence[i][0]
    folium.Polygon(
    warehouse_fence_trans,
    color='green',
    fill=False,
    weight=4).add_to(tmp_warehouse_group)

#增加控制面板
folium.LayerControl(position='topleft', collapsed=False).add_to(m)
MeasureControl().add_to(m)

#保存文件
m.save('./visual_test.html')

大模型给出的反馈是这段代码的含义（这一步的反馈用不上）

step2

第二步，给出代码转换指令

“这段代码改写成leaflet形式”

大模型给出的结果如下：

这一步给出的代码，复制到html文件中，基本就可以用了，长下面这个样子，到这里，基本就是把python代码转译成了前端语言而已，没有新功能。

step3

第三步，给出新增功能的指令

在此基础之上，我希望能够提供一个文本框，能够根据文本框里的wkt格式数据在地图上绘制

在实际使用时发生报错：

把bug抛给大模型，让它自我检讨一下：

上面代码有错误，ReferenceError: wellknown is not defined

得到反馈如下：

根据报错，可能是网络等原因找不到js库，我问问它怎么处理：

如何下载wellknown库到本地服务器

我尝试将js库download下来放在本地，问题解决。

新功能有了，基本满足要求。

step4

第四步，样式不太好看，我想让文本框和按钮悬浮在地图中。

针对上面这段代码，如何把文本框以地图图层的形式加入到map中？

最终效果如下所示：

总结

通过这次实验，有几点感受：
1）利用大模型/chatgpt可以快速探索新领域、新知识，学习新知识、新技能不再需要从基础开始；
2）有大模型的辅助，可以大幅提高开发效率，遇到报错，直接给出指令，大模型自我检查即可，比人检查可能更快；
3）眼界、审美等非标知识是未来人才的重要护城河，标准技能容易被AI替代；
4）在AI时代，技能延伸拓展更加容易，有python经验，拓展到前段代码不算难事，AI作为老师的角色存在。