cesium 实现 场景编辑(物料区+编辑区+属性配置区)

原创 已于 2024-12-05 20:51:42 修改 · 685 阅读 · 4 ·
CC 4.0 BY-SA版权
柳晓黑胡椒
文章标签：

#cesium #低代码 #标绘 #组态

于 2024-11-26 16:34:04 首次发布

🚀 个人简介：某大型测绘遥感企业资深Webgis开发工程师，软件设计师(中级)、优快云优质创作者
💟 作 者：柳晓黑胡椒❣️
📝 专 栏：cesium实践(原生)
🌈 若有帮助，还请关注 ➕ 点赞➕收藏，不行的话我再努努力💪💪💪

需求背景

应粉丝要求，需要实现地图实例组态拖拽，地图可配置地图实例编辑的需求，每个实例需要有一个气泡，气泡内可自由编辑，且可放置视频与图片

解决思路

  • 地图实例组态：参考低代码的思路，把地图实例分为三个区块，物料区(可操作的实例)，编辑区(管理已添加的实例)，属性配置区(单个实例的属性编辑)
  • 气泡可自由编辑：采用divPoint的思路，监听地图渲染事件变化div标签在屏幕位置，div内容供粉丝随意编辑添加
  • 物料区：预想添加之前cesium目前已了解的实例和效果，后续持续更新
  • 属性配置区：包含cesium实例所有可配置参数，以及实时更新

实现效果

index.vue

/**
* @author: liuk
* @date: 2024-11-26
* @describe: 场景编辑(物料区+编辑区+属性配置区)
*/
<template>
  <div class="sceneEdit-wrap">
    <div class="material-area">
      <div class="setting-tabs">物料区</div>
      <ul class="operate-area">
        <li v-for="info in infos" :key="info.name">
          <div class="model-title">
            <span></span>
            {{ info.name }}
          </div>
          <div class="model-item" v-if="info.types[0]?.img">
            <div class="son-item" v-for="item in info.types" :key="item.label" @click="drawFn(info.name,item)">
              <img :src="item.img" alt=""/>
              <div>{{ item.label }}</div>
            </div>
          </div>
          <div class="model-item-btn" v-else>
            <el-button v-for="item in info.types" :key="item.label" @click="drawFn(info.name,item)" size="small">
              {{ item.label }}
            </el-button>
          </div>
        </li>
      </ul>
      <div class="operate">
        <el-button type="primary" plain @click="cutImg">截取封面</el-button>
        <el-button type="primary" plain @click="mapResetCamera">默认视角</el-button>
        <el-button type="primary" class="preserve" @click="saveConfig">保存</el-button>
      </div>
    </div>
    <div class="edit-area">
      <div class="head_title_arrow">编辑区</div>
      <div class="content">
        <el-tree ref="treeRef" :data="treeData" :default-expanded-keys="defaultKeys" node-key="id">
          <template #default="{data}">
            <span>{{ data.label }}</span>
            <span>{{ data.children ? `&nbsp;(${data.children.length})` : '' }}</span>
            <el-icon style="margin-left: 5px" v-if="!data.children" @click="flyToGraphic(data.id)">
              <Promotion/>
            </el-icon>
            <el-icon style="margin-left: 5px" @click="removeNode(data.id)" v-if="!data.children">
              <Delete/>
            </el-icon>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="property-editing-area" v-show="propertyEditingShow">
      <div class="top-area">
        <span class="head_title_arrow">属性配置区</span>
        <el-icon :size="16" @click="closeEdit">
          <Close/>
        </el-icon>
      </div>
      <div>
        <el-icon :size="18" style="margin-right: 6px" @click="flyToGraphic()">
          <Promotion/>
        </el-icon>
        <el-icon :size="18" style="margin-right: 6px" @click="removeNode()">
          <Delete/>
        </el-icon>
        <el-icon :size="18" style="margin-right: 6px" @click="getGeoJson">
          <DocumentCopy/>
        </el-icon>
      </div>
      <el-form :model="formData" ref="formRef" label-width="98" label-position="right">
        <el-form-item v-for="(item,index) in curStyles" :key="index" :label="item.label" :prop="item.name"
                      :name="item.name">
          <template #label>
            <span :title="item.name" @click="copyUrl(item.name)">{{ item.label }}</span>
          </template>
          <component :is="components[item.type]" size="small" v-model="formData[item.name]"
                     :min="item.min || item.min === 0 ? item.min : -Infinity"
                     :max="item.max || item.max === 0 ? item.max : Infinity" :step="item.step || 0.1"
                     :style="{width: item.type ==='slider'?'88%' :'100%'}" :disabled="item.disabled"
                     @change="styleChange(item.name,$event)">
            <template v-if="item.type ==='combobox'">
              <el-option v-for="(x,index) in item.data" :key="index" :label="x.label" :value="x.value"/>
            </template>
          </component>
        </el-form-item>
      </el-form>
    </div>
    <Tdt_img_d/>
    <!-- 气泡-->
    <ul v-for="(item,index) in popupList" :key="index">
      <li :class="['surveyStation-popup',item.class]" :style="{ transform: `translate(${item.x }px, ${item.y}px)`}">
        {{ item.remark }}
        <img src="@/assets/images/no-select.png"/>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import {reactive, toRefs, ref, onMounted, onUnmounted} from "vue";
