共计 1485 个字符，预计需要花费 4 分钟才能阅读完成。
提醒：本文最后更新于 2024-08-29 14:32，文中所关联的信息可能已发生改变，请知悉！
- 帮憨憨室友做创新实践作业
- 用 JavaScript 不一定要学 JavaScript 系列
- 文末有完整源码和数据集的链接
获取高德地图 API
请自行百度
编写 head
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>2018 年 12 月 1 日 -PM2.5 情况 </title> | |
| <style> | |
| html, | |
| body, | |
| #container { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> |
编写 body
调用 API
| <script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script> | |
| <script src="https://webapi.amap.com/maps?v=1.4.15&key= 你的 key"></script> | |
| <script src="//webapi.amap.com/loca?v=1.3.2&key= 你的 key"></script> |
导入 csv 数据集
$.get('china5a2.csv', function (data)
设置地图参数
| var map = new AMap.Map('container', { | |
| mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536', | |
| zoom: 4, | |
| center: [107.4976, 32.1697], | |
| features: ['bg', 'road'], | |
| // Loca 自 1.2.0 起 viewMode 模式默认为 3D，如需 2D 模式，请显示配置。// viewMode: '3D' | |
| } |
给定经纬度和 PM2.5 指数
| layer.setData(data, { | |
| // lnglat: ' 经纬度 ', | |
| // lnglat: ['lon', 'lat'], | |
| // 或者使用回调函数构造经纬度坐标 | |
| lnglat: function (obj) { | |
| var value = obj.value; | |
| var lnglat = [value[' 经度 '], value[' 纬度 ']]; | |
| return lnglat; | |
| }, | |
| // 指定数据类型 | |
| type: 'csv' | |
| }); | |
| layer.setOptions({ | |
| style: { | |
| // 圆形半径，单位像素 | |
| radius: function (obj) { | |
| var value = obj.value; | |
| var lnglat = value['pm25'] * 0.1; | |
| return lnglat*0.2; | |
| }, | |
| // 填充颜色 | |
| // color: '#5DFBF9', | |
| color: 'red', | |
| // 描边颜色 | |
| borderColor: 'red', | |
| // 描边宽度，单位像素 | |
| borderWidth: 1, | |
| // 透明度 [0-1] | |
| opacity: 1, | |
| } | |
| }); |
效果图
使用鼠标滚轮可以放大缩小，放大后细节很多，但由于数据集有些大，看起来会与点卡
源码链接
https://github.com/Chaos-xBug/map_pm2.5
有用就给个 star 吧
正文完
