<template>
  <!-- GIS地图 -->
  <div class="videoMapGis">
    <!-- <gisMap></gisMap> -->
    <MapBox :initJson="`/static/libs/mapbox/style/floodOneMap.json`"></MapBox>
  </div>
</template>

<script setup name="page">
// import gisMap from '../../gisMapPage/gisMapCommonPage.vue';
import { pagecameraResource } from '@/api/cameraResource/cameraResource';
import SPIcon from '@/assets/newImgs/layerIcon/SP2.png';
import { nextTick } from 'vue';
import { getImageUrl } from '@/utils/ruoyi';
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import bus from '@/bus';

const { proxy } = getCurrentInstance();
const allData = reactive({
  videoGeojson: {},
});
function getList() {
  let queryParams = {
    pageNum: 1,
    pageSize: 999,
  };
  pagecameraResource(queryParams).then(response => {
    let videoData = response.data;
    console.log(videoData);
    allData.videoGeojson = getVideoGeojson(videoData);
    console.log(allData.videoGeojson);
    //initCluster(newfiberMap.getMap(), allData.videoGeojson, 'videoMonitor', SPIcon);
    // addGeoJsonPoint(allData.videoGeojson, 'videoMonitor', SPIcon);
    setTimeout(() => {
      bus.emit('setGeoJSON', { json: allData.videoGeojson, key: 'video' });
      bus.emit('setLayerVisible', { layername: 'video', isCheck: true });
    }, 2000);
  });
}
function getVideoGeojson(list) {
  return {
    type: 'FeatureCollection',
    features: list.map(item => {
      let geometry = {
        type: 'Point',
        coordinates: [Number(item.x), Number(item.y)],
      };
      return { type: 'Feature', geometry, properties: item };
    }),
  };
}
//添加点状图层
function addGeoJsonPoint(geojson, type, icon) {
  console.log('geojsongeojson', geojson);

  // geojson.features.forEach(feature => {
  //   let name =
  //     feature.properties.name ||
  //     feature.properties.dickName ||
  //     feature.properties.architectureName ||
  //     feature.properties.dikeName ||
  //     feature.properties.warehouseName ||
  //     feature.properties.siteName;
  //   feature.properties = Object.assign(feature.properties, {
  //     style_: {
  //       id: type,
  //       name,
  //       type: NewFiberMap.Enum.VectorType.ICON,
  //       options: {
  //         show: true,
  //         name:
  //           feature.properties.name ||
  //           feature.properties.dickName ||
  //           feature.properties.architectureName ||
  //           feature.properties.dikeName ||
  //           feature.properties.warehouseName ||
  //           feature.properties.siteName,
  //         id: type,
  //         url: icon, //styleSet.iconUrl,
  //         width: 45, //styleSet.width || 75,
  //         height: 79, //styleSet.height || 45,
  //         pixelOffset: [0, 0],
  //         distanceDisplayCondition: [Number.MIN_VALUE, 700000],
  //       },
  //       labelOptions: {
  //         font: '15px PingFang SC',
  //         color: 'rgba(255, 255, 255,1)',
  //         pixelOffset: [0, -20],
  //         backgroundColor: 'rgba(0,0,0,0.7)',
  //         showBackground: false,
  //         distanceDisplayCondition: [Number.MIN_VALUE, 7000000],
  //       },
  //     },
  //   });
  // });
  // if (newfiberMap.getLayers([type]).length > 0) {
  //   return;
  // } else {
  //   newfiberMap.geojsonToMap(geojson);
  // }
}
function initCluster(viewer, geojson, layerid, imgurl) {
  let dataSource = newfiberMap.getLayers([layerid])[0];
  if (!!!dataSource) {
    new Cesium.GeoJsonDataSource().load(geojson).then(dataSource => {
      dataSource.id = layerid;
      viewer.dataSources.add(dataSource);
      dataSource.clustering.enabled = true;
      dataSource.clustering.pixelRange = 10;
      dataSource.clustering.minimumClusterSize = 3;
      //根据层级判断是否聚合
      let getNowZoom;
      let handler = new Cesium.ScreenSpaceEventHandler(newfiberMap.getMap().scene.canvas);
      handler.setInputAction(function (movement) {
        getNowZoom = newfiberMap.getCameraParams().height;
        if (getNowZoom < 1500) {
          dataSource.clustering.enabled = false;
        } else {
          dataSource.clustering.enabled = true;
        }
      }, Cesium.ScreenSpaceEventType.WHEEL);
      // 添加监听函数
      dataSource.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {
        // 关闭自带的显示聚合数量的标签
        cluster.label.show = false;
        cluster.billboard.show = true;
        cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;

        // 根据聚合数量的多少设置不同层级的图片以及大小
        if (clusteredEntities.length >= 20) {
          cluster.billboard.image = combineIconAndLabel(getImageUrl('clusterIcon1.png', 'newImgs/layerIcon'), clusteredEntities.length, 68);
          // cluster.billboard.width = 38;
          // cluster.billboard.height = 38;
        } else if (clusteredEntities.length >= 12) {
          cluster.billboard.image = combineIconAndLabel(getImageUrl('clusterIcon2.png', 'newImgs/layerIcon'), clusteredEntities.length, 64);
          // cluster.billboard.width = 34;
          // cluster.billboard.height = 34;
        } else if (clusteredEntities.length >= 8) {
          cluster.billboard.image = combineIconAndLabel(getImageUrl('clusterIcon3.png', 'newImgs/layerIcon'), clusteredEntities.length, 50);
          // cluster.billboard.width = 30;
          // cluster.billboard.height = 30;
        } else {
          cluster.billboard.image = combineIconAndLabel(getImageUrl('clusterIcon4.png', 'newImgs/layerIcon'), clusteredEntities.length, 50);
        }
      });
      setDataSourceEntitysStyle(dataSource);
    });
  }

  new Cesium.GeoJsonDataSource().load(geojson).then(e => {
    e.entities.values.forEach(entity => {
      dataSource.entities.add(entity);
    });
    setDataSourceEntitysStyle(dataSource);
  });

  function setDataSourceEntitysStyle(dataSource) {
    // foreach用于调用数组的每个元素，并将元素传递给回调函数。
    dataSource.entities.values.forEach(entity => {
      let properties = entity.properties.getValue();
      // 将点拉伸一定高度，防止被地形压盖
      entity.position._value.z += 130.0;
      // 使用大小为64*64的icon，缩小展示poi
      entity.billboard = {
        image: imgurl,
        width: 45,
        height: 79,
      };
      entity.label = getLabelOptions({
        ...properties.labelOptions,
        name: properties.name,
        pixelOffset: [0, -75],
      });
    });
  }

  function getLabelOptions(options) {
    return {
      // 文本。支持显式换行符“ \ n”
      text: options.name + '' || '测试名称',
      // 字体样式，以CSS语法指定字体
      font: options.font || '15px Source Han Sans CN',
      fillColor: Cesium.Color.fromCssColorString(!!options.color ? options.color : 'rgba(255,255,255,1)'),
      // 背景颜色
      backgroundColor: Cesium.Color.fromCssColorString(!!options.backgroundColor ? options.backgroundColor : 'rgba(0,0,0,1)'),
      // 是否显示背景颜色
      showBackground: options.showBackground || false,
      // 字体边框
      outline: options.outline || false,
      // 字体边框颜色
      outlineColor: !!options.outlineColor ? Cesium.Color.fromCssColorString(options.outlineColor) : Cesium.Color.WHITE,
      // 字体边框尺寸
      outlineWidth: options.outlineWidth || 10,
      // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
      scale: options.scale || 1.0,
      // 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
      style: options.style || Cesium.LabelStyle.FILL,
      // 相对于坐标的水平位置
      verticalOrigin: options.verticalOrigin || Cesium.VerticalOrigin.CENTER,
      // 相对于坐标的水平位置
      horizontalOrigin: options.horizontalOrigin || Cesium.HorizontalOrigin.CENTER,
      // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
      pixelOffset: new Cesium.Cartesian2((options.pixelOffset || [])[0] || 0, (options.pixelOffset || [])[1] || 20),
      //1000000000 内不受地形影响 遮挡
      disableDepthTestDistance: options.disableDepthTestDistance || Number.POSITIVE_INFINITY,
      clampToGround: options.clampToGround ?? true,
      heightReference: options.heightReference ?? Cesium.HeightReference.CLAMP_TO_GROUND,
      eyeOffset: new Cesium.Cartesian3(...(options.eyeOffset || [0, 0, -10])),
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        ...(options.distanceDisplayCondition || [Number.MIN_VALUE, Number.POSITIVE_INFINITY])
      ),
    };
  }
}
function combineIconAndLabel(url, label, width, height) {
  height = height || width;
  // 创建画布对象
  let canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  let ctx = canvas.getContext('2d');

  let promise = new Cesium.Resource.fetchImage(url).then(image => {
    // 异常判断
    try {
      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    } catch (e) {
      console.log(e);
    }

    // 渲染字体
    // font属性设置顺序：font-style, font-variant, font-weight, font-size, line-height, font-family
    ctx.fillStyle = Cesium.Color.WHITE.toCssColorString();
    ctx.font = 'bold 15px Microsoft YaHei';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(label, width / 2, height / 2);

    return canvas;
  });
  return promise;
}

onMounted(() => {
  getList();
});
</script>
<style lang="scss">
.videoMapGis {
  width: 100%;
  height: calc(100vh - 120px);
  background: rgba(0, 0, 0, 0.05);
}
</style>