import {usemapStore} from "@/store/modules/cesiumMap.ts";
import {ElMessage} from "element-plus";
import {generateUUID, downloadFile, copyUrl, cartesianToWgs84} from "@/utils/dictionary"
import * as mars3d from "mars3d";
import * as turf from '@turf/turf'
import defaultData from "./data"
import tempJSON from "./temp.json"
import styleConfig from "./styleConfig"

// Component
import Tdt_img_d from "@/views/cesium/component/controlPanel/layerManagement/basicMap/tdt_img_d.vue"

const components = {
  number: "el-input-number",
  radio: "el-switch",
  slider: "el-slider",
  color: "el-color-picker",
  combobox: "el-select",
  textarea: "el-input",
  label: "el-input"
}
// Refs
const treeRef = ref()
const formRef = ref()

const mapStore = usemapStore()
const model = reactive({
  treeData: [],
  defaultKeys: [2],
  propertyEditingShow: false,
  curStyles: [],
  formData: {}
})
const {treeData, defaultKeys, propertyEditingShow, curStyles, formData} = toRefs(model)

onMounted(() => {
  popupModel.popupList = tempJSON.features.map(item => {
    const {nodeId, label, customType, remark, longitude, latitude, height} = item.properties
    const temp = defaultData.find(item => item.label === customType)
    temp.children.push({id: nodeId, label})
    return {id: nodeId, longitude, latitude, height, remark: remark || "暂无备注", class: `popup-box-${nodeId}`}
  })
  model.treeData = defaultData
  viewer.addLayer(graphicLayer)
  graphicLayer.loadGeoJSON(tempJSON)
  graphicLayer.on([mars3d.EventType.drawCreated, mars3d.EventType.editStart, mars3d.EventType.editMovePoint, mars3d.EventType.editStyle, mars3d.EventType.editRemovePoint], EditorFn)
  graphicLayer.on([mars3d.EventType.editStop, mars3d.EventType.removeGraphic], editStopFn)
  viewer.scene.postRender.addEventListener(showPopupBox);
})

onUnmounted(() => {
  model.treeData = []
  graphicLayer.off([mars3d.EventType.drawCreated, mars3d.EventType.editStart, mars3d.EventType.editMovePoint, mars3d.EventType.editStyle, mars3d.EventType.editRemovePoint], EditorFn)
  graphicLayer.off([mars3d.EventType.editStop, mars3d.EventType.removeGraphic], editStopFn)
  viewer.scene.postRender.removeEventListener(showPopupBox);
  graphicLayer.clear()
  viewer.removeLayer(graphicLayer)
})

