如何将csv里的经纬度位置数据可视化在百度地图上

脂肪很多的徽

已于 2023-05-03 00:42:39 修改

阅读量1.7k

点赞数 2

文章标签：信息可视化 python html javascript json

于 2023-04-04 23:42:06 首次发布

本文链接：https://blog.csdn.net/huihui0325/article/details/129964214

版权

获取了带经纬度坐标的csv数据，需要通过以下步骤才能可视化在百度地图上，这部分踩了很多坑，写个笔记总结一下。

先放个成果图~

1.CSV转JSON

话不多说，直接上代码

import json
import pandas as pd
if __name__ == '__main__':
    # 读取CSV文件
    csvData = pd.read_csv(r'./已有托育机构分布（美团）.csv', header = 0)  

    # 读取CSV文件包含的列名并转换为list
    columns = csvData.columns.tolist()
    # print(columns)

    num=数据的行数
    for i in range(num): 
        # 创建空字典
        outPut = {}
        # 将CSV文件转为字典
        for col in columns:
            outPut[col] = str(csvData.loc[i, col]) # 这里一定要将数据类型转成字符串，否则会报错
        # 将字典转为json格式
        jsonData = json.dumps(outPut) # 注意此处是dumps，不是dump
        # 保存json文件
        with open(r'xxx.json', 'a') as jsonFile:
            jsonFile.write(',') #到时候再删掉多的逗号，加上中括号
            jsonFile.write(jsonData)

需要补充一下，我写的有点小问题但懒得改了，可以手动修改。将生成的json文件开头的逗号去掉，再在开头和结尾加上中括号，即是正确格式的json文件。

2.跨域错误解决

在我想把json导入js时，一直报跨域错误Access-Control-Allow-Origin，把梯子关了也不行，后来使用以下方法解决

1.npm install anywhere

2.在你html所在的文件夹下，输入anywhere，会有新的弹窗，新弹窗里打开的文件即可以访问

3.将数据导入js中，并实现全局访问

会遇到两个问题，一个是数据如何传到js中，一个是如何实现数据全局访问，以下方法可以一次解决~

<script>
  var inputData = (function () {
            var result;
            $.ajax({
                type: 'GET',
                url: './xxx.json',
                dataType: 'json',
                async: false,   //输入false表示同步，异步获取不了全局访问的数据
                success: function (data) {
                    result = data;
                }
            });
            return result;
        })();
</script>

4.申请百度地图浏览器端API

百度地图控制台：https://lbsyun.baidu.com/apiconsole/key#/home

申请格式如下：

5.百度地图上可视化坐标位置

数据展示：json数据

[
{
    "id": "122",
    "lat_min": "23.09886824",
    "lng_min": "113.3187407",
    "lat_max": "23.10303315",
    "lng_max": "113.3232416",
    "center_lat": "23.1009507",
    "center_lng": "113.3209912",
    "bd_lat": "23.10676548",
    "bd_lng": "113.3275279"
},
{
    "id": "158",
    "lat_min": "23.14469304",
    "lng_min": "113.3862339",
    "lat_max": "23.14885169",
    "lng_max": "113.3907293",
    "center_lat": "23.14677237",
    "center_lng": "113.3884816",
    "bd_lat": "23.15304997",
    "bd_lng": "113.3949119"
},
{
    "id": "168",
    "lat_min": "23.181907",
    "lng_min": "113.2557883",
    "lat_max": "23.18606133",
    "lng_max": "113.260281",
    "center_lat": "23.18398417",
    "center_lng": "113.2580347",
    "bd_lat": "23.19012675",
    "bd_lng": "113.2645249"
}
]

可视化代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>xxx位置可视化地图</title>
    <body>
      <!-- <script type="module" src="./tuoyuMap.js"></script> -->
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    </body>
    
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_container {
            width: 100%;
            height: 100%;
        }
    </style>

    <!-- 百度地图基础库 -->
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你自己申请的api"></script>
    <!-- 公共的文件代码 里面包含 地图初始化 和 实用样式 -->
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <!-- 使用根据城市名称获取城市的坐标 -->
    <script src="https://mapv.baidu.com/build/mapv.js"></script>
    <!--使用mapcgl的时候需要引入-->
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>

<div id="map_container"></div>

<!-- 对散点图的复盘 -->
<script>
  var inputData = (function () {
            var result;
            $.ajax({
                type: 'GET',
                url: './xxx.json',
                dataType: 'json',
                async: false, //一定要同步啊！
                success: function (data) {
                    result = data;
                }
            });
            return result;
        })();
        // console.log(inputData)
  
  let map = initMyMap()
  let data = initData(inputData);
  setData(map, data)

  /**
   * 初始化地图
   * */
  function initMyMap() {
    // 使用工具类获取城市的中心点坐标
    let centerCity = mapv.utilCityCenter.getCenterByCityName('广州')
    // 使用  /examples/static/common.js 下的 initMap 方法进行地图的初始化
    let map = initMap(
      {
        tilt: 45,  //也可以设置倾斜0度
        heading: 30,
        zoom: 10,
        center: [centerCity.lng, centerCity.lat],
        style: snowStyle
      }
    )
    return map
  }

  /**
   * 初始化数据
   */
  function initData(shuru) {
    // 保存的是每一个点的数据信息 这些点需要进行构造
    let data=[]

    // 需要绘制的点的数量
    var inputData=shuru
    console.log(shuru)
    var len=inputData.length;
    console.log(len)

    for(var i=0;i<len;i++) {
      // 根据每一个中心点坐标
      // console.log(i)
      data.push(
        {
          geometry: {
            // 可以设置类型的有 : Point(点)、 LineString(线)、Polygon(面)  这里设置的类型是点
            type: 'Point',
            // 设置当前点的坐标点
            coordinates: [inputData[i].bd_lng,inputData[i].bd_lat]
          },
          // 可以为每一个点配置一些数据信息
          properties: {
            sales: 25
          }
        }
      );
    }
    return data;
  }

  /**
   * 设置数据源
   * @param map
   * @param data
   */
  function setData(map, data) {
    // 创建 intensity 强度对象用于优化每一个点的显示效果
    let intensity = new mapvgl.Intensity(
      {
        min: 0,
        max: 100,
        minSize: 5,
        maxSize: 30,
        // 加入一个区分颜色的渐变配置信息
        gradient: {
          0: 'rgb(25, 66, 102, 0.8)',
          0.3: 'rgb(255,99,71,0.8)',
          0.7: 'rgb(210, 131, 137, 0.8)',
          1: 'rgb(248, 177, 149, 0.8)'
        }
      }
    )
    // 创建图层信息
    let pointLayer = new mapvgl.PointLayer(
      {
        size: function (data) {
          return intensity.getSize(parseInt(data.properties.sales))
        },
        color: function (data) {
          return intensity.getColor(parseInt(data.properties.sales))
        }
      }
    );
    // 根据 map 对象 生成图层管理器
    let view = new mapvgl.View(
      {
        map
      }
    );
    // 将图层添加到 view 图层管理器中
    view.addLayer(pointLayer)
    //为图层绑定数据源
    pointLayer.setData(data)
  }

</script>
</body>
</html>

最终可视效果如图：