<template>
  <div>
    <div id="over-viewer"></div>

  </div>
</template>

<script>
class PolylineTrailMaterial {
    constructor(option = {}) {
      this._definitionChanged = new Cesium.Event()
      this._color = undefined
      this._colorSubscription = undefined
      this._time = (new Date()).getTime()
   
      this.color = option.color ? option.color : Cesium.Color.fromCssColorString('rgba(90,90,255, 1)');
  
        this.duration = option.duration ? option.duration : 5000
      // this.img = option.img ? option.img :'/images/colors2.png'
      this.img = this.createMaterialImage()
      // 类型（会自动加载到cesium中）
      this.type = option.type ? option.type : 'PolylineTrail'
   
      // 着色器
      this.source = option.source ? option.source : 'czm_material czm_getMaterial(czm_materialInput materialInput)' +
        '{' +
        'czm_material material = czm_getDefaultMaterial(materialInput);' +
        'vec2 st = materialInput.st;' +
        'vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));' +
        'material.alpha = colorImage.a * color.a;' +
        'material.diffuse = (colorImage.rgb+color.rgb)/2.0;' +
        'return material;' +
        '}'
   
      this.addMaterial()
    }
    createMaterialImage(){
      var c = document.createElement("canvas");
      c.width = 512;
      c.height = 32;
      var ctx = c.getContext("2d");
      var colorstr = this.color.toCssColorString().replace("rgb(","").replace(")","");
      var my_gradient = ctx.createLinearGradient(0, 0, c.width, 0);
      my_gradient.addColorStop(0, "rgba("+colorstr+", 1)");
      my_gradient.addColorStop(1, "rgba("+colorstr+", 0)");
      ctx.fillStyle = my_gradient;
      ctx.fillRect(0, 0, c.width, c.height);
      return c.toDataURL('image/png');
    }
    getType() {
      return 'PolylineTrail'
    }
    getValue(time, result) {
      if (!Cesium.defined(result)) {
        result = {}
      }
   
      result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color)
      result.image = this.img
      result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration
   
      return result
    }
    equals(other) {
      return this === other || (other instanceof PolylineTrailMaterial && Cesium.Property.equals(this._color, other._color))
    }
    addMaterial() {
      Cesium.Material._materialCache.addMaterial(this.type, {
        fabric: {
          type: this.type,
          uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
            image: this.img,
            time: 100
          },
          source: this.source
        },
   
        translucent: (material) => {
          return true
        }
      })
   
      // 注意Cesium.defineProperties会报错，需要改为Object
      Object.defineProperties(PolylineTrailMaterial.prototype, {
        isConstant: {
          get: () => {
            return false
          },
          configurable: true
        },
        definitionChanged: {
          get: () => {
            return this._definitionChanged
          },
          configurable: true
        },
        color: {
          value: Cesium.createPropertyDescriptor('color'),
          configurable: true,
          writable: true
        }
      })
    }
  }
class Bubble {
    constructor(val) {
        this.viewer = val.viewer;
        this.div = document.createElement("div");
    }
    addDynamicLabel(data,cartesian3) {
        let div = this.div;
        div.id = data.id;
        // div.style.display="inline"
        div.style.position = "absolute";
        div.style.minWidth = "380px";
        div.style.height = "auto";
        let keys = Object.keys(data);
        // 构建属性面板
        let HTMLTable = `
              <div class="bubble-box">
                
                <div class="box-wrap" id="bubbleContent">
                    <div class="pine"></div>
                  <div class="bubble-close" id="popupClose">x</div>
                  <div class="area">
                    <div class="area-title fontColor">${ data['name']?data['name']:data['名称'] }</div>
                  </div>
                  <div class="content" >
                    ${keys.map(item=>{
                        return `<div class="data-li">
                                  <div class="data-label textColor">${item}：</div>
                                  <div class="data-value">
                                    <span class="label-num yellowColor">${data[item]}</span>
                                  </div>
                                </div>`
                    }).join('')}
                  </div>
                </div>

                <!-- <img src="./layer_border.png" alt="Norway"> -->
              </div>
            `;
        div.innerHTML = HTMLTable;
        this.viewer.cesiumWidget.container.appendChild(div);
        document
            .getElementById("popupClose")
            .addEventListener("click", () => {
                this.clearDiv();
            });
        let gisPosition = cartesian3;
        this.handler = this.viewer.scene.postRender.addEventListener(() => {
          const canvasHeight = this.viewer.scene.canvas.height;
          const windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
              this.viewer.scene,
              gisPosition
          );
          let content = document.getElementById("bubbleContent");
          let height = content?content.clientHeight:220;
          div.style.bottom = canvasHeight - windowPosition.y + height + Math.sin(Math.PI/180*45)*60+ "px";
          const elWidth = div.offsetWidth;
          div.style.left = windowPosition.x - elWidth / 2 + 190 + "px";
        }, this);
    }
    clearDiv() {
        if (this.div && this.div.parentElement) {
            var parent = this.div.parentElement;
            parent.removeChild(this.div);
            this.handler&&this.handler();
        }
    }
}