const drawFn = (name, row) => {
  const {label, drawType: type, style} = row
  if (!type) {
    ElMessage.warning("开发中")
    return
  }
  graphicLayer.startDraw({type, style, attr: {label, customType: name}})
}

const editStopFn = () => {
  model.propertyEditingShow = false
}

const flyToGraphic = (id?: string) => {
  const graphic = id ? graphicLayer.getGraphicsByAttr(id, "nodeId")[0] : curGraphic
  graphic.flyTo({duration: 1})
}

const removeNode = (id) => {
  let graphic
  if (id) {
    graphic = graphicLayer.getGraphicsByAttr(id, "nodeId")[0]
  } else {
    graphic = curGraphic
    id = graphic.attr.nodeId
    model.propertyEditingShow = false
  }
  treeRef.value.remove(id)
  const index = popupModel.popupList.findIndex(item => item.id === id)
  index !== -1 && popupModel.popupList.splice(index, 1)
  graphic && graphic.remove()
  reset()
}

const saveConfig = () => {
  if (!graphicLayer.getGraphics().length) {
    ElMessage.warning("当前没有标注任何数据，无需保存！")
    return
  }
  const geojson = graphicLayer.toGeoJSON()
  const jsonString = JSON.stringify(geojson, null, 2);
  downloadFile(`temp.json`, jsonString)
}

const closeEdit = () => {
  model.propertyEditingShow = false
}

const reset = () => {
  model.curStyles = []
  model.formData = {}
}

// 地图逻辑
const viewer = mapStore.getCesiumViewer()
let curGraphic
const graphicLayer = new mars3d.layer.GraphicLayer({
  hasEdit: true,// 开启编辑
  isAutoEditing: true // 绘制完成后是否自动激活编辑
})

const mapResetCamera = () => {
  viewer.camera.flyTo({
    destination: new Cesium.Cartesian3.fromDegrees(113.048936, 25.755645, 77805.77),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: Cesium.Math.toRadians(0),
    },
    duration: 2,
  })
}

const EditorFn = (e) => {
  curGraphic = e.graphic
  const {customType, label, nodeId, remark} = curGraphic.attr
  // 属性配置区
  formRef.value.scrollToField('name')
  model.propertyEditingShow = true
  model.curStyles = [
    {name: "name", label: "名称", type: "textarea", defval: label},
    {name: "remark", label: "备注", type: "textarea", defval: remark},
    {name: "customType", label: "所属组类", type: "textarea", defval: customType, disabled: true},
    {name: "editType", label: "样式类型", type: "textarea", defval: curGraphic.type, disabled: true},
    ...styleConfig[curGraphic.type]?.style,
  ]
  model.curStyles.forEach(({name, defval}) => model.formData[name] = curGraphic.style[name] || defval)
  // 气泡
  // const features = turf.points(curGraphic.coordinates)
  // const center = turf.center(features);
  const [longitude, latitude, height] = cartesianToWgs84(e.graphic.center)
  curGraphic.attr.longitude = longitude
  curGraphic.attr.latitude = latitude
  curGraphic.attr.height = height
  const index = popupModel.popupList.findIndex(item => item.id === nodeId)
  const obj = {id: nodeId, longitude, latitude, height, class: `popup-box-${nodeId}`, remark: remark || "暂无备注"}
  if (index !== -1) {
    popupModel.popupList[index] = obj
  } else {
    nodeId && popupModel.popupList.push(obj)
  }
  // 编辑区
  if (nodeId) return
  const {id: parentNode, children} = model.treeData.find(item => item.label === customType)
  const count = children.filter(item => item.label.match(/[\u4e00-\u9fa5]+/g).join("") === label.match(/[\u4e00-\u9fa5]+/g).join("")).length
  const data = {id: generateUUID(), label: `${label}${count ? "_" + count : ""}`}
  treeRef.value.append(data, parentNode)
  model.defaultKeys = [parentNode]
  curGraphic.attr.nodeId = data.id
  curGraphic.attr.label = `${label}${count ? "_" + count : ""}`
}

