vue+GeoDjango 处理地理空间数据（持续更新）

综述：本文讲述后端如何存储、传输、处理地理空间数据；

1.解析WKT字符串

应用场景：前端通过get请求获取后端数据时，后端需要传递正确的接口文件，然而地理空间数据不能直接转化成json字符串传递，因此只能先解析出来再传递；

WKT字符串含义之前文章介绍过，这里简单说明：

Django 扩展地理空间数据（GeoDjango）详细操作-优快云博客

  SRID=4326;MULTIPOINT (119.215969 34.602489, 119.224616 34.603649, 119.223238 34.611877, 119.214353 34.610517, 119.215969 34.602489)是一个地理空间数据的表示，使用 Well-Known Text (WKT) 格式定义的多点 (MultiPoint) 几何对象；；

from django.contrib.gis.geos import GEOSGeometry, MultiPoint, Point
# 解析WKT字符串
multipoint = GEOSGeometry(quyu.geom)

# 检查是否是MultiPoint类型  组合成一个可以传递的json对象
if multipoint.geom_type == 'MultiPoint':
    # 遍历每个点
    for point in multipoint:
        # 获取点的经纬度
        longitude, latitude = point.coords
        points.append([longitude, latitude])
        # print(f'经度: {longitude}, 纬度: {latitude}')
else:
    print('这不是一个MultiPoint对象')

 上述代码主要功能是 提取WTK字符串中的经纬度点，并重新组合成列表放在points中；

2.将经纬度点装配成WTK格式（json.loads json.dumps）

应用场景：后端接收到前端post请求传递过来的参数，要将传递的数据正确存储到数据库中，需要将前端传过来的经纬度点列表重新装配成WTK格式；

# 获取POST参数
        # 获取JSON数据
        data = json.loads(request.body)

        # 从JSON数据中提取 name  description  area   points
        name = data.get('name')
        description = data.get('description')
        area = data.get('area')
        points = data.get('points')
        # 将每个坐标对转换为Point对象
        point_objects = [Point(point[0], point[1]) for point in points]
        geom = MultiPoint(point_objects)
        geometry = GeometryModel.objects.create(name=name, description=description, area=area, geom=geom)
        return JsonResponse({'code': 200, 'message': '区域发布成功！'})

json.loads() 函数确实是用来将 JSON 格式的字符串转换为 Python 的数据结构；

json.dumps() 函数是将 Python 的数据结构（如字典、列表、字符串、整数、浮点数等）转换为 JSON 格式的字符串。

这里json.loads()先将前端传递的json字符串转化为python可以处理的字典对象； point_objects = [Point(point[0], point[1]) for point in points]是将每个坐标对转换为Point对象，地理空间数据处理的是point对象，因此需要这一步；geom = MultiPoint(point_objects)是将多个坐标点转化为MultiPoint对象，为了后续将数据存储到数据库中； geometry = GeometryModel.objects.create(name=name, description=description, area=area, geom=geom)操作就是向数据库中插入一条数据。

3.axios发送get、post请求

async function getquyuinfo() {
  try {
    let result = await axios.get('http://127.0.0.1:8000/quyu')
    console.log('http://127.0.0.1:8000/quyu', result.data)
    quyu_list = result.data
  } catch (error) {
    console.log(error)
  }
}

// 新增区域信息
async function setquyuinfo(name, description, area, points) {
  try {
    let result = await axios.post('http://127.0.0.1:8000/quyu/', {
      name: name,
      description: description,
      area: area,
      points: points,
    })
    console.log('http://127.0.0.1:8000/quyu/', result.data)
  } catch (error) {
    console.log(error)
  }
}

get请求无需写到参数，post请求通过上述方式携带参数；