cesuim 可视化项目

西安市3d全景视频组件：包含加载3d titles 模型， 搜索监控点位，监控点位视频播放，视频贴地模型播放等功能

1. cesuim 可视化项目：开发示例(部分)：

2. 使用的技术是VUE + Cesuim

部分代码示例：

3dtitles 模型加载， 模型贴地，视频点位加载放置，视频播放，视频投影；

PreviewOutLoad： 无人机加载组件

<template>
<div class="container" @click="domClick">
  <div id="cesiumContainer"></div>
  <div class="search-pane">
    <div class="cesium-viewer-geocoderContainer">
      <form id='search-form' @submit.prevent="search">
        <input v-model="keyWord" class="cesium-geocoder-input cesium-geocoder-input-wide" placeholder="请输入点位名称查询"/>
        <span class="cesium-geocoder-searchButton" @click="search">
          <svg class="cesium-svgPath-svg" width="32" height="32" viewBox="0 0 32 32">
            <path d="M29.772,26.433l-7.126-7.126c0.96-1.583,1.523-3.435,1.524-5.421C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885c0,5.789,4.693,10.481,10.484,10.481c1.987,0,3.839-0.563,5.422-1.523l7.128,7.127L29.772,26.433zM7.203,13.885c0.006-3.582,2.903-6.478,6.484-6.486c3.579,0.008,6.478,2.904,6.484,6.486c-0.007,3.58-2.905,6.476-6.484,6.484C10.106,20.361,7.209,17.465,7.203,13.885z"></path>
          </svg>
        </span>
      </form>
      <div class="search-results" id="results">
        <ul v-show="showSearchResults">
          <li v-for="item in positions" :key="item.indexCode" :class="{'active': curCameraIndexCode === item.indexCode}" @click="selectPositin(item)"><span v-html="item.name"></span></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="latlng_show">
    <div class="geo-info">
      <div>经度：{
  {longitude}}</div>
      <div>纬度：{
  {latitude}}</div>
      <div>视角高：{
  {altitude * 1000}}米</div>
    </div>
  </div>
  <PreviewOutLoad class="preview-out-load" v-if="loading"/>
  <div id="toolbar">
      <video
        id="video"
        style="display: none"
        class="video-js vjs-default-skin box"
        preload="auto"
        muted
      >
      </video>

      <video
        v-for="item in this.cameras"
        :key="item.indexCode"
        :id="'wallVideo' + item.indexCode"
        style="display: none"
        class="video-js vjs-default-skin box"
        autoplay
        muted
      >
      </video>
  </div>
</div>
</template>

<script>
/* eslint-disable */
import Api from '@/api'
import videojs from 'video.js'
import 'videojs-contrib-hls'
import PreviewOutLoad from '@/components/common/PreviewOutLoad.vue'
//汉化原生cesium
import { loadCesiumZH } from '@/plugins/class/cesium-zh'
import CesiumNavigation from 'cesium-navigation-es6'
export default {
  name: 'ModelScence',
  props: {
    msg: String
  },
  components: {
    PreviewOutLoad
  },
  data() {
    return {
      primitiveDict: {},
      cameras: [],
      positions: [],
      keyWord: '',
      videoObj: null,
      loading: false,
      curCameraIndexCode: '',
      longitude: 0,