《Cesium 结合 Vue 实现地图标绘点功能及应用场景》

Cesium 实现地图自定义标绘点功能

在地理信息系统（GIS）开发中，地图标绘点功能是一个常见且实用的需求，精准标注地图上的特定位置至关重要。Cesium 作为一款强大的开源 WebGIS 库，为开发者提供了丰富的工具来实现这类功能。本文将结合具体代码，深入解析如何使用 Cesium 创建地图标绘点功能

一、功能实现代码解析

（一）HTML 部分

  <button class="layui-btn layui-btn-primary layui-btn-sm" id="drawpoint" title="绘制点">
                        <img src="../src/assets/img/newimg/hzd.png" style="width:15px;height:15px">
                        <div class="btn_tit">标记点</div>
                    </button>
<div class="airdiaPoint">

  <div class="elFormClass" > 
    <div style="text-align: left;font-size: 16px;font-weight: 600">标记点</div>
  <el-form :model="form" ref="dialogForm" label-position="left" label-width="80"
    style="margin-right: 12px;box-sizing: border-box;padding-top: 10px;">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="标记名称" prop="poiName">
          <el-input v-model="form.poiName" :placeholder="'请输入'" clearable>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24"> 
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="form.longitude" :placeholder="'请输入经度'" clearable>
          </el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="form.latitude" :placeholder="'请输入纬度'" clearable>
          </el-input>
        </el-form-item>
      </el-col>

      &