vue+cesium量算---测距测面测高

最新推荐文章于 2024-03-15 10:34:59 发布

~HT猫L~

最新推荐文章于 2024-03-15 10:34:59 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/weixin_44614518/article/details/126230557

版权

本文介绍如何在Vue.js项目中结合Cesium实现测距、测面和测高的功能。示例代码已提供，并说明与超图官网量算示例的不同，省去了顶点捕捉功能。

摘要由CSDN通过智能技术生成

使用的是超图的cesium

先上代码，代码里面都有注释

和超图官网的量算例子有一丢丢不一样，这里没有顶点捕捉(因为我不知道是啥玩意，所以去掉了)；只有空间量算和贴地量算。剩下三种我也不知道是啥就不写。如有bug望各位大佬指正。

<template>
  <div class="container">
    <secen-view @already="already"></secen-view>
    <div id="toolbar" class="tool-bar">
      <div>
        <Select
          v-model="selOpt"
          style="width: 200px"
          @on-change="handlerOptionChange"
        >
          <Option
            v-for="item in optionList"
            :value="item.value"
            :key="item.value"
            >{
  { item.label }}</Option
          >
        </Select>
      </div>
      <div class="loaction">
        <button id="flytoMountain" class="button" @click="flytoMountain">
          定位至山区
        </button>
      </div>
      <button
        type="button"
        id="distance"
        class="button"
        @click="handlerMeasure('distance')"
      >
        测距
      </button>
      <button
        type="button"
        id="area"
        class="button"
        @click="handlerMeasure('area')"
      >
        测面
      </button>
      <button
        type="button"
        id="height"
        class="button"
        @click="handlerMeasure('height')"
      >
        测高
      </button>
      <button type="button" id="clear" class="button" @click="handlerClear">
        清除
      </button>

      <div class="isoheight">
        <Checkbox v-model="isShowLine" @on-change="handlerIoslineChange"
          >等高线</Checkbox
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Measure",
  data() {
    return {
      viewer: "",
      optionList: [
        {
          value: "空间量算",
          label: "空间量算",
        },
        {