const viewUtil = {
    /**
     * 添加发光墙体
     * @param {*} source 
     * @param {*} feature 
     * @param {*} minimumHeight 
     * @param {*} maximumHeight 
     */
    addWallByFeature(source,feature,colorStr,minimumHeight,maximumHeight){
        let coords = feature.geometry.coordinates[0][0];
        minimumHeight = minimumHeight?Number(minimumHeight):100,
        maximumHeight = maximumHeight?Number(maximumHeight):5000
        colorStr = colorStr?colorStr:"rgb(255,255,0)"
        source.entities.add({
            // name: "发光动态墙体",
            wall: {
                positions: Cesium.Cartesian3.fromDegreesArray(coords.flat(2)),
                material: new WallDiffuseMaterialProperty({
                    color: Cesium.Color.fromCssColorString(colorStr).withAlpha(0.7),
                    duration: 3000,
                }),
                minimumHeights: Array(coords.length).fill(minimumHeight),
                maximumHeights: Array(coords.length).fill(maximumHeight),
                outline: false,
            },
        });
    },
    /**
     * 创建轮廓线，使用Entity实现
     * @param {*} source 数据源
     * @param {*} geometry 要素的几何对象
     * @param {*} colorStr 填充颜色
     * @param {*} outlineColorStr 轮廓线颜色
     * @param {*} outlineWidth 轮廓线宽度
     * @param {*} isFill 是否填充
     */
    createOutlinePolygon(source,feature,colorStr,outlineColorStr,outlineWidth,isFill=true){
        let geometryType = feature.geometry.type;
        let coords = feature.geometry.coordinates;
        let attr = feature.properties;
        // console.log(attr.name)
        if(geometryType == "MultiPolygon"){
            coords.forEach((polygon,i)=>{
                let polygonHierarchy = null;
                if(polygon.length>1){
                    let holesArr = [],rings = polygon.slice(1,polygon.length);
                    rings.forEach(cd=>{
                        holesArr.push(new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(cd.flat(2))))
                    })
                    polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),holesArr)
                }else{
                    polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)))
                }
                console.log(attr.name)
                let entity = source.entities.add({
                    id:JSON.stringify({...attr,index:i}),//多环的时候单纯用attr会ID重复，所以使用环的索引加以区分。
                    polygon: {
                        hierarchy: polygonHierarchy,
                        material: Cesium.Color.fromCssColorString(colorStr?colorStr:"red"),
                    },
                });
                entity.polygon.fill = isFill;
                entity.polygon.outlineWidth = outlineWidth;
                entity.polygon.outline = false;
                entity.polygon.outlineColor = Cesium.Color.RED;
                entity.polyline = {
                    positions: entity.polygon.hierarchy._value.positions,
                    width: entity.polygon.outlineWidth,
                    material: Cesium.Color.fromCssColorString(outlineColorStr?outlineColorStr:"red"),
                }
            })
        }
    },

    /**
     * 添加面要素
     * @param {*} source 数据源
     * @param {*} feature 要素
     * @param {*} colorStr 填充颜色
     */
    addPolygonEntityByFeature(source,feature,colorStr){
        let geometryType = feature.geometry.type;
        let coord = feature.geometry.coordinates;
        if(geometryType == "MultiPolygon"){
        //   let polygon = coord[0];
        //   let outBoundary = new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)))
        //   source.add(new Cesium.Primitive({
        //     geometryInstances : new Cesium.GeometryInstance({
        //       geometry: new Cesium.PolygonGeometry({
        //         polygonHierarchy : outBoundary
                
        //       }),
        //       id:id
        //     }),
        //     appearance : new Cesium.EllipsoidSurfaceAppearance({
        //       material: new Cesium.Material({
        //         fabric : {
        //             type : 'Color',
        //             uniforms : {
        //                 color : Cesium.Color.fromCssColorString(colorStr?colorStr:"red")
        //             }
        //         }
        //       }),
        //       faceForward : true
        //     })
        //   }));
            coord.forEach(polygon=>{
                let polygonHierarchy = null;
                if(polygon.length>1){
                    let holesArr = [],rings = polygon.slice(1,polygon.length);
                    rings.forEach(cd=>{
                        holesArr.push(new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(cd.flat(2))))
                    })
                    polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),holesArr)
                }else{
                    polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)))
                }

                source.entities.add({
                    polygon: {
                        hierarchy: polygonHierarchy,
                        material: Cesium.Color.fromCssColorString(colorStr?colorStr:"red"),
                    },
                });
            })
        }
    },
    addPolygonPrimitiveByFeature(primitiveCollection,feature,colorStr){
      let geometryType = feature.geometry.type;
      let coord = feature.geometry.coordinates;
      if(geometryType == "MultiPolygon"){
          coord.forEach(polygon=>{
              let polygonHierarchy = null;
              if(polygon.length>1){
                  let holesArr = [],rings = polygon.slice(1,polygon.length);
                  rings.forEach(cd=>{
                      holesArr.push(new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(cd.flat(2))))
                  })
                  polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),holesArr)
              }else{
                  polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)))
              }
              primitiveCollection.add(new Cesium.Primitive({
                  geometryInstances : new Cesium.GeometryInstance({
                    geometry: new Cesium.PolygonGeometry({
                      polygonHierarchy : polygonHierarchy
                      
                    }),
                    id:JSON.stringify(feature.properties)
                  }),
                  appearance : new Cesium.EllipsoidSurfaceAppearance({
                    material: new Cesium.Material({
                      fabric : {
                          type : 'Color',
                          uniforms : {
                              color : Cesium.Color.fromCssColorString(colorStr?colorStr:"red")
                          }
                      }
                    }),
                    faceForward : true
                  })
              }));
          })
      }
    },
    addGeoVisImagerLayer(viewer,type){
        switch(type){
            case "yingxiang":{
                viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
                    url: "https://tiles{s}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token="+geovisearthConfig.token,
                    subdomains:'123',
                    tilingScheme: new Cesium.WebMercatorTilingScheme(),
                    minimumLevel: 4,
                    maximumLevel: 18,
                }))
                break;
            }
            case "shiliang":{
                viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
                    url: "https://tiles{s}.geovisearth.com/base/v1/vec/{z}/{x}/{y}?format=png&tmsIds=w&token="+geovisearthConfig.token,
                    subdomains:'123',
                    tilingScheme: new Cesium.WebMercatorTilingScheme(),
                    minimumLevel: 4,
                    maximumLevel: 18,
                }))
                break;
            }
        }
    },
    addWaterFeature(primitiveCollection,feature) {
        let geometryType = feature.geometry.type;
        let coord = feature.geometry.coordinates;
        let attr = feature.properties; 

        if (geometryType == "MultiPolygon") {
          coord.forEach((polygon) => {
            let polygonHierarchy = null;
            if(polygon.length>1){
                let holesArr = [],rings = polygon.slice(1,polygon.length);
                rings.forEach(cd=>{
                    holesArr.push(new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(cd.flat(2))))
                })
                polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),holesArr)
            }else{
                polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)))
            }
            primitiveCollection.add(
              new Cesium.GroundPrimitive({
                geometryInstances: new Cesium.GeometryInstance({
                  geometry: new Cesium.PolygonGeometry({
                    polygonHierarchy: polygonHierarchy,
                  }),
                  attributes: {
                    // 通过attributes属性统一指定线段颜色
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                      new Cesium.Color(1.0, 0, 0, 1.0)
                    ),
                  },
                  id: attr,
                }),
                appearance: new Cesium.EllipsoidSurfaceAppearance({
                  material: new Cesium.Material({
                    fabric: {
                      type: "Water",
                      uniforms: {
                        // 水的基本颜色
                        baseWaterColor: new Cesium.Color(
                          64 / 255.0,
                          157 / 255.0,
                          253 / 255.0,
                          0.5
                        ),
                        // 水法向摄动的法线图
                        normalMap:
                        "./Build/Cesium/Assets/Textures/waterNormals.jpg",
                        // 波纹数量
                        frequency: 1000.0,
                        // 动画速度
                        animationSpeed: 0.002,
                        // 振动的幅度
                        amplitude: 150,
                        // 镜面反射的强度
                        specularIntensity: 1,
                      },
                    },
                  }),
                  faceForward: true,
                }),
              })
            );
          });
        }
    },
    addWaterFeature1(primitiveCollection,feature) {
        let geometryType = feature.geometry.type;
        let coord = feature.geometry.coordinates;
        let attr = feature.properties; 

        if (geometryType == "MultiPolygon") {
          coord.forEach((polygon) => {
            let polygonHierarchy = null;
            if(polygon.length>1){
                let holesArr = [],rings = polygon.slice(1,polygon.length);
                rings.forEach(cd=>{
                    holesArr.push(new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(cd.flat(2))))
                })
                polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),holesArr)
            }else{
                polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)))
            }
            primitiveCollection.add(
              new Cesium.Primitive({
                geometryInstances: new Cesium.GeometryInstance({
                  geometry: new Cesium.PolygonGeometry({
                    polygonHierarchy: polygonHierarchy,
                  }),
                  attributes: {
                    // 通过attributes属性统一指定线段颜色
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                      new Cesium.Color(1.0, 0, 0, 1.0)
                    ),
                  },
                  id: attr,
                }),
                appearance: new Cesium.EllipsoidSurfaceAppearance({
                  material: new Cesium.Material({
                    fabric: {
                      type: "Water",
                      uniforms: {
                        // 水的基本颜色
                        baseWaterColor: new Cesium.Color(
                          64 / 255.0,
                          157 / 255.0,
                          253 / 255.0,
                          0.5
                        ),
                        // 水法向摄动的法线图
                        normalMap:
                          "/cesium/Assets/Textures/waterNormals.jpg",
                        // 波纹数量
                        frequency: 1000.0,
                        // 动画速度
                        animationSpeed: 0.002,
                        // 振动的幅度
                        amplitude: 150,
                        // 镜面反射的强度
                        specularIntensity: 1,
                      },
                    },
                  }),
                  faceForward: true,
                }),
              })
            );
          });
        }
    },
    addEffect(type,result,color,visible){
      switch(type){
          case "polygon":{
              const primitives = new Cesium.PrimitiveCollection({ show:!!visible });
              result.features.forEach((feature) => {
                  primitives.add(this.createPrimitiveByFeature1(feature, color));
              });
              viewer.scene.primitives.add(primitives);// 添加面
              return primitives;
              break;
          }
          case "label":{
              const labelCollection = new Cesium.LabelCollection({ show:!!visible });
              result.features.forEach((feature) => {
                  labelCollection.add(this.addLabel(feature));
              });
              viewer.scene.primitives.add(labelCollection); // 添加 label
              return labelCollection;
              break;
          }
          case "water":{
              const waterPrimitives = new Cesium.PrimitiveCollection({ show:!!visible});
              result.features.forEach((feature) => {
                  this.addWaterFeature(waterPrimitives,feature);
              });
              viewer.scene.primitives.add(waterPrimitives); // 添加 水面特效
              return waterPrimitives;
              break;
          }
          case "glow":{
              let tmpDataSource = new Cesium.CustomDataSource();
              viewer.dataSources.add(tmpDataSource);
              result.features.forEach((feature) => {
                  tmpDataSource.entities.add(this.addGlowFeature(feature,!!visible,color))
              })
              tmpDataSource.show = !!visible;
              return tmpDataSource;
          }
          case "dynamicLine":{
              let dyDataSource = new Cesium.CustomDataSource();
              viewer.dataSources.add(dyDataSource);
              result.features.forEach((feature) => {
                  dyDataSource.entities.add(this.addDynamicLine(feature,!!visible,color))
              })
              dyDataSource.show = !!visible;
              return dyDataSource;
          }
      }
  },
  createPrimitiveByFeature1(feature, rgba) {
      let coords = feature.geometry.coordinates;
      let color = rgba?rgba:"#c7d221";
      let ground = new Cesium.GroundPrimitive({
          geometryInstances: new Cesium.GeometryInstance({
              geometry: new Cesium.PolygonGeometry({
                  polygonHierarchy: coords[0][0][0].length==3?new Cesium.PolygonHierarchy(
                      Cesium.Cartesian3.fromDegreesArrayHeights(coords.flat(3))
                  ):new Cesium.PolygonHierarchy(
                      Cesium.Cartesian3.fromDegreesArray(coords.flat(3))
                  ),
              }),
              id: feature.properties,
              attributes: { color:  Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString(color)) },
          }),
          appearance : new Cesium.PerInstanceColorAppearance({
              translucent : false
          })
      });
      return ground;
  },
  addLabel(feature){
      // 计算中心点
      let polygon = feature.geometry.coordinates[0];
      let points = [];
      polygon.forEach(ring=>{
          ring.forEach(coord=>{
              points.push([coord[0],coord[1]]);
          })
      })
      let pointss = turf.points(points);
      let centerResult = turf.center(pointss);
      let center = centerResult.geometry.coordinates
      return {
          position: Cesium.Cartesian3.fromDegrees(center[0],center[1],18),
          text: feature.properties["名称"]?feature.properties["名称"]:feature.properties["zldwmc"],
          font: "24px Helvetica",
          horizontalOrigin:Cesium.HorizontalOrigin.CENTER,// 水平对齐方式
          verticalOrigin:Cesium.HorizontalOrigin.CENTER,// 垂直对齐方式
          fillColor: Cesium.Color.WHITE,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 1,
          showBackground:false,
          selectionIndicator:false,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          scale:0.8,
          disableDepthTestDistance: 100.0,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 30000.0),//根据到相机的距离确定可见性。
          scaleByDistance: new Cesium.NearFarScalar(500, 1, 30000, 0.0),
          // translucencyByDistance: new Cesium.NearFarScalar(500, 1, 1400, 0.0)
      }
  },
  addGlowFeature(feature,show,colorStr){
      let geometryType = feature.geometry.type;
      let coord = feature.geometry.coordinates;
      if(geometryType == "MultiPolygon"){
          let polygon = coord[0];
          return {
              name: "具有发光效果的线",
              polyline: {
                  positions: Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),// 只取外环，构造边界线
                  width: 4,
                  material: new Cesium.PolylineGlowMaterialProperty({
                      glowPower: 0.2,
                      color:Cesium.Color.fromCssColorString(colorStr?colorStr:"#242dc2"),
                  }),
                  followSurface: false, //是否贴着地表
              },
          };
      }
  },
  /**
   * 返回线 PolylineGraphics
   * @param {*} feature 线要素
   * @param {*} color 
   * @param {*} width 
   * @returns 
   */
  addDynamicLine(feature,color,width=1){
      if(feature.geometry.type == "MultiLineString"){
          let coords = feature.geometry.coordinates[0];
          let name = feature.properties.name;
          let colorStr = color?color:"#FF0";
          if(name!=null&&name.includes("高速")){
              color = Cesium.Color.WHITE ;
              width = 3;
          }
          return {
                id:JSON.stringify(feature.properties),
                polyline: {
                    positions: Cesium.Cartesian3.fromDegreesArray(coords.flat(2)),
                    width: width,
                    material: new PolylineTrailMaterial({
                        color: Cesium.Color.fromCssColorString(colorStr),
                        duration:5000
                    }),
                },
          };
      }
  },
  loadTileset(viewer,tilesetUrl,deep=-45) {
      let vm = this;
      let tileset = new Cesium.Cesium3DTileset({
          url: tilesetUrl,
          maximumScreenSpaceError:8,
          dynamicScreenSpaceError: true,
          dynamicScreenSpaceErrorDensity: 0.00278,
          dynamicScreenSpaceErrorFactor: 4.0,
          dynamicScreenSpaceErrorHeightFalloff: 0.25,
      });
      viewer.scene.primitives.add(tileset);
      tileset.readyPromise.then(function (tileset_) {
          vm.setTilesetHeightAndOffset(tileset_, deep);
      });
      return tileset;
  },
  setTilesetHeightAndOffset(tileset, height, x, y) {
      x = x ? x : 0;
      y = y ? y : 0;
      let center;
      if (tileset.boundingSphere) {
          // 3dtiles
          center = tileset.boundingSphere.center;
      } else if (
          tileset._boundingSpheres &&
          tileset._boundingSpheres.length > 0
      ) {
          // Primitive
          center = tileset._boundingSpheres[0].center;
      }
      const cartographic = Cesium.Cartographic.fromCartesian(center);
      const surface = Cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          0.0
      );
      const offset = Cesium.Cartesian3.fromRadians(
          cartographic.longitude + x,
          cartographic.latitude + y,
          height
      );
      const translation = Cesium.Cartesian3.subtract(
          offset,
          surface,
          new Cesium.Cartesian3()
      );
      const modelMaxtrix = Cesium.Matrix4.fromTranslation(translation);
      tileset.modelMatrix = modelMaxtrix;
  },
}
// import { cartesianToLnglat, uuid } from "./js/cUtils";
// import viewUtil from "./js/viewUtil.js";
// import Bubble from "./js/Bubble.js";

