<template>
  <div class="wrapper">
    <div class="wrapper-left wrapper-item">
      <el-input placeholder="请输入内容" class="input-search">
        <el-button
          slot="append"
          icon="el-icon-search"
          type="primary"
        ></el-button>
      </el-input>
      <div class="left-box">
        <div
          v-for="item in houseList"
          class="left-box-item"
          @click="moveToBuilding(item)"
        >
          <div style="font-size: 16px">{{ item.ower }}</div>
          <div>房屋编号：{{ item.buildingno }}</div>
          <div>身份证号：{{ item.oweridcar }}</div>
          <!-- <div class=""></div> -->
          <i class="el-icon-arrow-right more-icon"></i>
        </div>
      </div>
    </div>
    <div
      class="wrapper-right wrapper-item"
      v-if="Object.keys(modelPropertys).length"
    >
      <div class="right-box">
        <div class="right-title">摸底数据</div>
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
          class="right-tabs"
        >
          <el-tab-pane label="人口信息" name="first">人口信息</el-tab-pane>
          <el-tab-pane label="房屋信息" name="house">
            <el-button class="add-house" icon="el-icon-plus" type="primary"
              >添加房屋信息</el-button
            >
            <div class="floor">
              <div class="floor-value">一楼</div>
              <div>所在楼层</div>
              <div class="floor-more-btn">
                更多

                <i class="el-icon-arrow-down"></i>
              </div>
            </div>
            <div class="floor-info">
              <div class="info-top">
                <el-row>
                  <el-col :span="6">
                    <div class="area-box">
                      <div class="area-value">{{ modelPropertys.length }}</div>
                      <div>长（米）</div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="area-box">
                      <div class="area-value">{{ modelPropertys.width }}</div>
                      <div>宽（米）</div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="area-box">
                      <div class="area-value">
                        {{ modelPropertys.minheight }}
                      </div>
                      <div>高（米）</div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="area-box">
                      <div class="area-value">{{ modelPropertys.barea }}</div>
                      <div>面积（米）</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="info-bottom">
                <p>
                  <span>房屋结构</span>
                  <span class="info-bottom-value">{{
                    modelPropertys.struct
                  }}</span>
                </p>
                <p>
                  <span>等级</span>
                  <span class="info-bottom-value">{{
                    modelPropertys.struct
                  }}</span>
                </p>
                <p>
                  <span>补偿标准</span>
                  <span class="info-bottom-value">{{
                    modelPropertys.paylevel
                  }}</span>
                </p>
                <p>
                  <span>总楼层</span>
                  <span class="info-bottom-value">{{
                    modelPropertys.level
                  }}</span>
                </p>
                <p>
                  <span>单位</span>
                  <span class="info-bottom-value">{{
                    modelPropertys.level
                  }}</span>
                </p>
                <p>
                  <span>单价</span>
                  <span class="info-bottom-value">{{
                    modelPropertys.level
                  }}</span>
                </p>
                <p>
                  <span>金额</span>
                  <span class="info-bottom-value">{{
                    modelPropertys.price
                  }}</span>
                </p>
                <p>
                  <span>备注</span>
                  <span class="info-bottom-value">{{
                    modelPropertys.remark
                  }}</span>
                </p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="附属物信息" name="second"> </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div id="cesiumContainer" ref="cesiumContainer">
      <!-- <c-pointer></c-pointer> -->
      <!-- 信息框 -->
      <div class="title-box" ref="title_box" :style="titlePosition">
        {{ modelPropertys.ower }}（{{ modelPropertys.oweridcar }}）
      </div>
      <slot v-if="map"></slot>
    </div>
  </div>
</template>