const styleChange = (name, val) => {
  const {nodeId} = curGraphic.attr
  switch (name) {
    case "name":
      const node = treeRef.value.getNode(nodeId)
      node.data.label = val
      curGraphic.attr.label = val
      break
    case "remark":
      curGraphic.attr.remark = val
      const index = popupModel.popupList.findIndex(item => item.id === nodeId)
      popupModel.popupList[index].remark = val
      break
    default:
      curGraphic.setStyle({[name]: val})
  }
}

const getGeoJson = () => {
  const {customType, label} = curGraphic.attr
  const geojson = curGraphic.toGeoJSON() // 文件处理
  const jsonString = JSON.stringify(geojson, null, 2);
  downloadFile(`${customType}-${label}.json`, jsonString)
}

const cutImg = () => {
  viewer.expImage({type: "image/png"})
}

// 地图弹框逻辑
const popupModel = reactive({
  popupList: []
})
const {popupList} = toRefs(popupModel)

const showPopupBox = () => {
  popupModel.popupList.forEach(item => {
    const {longitude, latitude, height: heigtZ} = item
    const dom = document.querySelector("." + item.class)
    if (!dom) return
    const width = parseInt(getComputedStyle(dom).width)
    const height = parseInt(getComputedStyle(dom).height)
    const curPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, heigtZ);
    try {
      const {x, y} = viewer.scene.cartesianToCanvasCoordinates(curPosition)
      item.x = x - (width / 2)
      item.y = y - height - 50
    } catch (e) {
    }
  })
}

import png1 from "@/assets/images/sceneEdit/sm@2x.jpg"
import png2 from "@/assets/images/sceneEdit/cd@2x.jpg"
import png3 from "@/assets/images/sceneEdit/jz@2x.jpg"
import png4 from "@/assets/images/sceneEdit/dl@2x.jpg"
import png5 from "@/assets/images/sceneEdit/hl@2x.jpg"
import png6 from "@/assets/images/sceneEdit/hb@2x.jpg"
import png7 from "@/assets/images/sceneEdit/js@2x.jpg"
import png8 from "@/assets/images/sceneEdit/dn@2x.jpg"
import png9 from "@/assets/images/sceneEdit/kz@2x.jpg"
import png11 from "@/assets/images/sceneEdit/h@2x.png"
import png22 from "@/assets/images/sceneEdit/y@2x.png"
import png33 from "@/assets/images/sceneEdit/dgy@2x.png"
import png44 from "@/assets/images/sceneEdit/jgy@2x.png"
import png55 from "@/assets/images/sceneEdit/s@2x.png"