export default {
  data() {
    return {

    };
  },
  mounted() {
    this.initCesium();
  },
  methods: {
    initCesium() {
    
      let box = document.getElementsByClassName("content__default")[0];
      box.style.maxWidth = "100%";
      box.style.paddingTop = 0;
      let Cesium = this.$cesium;
      window.CESIUM_BASE_URL = "/cesium";
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
      // 添加 Mapbox tile provider
      const mapboxAccess =
              "pk.eyJ1IjoicWl1c2hpamllIiwiYSI6ImNsMDNvdDRybDEyc2YzZG9kbWZoY2FuOW0ifQ.4FH-BUupi46Z0zQ-CEm_Ig";

      var customMapboxIamgery = new Cesium.MapboxStyleImageryProvider({
        // url: "https://api.mapbox.com/styles/v1",
        username: "qiushijie",
        styleId: "clboooor3000714mi15y9j6ba",
        accessToken: mapboxAccess,
        scaleFactor: true,
      });

      var viewer = new Cesium.Viewer("over-viewer", {
        geocoder: false, //位置查找
        homeButton: false, //视图返回初始位置
        sceneModePicker: false, //视角选择器
        baseLayerPicker:false,//底图选择器
        navigationHelpButton: false, //导航帮助按钮
        animation: false, //动画控制器
        creditContainer: document.createElement("div"),//版权显示
        timeline: false, //时间线
        fullscreenButton: false, //全屏控件
        vrButton: false,
        infoBox: false,
        selectionIndicator: false,
        imageryProvider:customMapboxIamgery
      });
      window.Cesium = Cesium;
      window.viewer = viewer;
      window.bubble = new Bubble({
          viewer:viewer
      });
        this.initEvent();
        this.setExtent(viewer);
        this.riverPrimitives = viewer.scene.primitives.add(// 创建primitive集合，存储水系图元对象
          new Cesium.PrimitiveCollection()
        );
        this.addWaterPrimitive(this.riverPrimitives);

         // 加载动态路网
        this.rdSource = new Cesium.CustomDataSource("dynamicRoad");// 创建自定义数据源，存放动态墙体的Entity
        viewer.dataSources.add(this.rdSource);
        let roadUrl = "/data/licheng_road.geojson"
        fetch(roadUrl).then(res=>res.json()).then(result=>{
          result.features.forEach(feature=>{
            this.rdSource.entities.add(viewUtil.addDynamicLine(feature,"#fff",1))
          })
        })
        // 加载白模
        let whiteUrl = "/data/licheng/tileset.json"
        let whiteTileset = viewUtil.loadTileset(viewer,whiteUrl,0)
    },
    setExtent(viewer){
      viewer.camera.setView({
          // destination : Cesium.Cartesian3.fromDegrees(113.9044,23.3215,1000000),
          destination: new Cesium.Cartesian3(-2368517.8753985167,  5368259.496963671, 2498952.3392142765),
          orientation: {
              heading :0.21256304726696484, //Cesium.Math.toRadians(0.0), // east, default value is 0.0 (north)
              pitch :-0.3255554838380681,  //Cesium.Math.toRadians(-90),    // default value (looking down)
              roll : 0.0000316945339733                          // default value
          }
      });

    },
    addWaterPrimitive(riverPrimitives){
       // 加水纹
        let waterUrl = "/data/licheng_water.geojson"
        fetch(waterUrl).then(res=>res.json()).then(result=>{
          result.features.forEach(feature=>{
            viewUtil.addWaterFeature1(riverPrimitives,feature);
          })
        })
    },
    initEvent(){
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      let vm = this;
      handler.setInputAction(function (evt) {
        // 获取该位置的所有primitive集合
        let picks = viewer.scene.drillPick(evt.position);
        viewer.scene.render();
        let isOn3dtiles = false;
        let pickPrimitive = [];
        let pickEntity =[];
        let pickTileFeature =[];
        for (var i = 0; i < picks.length; i++) {
          if (picks[i] && picks[i] instanceof Cesium.Cesium3DTileFeature) {
            //模型上拾取
            isOn3dtiles = true;
            pickTileFeature.push(picks[i]);
          }
          if(picks[i].primitive && picks[i].primitive instanceof Cesium.GroundPrimitive){
            pickPrimitive.push(picks[i])
          }
          if(picks[i].id instanceof Cesium.Entity){
              pickEntity.push(picks[i].id)
          }
        }
        if(window.selectPrimitive){
          // viewer.scene.primitives.remove(window.selectPrimitive);
          // window.selectPrimitive=null;
          let comp = window.selectPrimitive;
          let attr = comp.primitive.getGeometryInstanceAttributes(comp.id);
          attr.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromBytes(comp.color[0],comp.color[1],comp.color[2],comp.color[3]));
          window.selectPrimitive=null;
        }

        let currCartesian3 = viewer.scene.globe.pick(viewer.camera.getPickRay(evt.position),viewer.scene)


        if (pickPrimitive.length>0||pickEntity.length>0) {
            // 设置选中高亮primitive
            if(pickPrimitive.length&&pickPrimitive[0].id){
                var attributes = pickPrimitive[0].primitive.getGeometryInstanceAttributes(pickPrimitive[0].id);
                window.selectPrimitive = {
                    id:pickPrimitive[0].id,
                    primitive:pickPrimitive[0].primitive,
                    color:{...attributes.color}
                }
                attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({
                    alpha: 0.5
                }));
            }
            //坐标转换
            // let currCartesian3 = viewer.scene.pickPosition(evt.position);
            // let pickobject = viewer.scene.pick(evt.position); //取最上面的primitive对象
            let fields = {};
            if (pickEntity.length) {
                fields = JSON.parse(pickEntity[0].id);
            }else if(pickPrimitive.length){
                fields = pickPrimitive[0].id;
            }
            window.bubble.clearDiv()
            window.bubble.addDynamicLabel(fields,currCartesian3)
        } else if(pickTileFeature.length){
          let fields = {};
          const feature = pickTileFeature[0];
          const propertyNames = feature.getPropertyNames();
          const length = propertyNames.length;
          for (let i = 0; i < length; ++i) {
              const propertyName = propertyNames[i];
              if(propertyName == "采集时间"){
                fields["测试的时间"] = feature.getProperty(propertyName);
              }else{
                fields[propertyName] = feature.getProperty(propertyName);
              }
              
          }
          window.bubble.clearDiv()
          window.bubble.addDynamicLabel(fields,currCartesian3)
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }
  },
};
</script>

<style lang='stylus' scoped>
#over-viewer {
  height: 80vh;
  width: 100%;
}

.path-container {
  position: absolute;
  top: 75px;
  left: 70px;
}
</style>