<script>
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
window.Cesium = Cesium;
window.CESIUM_BASE_URL = "/static/Cesium/";
import { CesiumZh } from "utils/cesium/CesiumZh.js";
import $ from "jquery";
import { default as proj4 } from "proj4";
export default {
  name: "LhMap3d",
  props: {
    // 初始化缩放层级
    /* zoom: {
        type: Number,
        default: 10,
      }, */
    // 初始化中心经纬度
    /* center: {
        type: Array,
        default () {
          return [110.2313, 22.6639, 500];
        },
      } */
  },
  data() {
    return {
      map: null,
      isMap: true,
      isOlMap: false,
      // 选中的模型 颜色
      silhouetteGreen: null,
      activeName: "house",
      modelPropertys: {
        // barea: 240,
        // buildingno: "562",
        // height: 9,
        // id: "0",
        // length: 20,
        // level: 2,
        // maxheight: 0,
        // minheight: 80,
        // name: "广西省玉林市茂林镇金谷街道112号",
        // ower: "王思思",
        // oweridcar: "450900191244619654",
        // paylevel: 5000,
        // price: 5000,
        // remark: "业主已经确权",
        // struct: "木屋结构",
        // totalprice: 0,
        // width: 12,
      },
      // 弹框位置
      titlePosition: {},
      houseList: [],
      // houseList: [
      //   {
      //     name: "张图昂",
      //     x: 110.23, //347
      //     y: 22.67, //536
      //   },  {
      //     name: "张伟",
      //     x: 347, //347
      //     y: 357, //536
      //   },{

      //   }
      // ],
      // houseList: [{"barea":128,"buildingno":"706","height":9,"id":"0","length":16,"level":3,"maxheight":97,"minheight":88,"name":"广西省玉林市茂林镇金谷街道141号","ower":"汗小妹","oweridcar":"450900196468301455","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":640000,"width":8},{"barea":80,"buildingno":"534","height":9,"id":"0","length":10,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道106号","ower":"张永","oweridcar":"450900196092370954","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"580","height":9,"id":"0","length":10,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道115号","ower":"李丽","oweridcar":"450900190310223734","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":400000,"width":8},{"barea":60,"buildingno":"290","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道57号","ower":"曾一","oweridcar":"450900198702736412","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":300000,"width":6},{"barea":80,"buildingno":"302","height":9,"id":"0","length":10,"level":1,"maxheight":97,"minheight":88,"name":"广西省玉林市茂林镇金谷街道60号","ower":"曾琦","oweridcar":"450900194601746834","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":80,"buildingno":"775","height":9,"id":"0","length":10,"level":3,"maxheight":97,"minheight":88,"name":"广西省玉林市茂林镇金谷街道154号","ower":"张伟","oweridcar":"450900192577279732","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"15","height":9,"id":"0","length":10,"level":1,"maxheight":93,"minheight":84,"name":"广西省玉林市茂林镇金谷街道2号","ower":"增奇艺","oweridcar":"450900197772891054","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":600,"buildingno":"761","height":9,"id":"0","length":30,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道152号","ower":"张烈利","oweridcar":"450900192611753357","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":3000000,"width":20},{"barea":80,"buildingno":"815","height":9,"id":"0","length":10,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道162号","ower":"张利齐","oweridcar":"450900190880575634","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":400000,"width":8},{"barea":96,"buildingno":"710","height":9,"id":"1","length":16,"level":3,"maxheight":97,"minheight":88,"name":"广西省玉林市茂林镇金谷街道141号","ower":"发文","oweridcar":"450900190098456346","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":480000,"width":6},{"barea":20,"buildingno":"46","height":9,"id":"0","length":5,"level":1,"maxheight":96,"minheight":87,"name":"广西省玉林市茂林镇金谷街道9号","ower":"张额钱","oweridcar":"450900192332797963","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":100000,"width":4},{"barea":128,"buildingno":"415","height":9,"id":"0","length":16,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道82号","ower":"张华","oweridcar":"450900193214646571","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":640000,"width":8},{"barea":144,"buildingno":"791","height":9,"id":"0","length":18,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道158号","ower":"张璋","oweridcar":"450900191172457435","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":720000,"width":8},{"barea":80,"buildingno":"374","height":9,"id":"0","length":10,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道74号","ower":"张丽丽","oweridcar":"450900198291028908","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":400000,"width":8},{"barea":320,"buildingno":"962","height":9,"id":"0","length":40,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道192号","ower":"刘浩","oweridcar":"450900198571297676","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":1600000,"width":8},{"barea":80,"buildingno":"872","height":9,"id":"0","length":10,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道174号","ower":"刘杰","oweridcar":"450900195610242245","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":400000,"width":8},{"barea":96,"buildingno":"57","height":9,"id":"0","length":16,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道11号","ower":"张帅","oweridcar":"450900194851950256","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":480000,"width":6},{"barea":80,"buildingno":"950","height":9,"id":"0","length":10,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道189号","ower":"唐福","oweridcar":"450900194441126923","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":400000,"width":8},{"barea":192,"buildingno":"365","height":9,"id":"0","length":16,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道72号","ower":"张华齐","oweridcar":"450900190211139043","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":960000,"width":12},{"barea":80,"buildingno":"525","height":9,"id":"0","length":10,"level":2,"maxheight":93,"minheight":84,"name":"广西省玉林市茂林镇金谷街道104号","ower":"张图昂","oweridcar":"450900193411325753","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":400000,"width":8},{"barea":112,"buildingno":"768","height":9,"id":"0","length":14,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道153号","ower":"川崎","oweridcar":"450900191172412423","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":560000,"width":8},{"barea":80,"buildingno":"54","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道10号","ower":"李立群","oweridcar":"450900194312245989","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":320,"buildingno":"593","height":9,"id":"0","length":20,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道118号","ower":"张琪","oweridcar":"450900196590210557","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":1600000,"width":16},{"barea":224,"buildingno":"469","height":9,"id":"0","length":16,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道93号","ower":"王超","oweridcar":"450900190033053456","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":1120000,"width":14},{"barea":160,"buildingno":"299","height":9,"id":"0","length":16,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道59号","ower":"李帅帅","oweridcar":"450900194562381125","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":800000,"width":10},{"barea":144,"buildingno":"623","height":9,"id":"0","length":16,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道124号","ower":"王勇","oweridcar":"450900191651014953","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":720000,"width":9},{"barea":64,"buildingno":"648","height":9,"id":"0","length":16,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道129号","ower":"王利","oweridcar":"450900196862757543","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":320000,"width":4},{"barea":80,"buildingno":"264","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道52号","ower":"张武","oweridcar":"450900193456329456","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":80,"buildingno":"280","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道55号","ower":"张思","oweridcar":"450900190522697423","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":120,"buildingno":"825","height":9,"id":"0","length":12,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道164号","ower":"李力气","oweridcar":"450900196210322345","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":600000,"width":10},{"barea":64,"buildingno":"590","height":9,"id":"0","length":8,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道117号","ower":"张琪华","oweridcar":"450900197221325456","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":320000,"width":8},{"barea":320,"buildingno":"987","height":9,"id":"0","length":40,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道197号","ower":"李达","oweridcar":"450900193055864785","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":1600000,"width":8},{"barea":640,"buildingno":"911","height":9,"id":"0","length":40,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道182号","ower":"李琴琴","oweridcar":"450900195611954254","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":3200000,"width":16},{"barea":320,"buildingno":"227","height":9,"id":"0","length":40,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道45号","ower":"张鹏","oweridcar":"450900190542711487","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":1600000,"width":8},{"barea":560,"buildingno":"696","height":9,"id":"0","length":40,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道139号","ower":"张思琪","oweridcar":"450900198544479435","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":2800000,"width":14},{"barea":96,"buildingno":"981","height":9,"id":"0","length":12,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道196号","ower":"张利器","oweridcar":"450900191810345644","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":480000,"width":8},{"barea":108,"buildingno":"244","height":9,"id":"0","length":12,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道48号","ower":"赵鹏","oweridcar":"450900194861184756","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":540000,"width":9},{"barea":1200,"buildingno":"534","height":9,"id":"0","length":40,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道106号","ower":"张琪利","oweridcar":"450900197682833987","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":6000000,"width":30},{"barea":80,"buildingno":"107","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道21号","ower":"欧阳李","oweridcar":"450900194385422689","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":64,"buildingno":"1000","height":9,"id":"0","length":8,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道199号","ower":"高崎","oweridcar":"450900194761250965","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":320000,"width":8},{"barea":40,"buildingno":"677","height":9,"id":"0","length":10,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道135号","ower":"高力强","oweridcar":"450900192551988667","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":200000,"width":4},{"barea":80,"buildingno":"576","height":9,"id":"0","length":10,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道115号","ower":"张琪图","oweridcar":"450900192542547823","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"104","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道20号","ower":"贺丽丽","oweridcar":"450900191722765534","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":80,"buildingno":"799","height":9,"id":"0","length":10,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道159号","ower":"高维","oweridcar":"450900190741311923","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":400000,"width":8},{"barea":40,"buildingno":"285","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道56号","ower":"张四思","oweridcar":"450900191102053363","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":200000,"width":4},{"barea":80,"buildingno":"46","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道9号","ower":"李劳逸","oweridcar":"450900195152175265","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":80,"buildingno":"296","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道59号","ower":"李青峰","oweridcar":"450900193882634674","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":135,"buildingno":"383","height":9,"id":"0","length":15,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道76号","ower":"张琪英","oweridcar":"450900196051127532","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":675000,"width":9},{"barea":80,"buildingno":"301","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道60号","ower":"李子龙","oweridcar":"450900198781273465","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":80,"buildingno":"949","height":9,"id":"0","length":10,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道189号","ower":"藏力强","oweridcar":"450900192352712134","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"402","height":9,"id":"0","length":10,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道80号","ower":"张琪永","oweridcar":"450900193861497243","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"161","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道32号","ower":"赵信","oweridcar":"450900191411169092","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":80,"buildingno":"647","height":9,"id":"0","length":10,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道129号","ower":"张琪贺","oweridcar":"450900196416326543","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"411","height":9,"id":"0","length":10,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道82号","ower":"唐一","oweridcar":"450900197062180065","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"413","height":9,"id":"0","length":10,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道82号","ower":"唐汗","oweridcar":"450900192891990554","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"713","height":9,"id":"0","length":10,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道142号","ower":"张富强","oweridcar":"450900197312779734","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"327","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道65号","ower":"赵刘柳","oweridcar":"450900196304164895","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":80,"buildingno":"634","height":9,"id":"0","length":10,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道126号","ower":"王利齐","oweridcar":"450900194318643543","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"208","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道41号","ower":"赵帆","oweridcar":"450900197422637234","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":80,"buildingno":"906","height":9,"id":"0","length":10,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道181号","ower":"李解放","oweridcar":"450900196732040434","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"262","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道52号","ower":"张武文","oweridcar":"450900197652410564","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":80,"buildingno":"379","height":9,"id":"0","length":10,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道75号","ower":"刘利","oweridcar":"450900195822711454","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"290","height":9,"id":"0","length":10,"level":1,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道57号","ower":"张武红","oweridcar":"450900198572657423","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"水泥红砖","totalprice":400000,"width":8},{"barea":80,"buildingno":"920","height":9,"id":"0","length":10,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道183号","ower":"刘莎齐","oweridcar":"450900192701275977","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"632","height":9,"id":"0","length":10,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道126号","ower":"张超","oweridcar":"450900192341527056","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":400000,"width":8},{"barea":80,"buildingno":"628","height":9,"id":"0","length":10,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道125号","ower":"张璋汗","oweridcar":"450900195102511153","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":400000,"width":8},{"barea":60,"buildingno":"429","height":9,"id":"0","length":12,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道85号","ower":"张茂","oweridcar":"450900195822784654","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":300000,"width":5},{"barea":240,"buildingno":"562","height":9,"id":"0","length":20,"level":2,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道112号","ower":"王思思","oweridcar":"450900191244619654","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"木屋结构","totalprice":1200000,"width":12},{"barea":80,"buildingno":"695","height":9,"id":"0","length":10,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道138号","ower":"刘芳","oweridcar":"450900190181418355","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":400000,"width":8},{"barea":50,"buildingno":"917","height":9,"id":"0","length":10,"level":3,"maxheight":89,"minheight":80,"name":"广西省玉林市茂林镇金谷街道183号","ower":"李杰","oweridcar":"450900190792233254","paylevel":5000,"price":5000,"remark":"业主已经确权","struct":"其他结构","totalprice":250000,"width":5}],
      allBuildingModels: [],
      old3DTile: null,
    };
  },
  provide() {
    return {
      coordType: null,
      bounds: null,
    };
  },

  beforeDestroy() {},
  methods: {
    init() {
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "./static/CesiumRenderPatch.js";
      document.getElementsByTagName("head")[0].appendChild(script);

      // this.$store.commit("setIsOlMap", false);

      // Cesium.Ion.defaultAccessToken =
      //   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZmY4NjlmZS1iM2IwLTRlNWUtOWU5Yy0yMDM2MGRlZjZkZGMiLCJpZCI6Mzc2MzEsImlhdCI6MTYwNjY1MzcyMX0.cNGtGAI3APmDMaFsudpOwkBGXZcpoXgf8mgA9Fdq4jE";
      // Cesium.Ion.defaultAccessToken =
      //   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiY2RhMDMyYi1mODVkLTRkODAtYmI4MS0zZTY0OTM3OGExZWEiLCJpZCI6MjU5LCJpYXQiOjE2MTQ1OTIwNDZ9.0jO0HJaY0N1DrvfxPuuoDPWN_ebN2o2Ku2DrRC_P8qs";
      console.log(this.viewerOptions, "参数");
      this.map = new Cesium.Viewer(this.$refs.cesiumContainer, {
        terrainProvider: Cesium.createWorldTerrain(),
        proxy: new Cesium.DefaultProxy("/proxy/"), //cesium的跨域
        // ...this.viewerOptions,
        CreditsDisplay: false, //展示数据版权属性
        animation: false, //左下角仪表
        fullscreenButton: false, //全屏按钮
        timeline: false,
        baseLayerPicker: true,
        infoBox: true,
        //  imageryProvider: imgMap,
        animation: false, //左下角仪表
        fullscreenButton: false, //全屏按钮
        geocoder: true, //右上角查询搜索
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        homeButton: false, //home按钮
        sceneModePicker: false, //3d 2d选择器
        selectionIndicator: false, //
        timeline: false, //时间轴
        navigationHelpButton: false, //右上角帮助按钮
      });
    },

    addBuildingLayers() {
      var buildingTilesetModel = new Cesium.Cesium3DTileset({
        url: "cesium/building/tileset.json",
      });
      buildingTilesetModel.style = new Cesium.Cesium3DTileStyle({
        color: "color('rgba(255,255,255,0.01)')",
      });
      let buildingTileset = this.map.scene.primitives.add(buildingTilesetModel);
      buildingTileset.readyPromise
        .then((currentModel) => {
          console.log(currentModel, "建筑物模型加载成功");
          console.log(currentModel.entities);
        })
        .otherwise((error) => {
          console.log(error, "建筑物模型加载错误");
        });
      //监听建筑物的显示得到 模型列表
      buildingTileset.tileVisible.addEventListener((tile) => {
        var features = tile.content._features;
        if (!this.allBuildingModels.length) {
          this.allBuildingModels = features;
          var propertyNames = features[0].getPropertyNames();
          var arr = [];
          if (propertyNames.length > 5) {
            // for (let j = 0; j < features.length; j++) {
            for (let j = 0; j < 10; j++) {
              let item = {};
              for (var i = 0; i < propertyNames.length; ++i) {
                var propertyName = propertyNames[i];
                let value = features[j].getProperty(propertyName);
                item[propertyName] = value;
              }
              arr.push(item);
            }
          }

          this.houseList = arr;
        }
        // console.log(JSON.stringify(this.houseList));
      });
      // 添加信息框
      this.map.container.appendChild(this.$refs.title_box);
    },
    /**设置剪影 */
    addSilhousete() {
      if (
        Cesium.PostProcessStageLibrary.isSilhouetteSupported(this.map.scene)
      ) {
        this.silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
        this.silhouetteGreen.uniforms.color = Cesium.Color.LIME;
        this.silhouetteGreen.uniforms.length = 0.01;
        this.silhouetteGreen.selected = [];

        this.map.scene.postProcessStages.add(
          Cesium.PostProcessStageLibrary.createSilhouetteStage([
            this.silhouetteGreen,
          ])
        );
        console.log(this.silhouetteGreen);
      }
    },
    /**
     * 加载倾斜摄影模型
     */
    addTilesetLayers() {
      console.log("开始加载模型......");
      var tilesetModel = new Cesium.Cesium3DTileset({
        url: "cesium/csbuilding/tileset.json",
        //maximumScreenSpaceError: 2, //最大的屏幕空间误差
        //maximumNumberOfLoadedTiles: 1000,//最大加载瓦片个数
      });
      // 由于生成3dtiles文件时使用的底图和地形和cesium加载的可能不同，再加上人工调整模型位置具有一定的偏差，所以3dtiles模型加载到数字地球上之后，可能需要再次调整位置，所以最好有前端调整工具去进行模型位置的调整
      let tileset = this.map.scene.primitives.add(tilesetModel);
      tileset.readyPromise
        .then((currentModel) => {
          console.log(currentModel, "加载模型成功");
          var boundingSphere = tileset.boundingSphere;
          // 设置相机，使当前视图包含提供的边界球。
          // this.map.camera.viewBoundingSphere(
          //   boundingSphere,
          //   new Cesium.HeadingPitchRange(0.5, -0.2, boundingSphere.radius * 1.5) //定义航向角，俯仰角和范围
          // );
          this.map.zoomTo(currentModel);
          return;
        })
        .otherwise((error) => {
          console.log(error, "模型加载错误");
        });
    },
    addModelClick() {
      this.map.screenSpaceEventHandler.setInputAction((movement) => {
        var pickedFeature = this.map.scene.pick(movement.position);
        console.log(pickedFeature);
        if (typeof pickedFeature != "undefined") {
          //获取模型的所有数据

          //模型上的所有数据
          var propertyNames = pickedFeature.getPropertyNames();
          if (propertyNames.length > 5) {
            if (this.old3DTile) {
              this.old3DTile.color = new Cesium.Color(255, 255, 255, 0.01);
            }
            for (var i = 0; i < propertyNames.length; ++i) {
              var propertyName = propertyNames[i];
              let value = pickedFeature.getProperty(propertyName);
              this.$set(this.modelPropertys, propertyName, value);
            }
            //设置高亮背景色
            pickedFeature.color = new Cesium.Color(1, 0, 0, 0.4);
            this.old3DTile = pickedFeature;
            // this.silhouetteGreen.selected = [pickedFeature];
            this.titlePosition = {
              bottom: this.map.canvas.clientHeight - movement.position.y + "px",
              left: movement.position.x + "px",
            };
          }
          // this.map.selectedEntity = selectedEntity;
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    /**
     * 调整模型参数
     */
    update3dtilesMaxtrix(params) {
      var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
      var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
      var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
      var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
      var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
      var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
      //平移 修改经纬度
      var position = Cesium.Cartesian3.fromDegrees(
        params.longitude,
        params.latitude,
        params.height
      );
      var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
      //旋转、平移矩阵相乘
      Cesium.Matrix4.multiply(m, rotationX, m);
      Cesium.Matrix4.multiply(m, rotationY, m);
      Cesium.Matrix4.multiply(m, rotationZ, m);
      //缩放 修改缩放比例
      var scale = Cesium.Matrix4.fromUniformScale(params.scale);
      Cesium.Matrix4.multiply(m, scale, m);
      //赋值给tileset
      window.tileModel._root.transform = m;
      //调整地下透明度
      viewer.scene.globe.translucency.frontFaceAlphaByDistance.nearValue = Cesium.Math.clamp(
        params.alpha,
        0.0,
        1.0
      );
    },
    /**
     * tabs栏切换
     */
    handleClick() {},
    /**
     * 点击左边栏定位相机飞行
     */
    moveToBuilding(house) {
      this.allBuildingModels.forEach((feature) => {
        if (feature.getProperty("buildingno") == house.buildingno) {
          if (this.old3DTile) {
            this.old3DTile.color = new Cesium.Color(255, 255, 255, 0.01);
          }
          // feature.color = new Cesium.Color(1, 0, 0, 1);
          feature.color = new Cesium.Color(1, 0, 0, 1);
          this.old3DTile = feature;
          var boundingSphere = feature.content.tile.boundingSphere;
          // console.log(boundingSphere);
          //           // 设置相机，使当前视图包含提供的边界球。
          // this.map.camera.viewBoundingSphere(
          //   boundingSphere,
          //   new Cesium.HeadingPitchRange(0.5, -0.2, 0.5) //定义航向角，俯仰角和范围
          // );
        }
      });
    },
    addGerserveJosn() {
      $.ajax({
        url:
          "http://116.63.144.253:8080/geoserver/yyserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=yyserver%3Abuilding&bbox=110.22832241863154%2C22.660712079335326%2C110.2327505174294%2C22.667708170586195&width=486&height=768&srs=EPSG%3A4326&styles=&format=application/openlayers",
        cache: false,
        async: true,
        success: (data) => {
          var dataPromise = Cesium.GeoJsonDataSource.load(data);
          console.log(dataPromise);
          dataPromise.then((dataSource) => {
            this.map.dataSources.add(dataSource); //加载服务数据
            console.log(dataSource, "dataSource");
            this.map.camera.flyTo(dataSource);
          });
        },
        error: function (data) {
          console.log("error");
        },
      });
    },
    /**转换坐标 
   * 预期行为和实际行为。
使用GeoJSON驱动程序和GDAL 3.0.2，在写入EPSG:4326文件时，它会写入urn:ogc:def:crs:OGC::CRS84并返回urn:ogc:def:crs:OGC::CRS84。但是，当您写入urn:ogc:def:crs:OGC::CRS84文件时，它不会写入CRS并返回EPSG:4326。

如果有一致性，那么CRS的双向写入/读取会保留原始CRS，那将是很好的。但是，如果有这种行为的原因，那也很好知道。谢谢！

重现此问题的步骤。
编写EPSG：4326：
  */
    tranformProject() {
      Cesium.GeoJsonDataSource.crsNames[
        "urn:ogc:def:crs:EPSG::26918"
      ] = Cesium.GeoJsonDataSource.crsNames["EPSG:26918"] = function (
        coordinates
      ) {
        const fromProjection = `PROJCS["NAD83 / UTM zone 18N", GEOGCS["NAD83", DATUM["North American Datum 1983",SPHEROID["GRS 1980", 6378137.0, 298.257222101, AUTHORITY["EPSG","7019"]], 
        TOWGS84[0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],AUTHORITY["EPSG","6269"]],PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]],UNIT["degree", 0.017453292519943295], 
        AXIS["Geodetic longitude", EAST],AXIS["Geodetic latitude", NORTH],AUTHORITY["EPSG","4269"]], 
        PROJECTION["Transverse_Mercator", AUTHORITY["EPSG","9807"]], 
        PARAMETER["central_meridian", -75.0],PARAMETER["latitude_of_origin", 0.0], 
        PARAMETER["scale_factor", 0.9996],PARAMETER["false_easting", 500000.0],PARAMETER["false_northing", 0.0],UNIT["m", 1.0], 
        AXIS["Easting", EAST],AXIS["Northing", NORTH],AUTHORITY["EPSG","26918"]]`;
        const toProjection = `GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563,AUTHORITY["EPSG","7030"]],
        AUTHORITY["EPSG", "6326"]], PRIMEM["Greenwich", 0, AUTHORITY["EPSG", "8901"]],
        UNIT["degree", 0.0174532925199433, AUTHORITY["EPSG", "9122"]], AUTHORITY["EPSG", "4326"]]`;

        const x = coordinates[0];
        const y = coordinates[1];

        const newCoordinates = proj4(fromProjection, toProjection, [x, y]);
        return Cesium.Cartesian3.fromDegrees(
          newCoordinates[0],
          newCoordinates[1],
          0
        );
      };
    },
  },
  mounted() {
    this.init();
    //添加建筑物倾斜摄影
    this.addBuildingLayers();
    // //加载倾斜摄影模型
    this.addTilesetLayers();
    /**cesium转换 */
    // this.tranformProject();
    //加载geoserve 数据
    // this.addGerserveJosn();
    //监听点击事件
    this.addModelClick();
    //汉化
    CesiumZh.load();
  },
};
</script>

<style lang='scss' scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  background-color: rgba(125, 124, 129, 1);

  /deep/.cesium-viewer-bottom {
    display: none;
  }
}
.wrapper {
  height: 100%;
  width: 100%;
  background-color: #0b0f34;
  position: relative;
  .wrapper-item {
    width: 320px;
    height: calc(100% - 80px);
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
  }
  .wrapper-left {
    margin-left: 10px;
    // pointer-events: none;
    .input-search {
      background: rgba(33, 224, 81, 0.2);
      margin-bottom: 20px;
      input {
        background: transparent;
      }
      /deep/.el-input-group__append {
        background-color: blue;
        color: #fff;
      }
    }
    .left-box {
      width: 240px;
      height: calc(100% - 100px);
      padding: 10px;
      color: #fff;
      overflow: auto;
      // background: rgba(11, 15, 12, 0.2) url("../../../sources/images/4.png")
      //   no-repeat 100% 100%;
      background-color: rgba(0, 18, 42, 0.8);
      // background-image: url("../../../sources/images/4.png");
      // background-repeat: no-repeat;
      // background-size: 100% 100%;
      .left-box-item {
        border-bottom: 1px solid #524d4d;
        padding: 10px;
        box-sizing: border-box;
        border-left: 2px solid transparent;
        position: relative;
        &:hover {
          // background:linear-gradient(90deg, rgba(191, 136, 34, 0.8) 0%, rgba(6, 0, 87, 0.8) 100%);
          cursor: pointer;
          border-left-color: #eea110;
          background: linear-gradient(
            to right,
            rgba(191, 136, 34, 0.6),
            rgba(191, 136, 34, 0)
          );
        }
        .more-icon {
          border-radius: 50%;
          border: 1px solid rgba(191, 136, 34, 0.6);
          padding: 5px;
          position: absolute;
          right: 0;
          top: calc(50% - 13px);

          color: rgba(191, 136, 34, 0.6);
        }
      }
    }
  }
  .wrapper-right {
    right: 10px;
    background-color: rgba(0, 18, 42, 0.8);
    .right-box {
      color: #fff;
      .right-title {
        background-color: rgba(255, 138, 0, 0.2);
        font-weight: bolder;
        height: 26px;
        line-height: 26px;
        padding: 10px;
        font-size: 20px;
      }
      .right-tabs {
        margin: 10px;
        /deep/ {
          .el-tabs__nav {
            border: none;
          }
          .el-tabs__item {
            color: #fff;
            padding: 0 10px;
            // border: 1px solid red;
            margin-right: 5px;
            background: linear-gradient(to bottom, #5c4222, rgba(0, 0, 0, 0));
            &.is-active {
              background: linear-gradient(to bottom, #f58705, rgba(0, 0, 0, 0));

              border: none;
            }
          }
          .el-tabs--card > .el-tabs__header .el-tabs__nav {
            border: none;
          }
        }
        .add-house {
          width: 100%;
        }
        .floor {
          margin-top: 10px;
          border-radius: 2px;
          background: linear-gradient(to right, #976e3e, rgba(0, 0, 0, 0));
          padding: 5px 10px;
          position: relative;
          .floor-value {
            font-size: 18px;
          }
          .floor-more-btn {
            position: absolute;
            right: 10px;
            top: 10px;
            border: 1px solid #ff8a0066;
            border-radius: 15px;
            padding: 5px 20px;
            color: #ff8a0066;
          }
        }
        .floor-info {
          margin-top: 10px;
          .info-top {
            padding-bottom: 10px;
            border-bottom: 1px solid #524d4d;
            /deep/ {
              .el-col {
                &:last-child {
                  border: none;
                }
                .area-box {
                  border-right: 1px solid #524d4d;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                  .area-value {
                    font-weight: bolder;
                    font-size: 14px;
                  }
                }
              }
            }
          }
          .info-bottom {
            padding: 10px;
            .info-bottom-value {
              float: right;
            }
          }
        }
      }
    }
  }
}
.title-box {
  background-color: rgba(0, 18, 42, 1);
  color: rgba(255, 138, 0, 1);
  position: absolute;
  padding: 10px;
}
</style>