const infos = [
  {
    name: "三维模型",
    types: [
      {label: "树木", img: png1, drawType: "model", style: {scale: 10, url: "/tree.glb"}},
      {label: "草地", img: png2, drawType: ""},
      {label: "建筑", img: png3, drawType: ""},
      {label: "道路", img: png4, drawType: ""},
      {label: "河流", img: png5, drawType: ""},
      {label: "湖泊", img: png6, drawType: ""},
      {label: "教室", img: png7, drawType: ""},
      {label: "电脑", img: png8, drawType: ""},
      {label: "课桌", img: png9, drawType: ""},
    ]
  },
  {
    name: "二维标注",
    types: [
      {label: '线', drawType: "polyline", style: {color: "#ffff00", width: 3, clampToGround: true}},
      {
        label: '虚线',
        drawType: "polyline",
        style: {color: "#ffff00", width: 3, materialType: "PolylineDash", clampToGround: true}
      },
      {
        label: '面', drawType: "polygon",
        style: {color: "#ffff00", opacity: 0.6, outlineWidth: 2.0, clampToGround: true}
      },
      {
        label: '矩形', drawType: "rectangle",
        style: {color: "#ffff00", opacity: 0.6, outlineWidth: 2.0, clampToGround: true}
      },
      {
        label: '圆', drawType: "circle",
        style: {color: "#ffff00", opacity: 0.6, outlineWidth: 2.0, clampToGround: true}
      },
      {
        label: '文字', drawType: "label",
        style: {text: "柳晓黑胡椒", color: "#0081c2", font_size: 50, outline: true, outlineColor: "#ffffff", outlineWidth: 2}
      }
    ]
  },
  {
    name: "三维标注",
    types: [
      {
        label: '墙体', drawType: "wall",
        style: {color: "#00ff00", opacity: 0.8, diffHeight: 400, closure: false}
      },
      {label: '动态墙', drawType: ""},
      {label: '箭头', drawType: ""}
    ]
  },
  {
    name: "场景特效",
    types: [
      {label: "火", img: png11, drawType: ""},
      {label: "烟", img: png22, drawType: ""},
      {label: "点光源", img: png33, drawType: ""},
      {label: "聚光源", img: png44, drawType: ""},
      {label: "水", img: png55, drawType: ""}
    ]
  }
]
</script>

<style lang="scss" scoped>
.sceneEdit-wrap {
  pointer-events: auto;

  .material-area {
    position: fixed;
    top: 100px;
    right: 20px;
    width: 330px;
    height: calc(100% - 130px);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.6);
    overflow: hidden;

    .setting-tabs {
      display: flex;
      width: 100%;
      height: 35px;
      margin-bottom: 5px;
      font-size: 20px;
      line-height: 35px;
      text-indent: 15px;
      font-family: YouSheBiaoTiHei;
      background: rgba(22, 161, 255, 1);
    }

    .operate-area {
      height: calc(100% - 90px);
      overflow-y: auto;
      padding: 0px 5px;
      box-sizing: border-box;

      .model-title {
        display: flex;
        align-items: center;
        text-indent: 8px;
        font-weight: 500;
        margin-bottom: 10px;

        span {
          width: 3px;
          height: 14px;
          background: rgba(22, 161, 255, 1);
        }
      }

      .model-item {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
        padding-left: 3px;
        margin-bottom: 10px;

        .son-item {
          position: relative;
          cursor: pointer;

          div {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 20px;
            background: rgba(0, 0, 0, 0.4);
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #fff;
          }

          img {
            display: block;
            max-width: 100%;
          }
        }
      }

      .model-item-btn {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 10px;
        padding-left: 5px;
        margin-bottom: 10px;

        button {
          width: 50px;
          margin-left: 0;
        }
      }
    }

    .operate {
      display: flex;
      justify-content: flex-end;
      position: absolute;
      left: 0;
      bottom: 8px;
      width: 100%;

      .el-button {
        width: 70px;
        margin: 0 7px 0 3px;
      }

    }
  }

  .edit-area {
    position: fixed;
    top: 450px;
    left: 20px;
    padding: 10px;
    width: 220px;
    height: 300px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    overflow-y: auto;
    z-index: 2;

    .head_title_arrow {
      font-family: YouSheBiaoTiHei;
      font-size: 16px;
    }

    .content {
      height: calc(100% - 25px);
      overflow-y: auto;
    }
  }

  .property-editing-area {
    position: fixed;
    top: 100px;
    left: 280px;
    padding: 10px;
    width: 260px;
    height: 300px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;

    .top-area {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .head_title_arrow {
        font-family: YouSheBiaoTiHei;
        font-size: 16px;
        margin-bottom: 5px;
      }
    }

  }
}

:deep(.el-form) {
  height: calc(100% - 50px);
  overflow-y: auto;

  .el-form-item--default {
    margin-bottom: 0;
  }

  .el-form-item {
    --el-form-label-font-size: 12px;
  }
}
</style>

致谢

期间收到了粉丝(肆云)的奶茶和KFC❣️，这真是太贴心了，非常感谢支持和鼓励！感谢你们的每一次点击、每一条留言，甚至每一份小小的礼物，都是我不断前行的动力！🍀

使用Cesium进行地图编辑和修改
MesRust的博客
09-24 307
Cesium是一个开源的地理信息系统（GIS）工具包，它提供了强大的功能来创建、编辑和修改地图。你可以根据自己的需求，添加更多的标记点、线段或其他地图元素，并通过修改实体的属性来实现地图的动态更新和交互。请记住，以上代码片段仅为示例，你可以根据自己的需求进行修改和扩展。上述代码中，'cesiumContainer’是一个HTML元素的ID，用于放置地图。通过修改实体的属性，我们可以实时更新地图上的标记点。通过修改实体的属性，我们可以实时更新地图上的线段。属性指定了线段的起点和终点，并设置了宽度和颜色。
cesium绘制编辑区域
梦寻汝的博客
05-29 1000
cesium绘制区域、编辑区域、显示面积，区域化展示
多边形自定义编辑工具CesiumEditPolygon
Zk的博客
12-13 3137
EditPolygon工具实现功能如上图。图1为初始状态。图2，图3为编辑状态。图4为数据保存状态。
[cesium] | 示例代码编辑器（2）
啊嘞嘞的博客
06-02 897
Web3D | 示例代码编辑器 （3）
Cesium材质节点编辑器V0.1
u011454763的博客
09-09 339
Cesium材质节点编辑器V0.1。
cesium-drawhelper：Cesium 的早期阶段图形编辑器
gitblog_00717的博客
04-02 785
cesium-drawhelper：Cesium 的早期阶段图形编辑器 cesium-drawhelper 是一款针对 Cesium 的非常早期的图形编辑器，目前仅支持 2D 和简单形状的编辑。下面我们来详细了解这个项目的核心功能、技术特点和应用场景。 项目介绍 cesium-drawhelper 是一个开源项目，为 Cesium 提供了一个简单易用的图形编辑功能。用户可以通过简单的 API 调用...
Cesium 场景设置（夜视效果，黑白效果，雨雾雪天气）
07-11
Cesium 场景设置（夜视效果，黑白效果，雨雾雪天气） 参考链接：https://blog.youkuaiyun.com/qq_35984445/article/details/125743739 天际线已公布 资源链接：https://download.youkuaiyun.com/download/qq_35984445/86744804
Cesium 空间测量+面积测量+贴地测量
04-18
开发者可以通过Cesium的`Scene`对象和`Primitive`类来实现自定义的测量工具。 三、面积测量 面积测量是Cesium的一个重要特性，它允许用户计算二维几何形状的面积，如矩形、多边形或不规则形状。Cesium提供了`...
vue3.x中使用cesium，vue3.x+Cesium
05-04
执行`vue create my-vue3-cesium-project`命令，然后选择自定义配置，这将允许你手动调整项目结构和配置。 2. **Webpack配置**: Cesium是一个大型库，包含大量的静态资源，因此需要对webpack配置进行调整。你需要...
3D-基于Cesium+Potree实现在线点云查看+处理工具-优质项目
10-15
例如，可以在Cesium构建的三维地球模型中嵌入Potree提供的点云数据查看器，实现跨平台的数据共享与协作。同时，用户可以通过简单的操作直观地对点云进行观察、测量和标记，从而提升工作效率。 在实现在线点云查看和...
cesium流动箭头效果/cesium+vue流动箭头效果完整代码
06-13
为了在Vue.js中实现这一效果，可以将Cesium Viewer定义为Vue组件，并在Vue实例中声明数据属性，这些属性与Cesium的Entity相关联。通过Vue的响应式特性，当数据变化时，Cesium实体的属性会自动更新，从而实现动态的...
Web端免费开源三维场景编辑器Shadow Editor v0.0.7
10-10
名称：Shadow Editor 版本：v0.0.7（开发中） 说明：基于three.js的免费开源场景编辑器。 源码：https://github.com/tengge1/ShadowEditor 功能： 1. 3D场景在线编辑。 2. 内置多种几何体、光源，场景支持雾效、影子、反光、背景图片等。 3. 支持导入多种不同格式的3D模型。 4. 服务端使用MongoDB保存模型和场景数据。 5. 可视化修改场景、相机、几何体、材质、音频播放器、粒子发射器等属性。 6. js脚本、着色器脚本在线编辑，带智能提示。 7. 自带播放器，实时演示场景动态效果。 8. 支持补间动画、骨骼动画、粒子动画，支持mmd动画，支持lmesh动画。
cesium+HTML5+3D地图展示
08-27
cesium+HTML5+3D地图展示
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
该模板提供了一个简单的示例，展示了如何在Vue3应用程序中使用Cesium.js API创建一个基本的地球场景，并实现了一些基本的交互功能。除此之外，该模板还提供了一些常用的依赖和插件，如axios、element-plus、vuex等，...
开源！在goview中实现cesium的低代码可视化编辑
06-20 2545
前阵子写了一篇goview二开的文章教程，很多小伙伴留言对goview嵌套cesium并实现cesium的低代码可视化编辑很感兴趣，今天我就来将我的实现和思路分享给大家，希望能够对大家有帮助。理解了GoView低代码平台（可视化大屏）的开发原理，基于它进行了二开，因为二开需要对goview的整个框架有一个基础的了解才可。goview嵌套cesium。
Cesium功能集之地图标绘与编辑
HwfOcaml的博客
10-10 347
借助Cesium库，开发者可以轻松地在地图上进行标绘和编辑操作，包括标记点、绘制线和多边形，以及移动、删除和添加标记等功能。Cesium是一个开源的地理信息系统（GIS）工具包，提供了丰富的功能和工具，用于创建交互式的地图应用程序。地图标绘是在地图上绘制或标记特定位置或区域的过程，而地图编辑则允许用户对已标绘的对象进行修改、删除或添加新的标记。上述代码中，我们首先移动了一个标记点的位置，然后删除了该标记点，并最后添加了一个新的标记点。首先，我们需要创建一个Cesium地图实例，并将其显示在页面上。
cesium学习记录06-视图、场景与相机
木卯彳亍的博客
08-10 2550
Cesium中的orientation属性用于设定各种对象的方向，不仅仅是相机的方向，还包括其他实体如模型的方向。想象自己在驾驶这架飞机，那么飞机的前进方向和你的视线方向在概念上是相似的，那么你的眼就相当于相机。8，将地球或场景缩放到该实体的视图范围内(viewer.zoomTo()): 调整相机的位置和朝向，以最佳地查看某个特定的实体或对象。7，用于将相机视角锁定到目标位置(lookAt): 设置相机的位置和朝向，以使其始终面向某个特定的点或对象。1，飞行(fly): 使相机飞向某个指定的位置。
【UE Cesium】01-在虚幻5中使用Cesium
ChaoChao66666的博客
06-27 3697
【UE Cesium】01-在虚幻5中使用Cesium
微观低代码
最新发布
u013980160的博客
07-25 270
下午演示，如何使用低代码搭建一个业务场景，客户没有反馈，最后结束的时候，问了一些场景的问题。整整一天，讲了二开功能，就是如何在本地开发代码，如何搭建环境。可以看出，此客户正处于数字化转型的起步阶段，如果没有合适的人和懂技术的人，数字化是比较难转的。工厂规模比较大，是个国际公司，全球都有分厂，但是技术比较落后，不过在20年前能实现无纸化，也是比较先进了。客户目前想实现的主要功能是，对接OA的单点登录，把ERP的功能迁移到低代码平台上来。客户使用了20年的ERP和OA系统，目前想对接到低代码平台。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柳晓黑胡椒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值