Newer
Older
HuangJiPC / src / utils / gis / NewfiberMap.js
@jimengfei jimengfei on 5 Jul 24 KB updata
import WKT from 'terraformer-wkt-parser';
import { nextTick } from 'vue';
import MVTImageryProvider from './mvtImageProvider.js';
export default class NewFiberMapUtils {
  //地图实例
  map = null;
  features = [];
  removeHandler = null;
  colorOpacity = 1;
  constructor(pramas) {
    Cesium.Ion.defaultAccessToken =
      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNGNmNWUwMi02NWEyLTQxNzItOTNhNC1mY2NiZTcxNDc2OWYiLCJpZCI6MTU5NDQsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyJdLCJpYXQiOjE1NjkyMjk3MTN9.PYUfCHykW23NuwRzzz04yW7JyZ4vQlcb4kToZ44r42w';
    let config = Object.assign(this.mapConfig(pramas));
    config.container = pramas.container || config.container;
    config.featureCallBack = pramas.featureCallBack || config.featureCallBack;
    this.map = new Cesium.Viewer(config.container, config);
    this.map.imageryLayers.remove(this.map.imageryLayers.get(0));
    this.map.scene.globe.maximumScreenSpaceError = 4 / 1;
  }
  mapConfig({
    selectionIndicator = false,
    animation = false,
    baseLayerPicker = false,
    timeline = false,
    sceneModePicker = false,
    navigationHelpButton = false,
    useDefaultRenderLoop = true,
    showRenderLoopErrors = true,
    fullscreenButton = false,
    infoBox = false,
    vrButton = false,
    geocoder = false,
    homeButton = false,
    CreditsDisplay = false,
    contextOptions = {
      requestWebgl1: true,
    },
  }) {
    return {
      contextOptions,
      selectionIndicator,
      baseLayerPicker,
      timeline,
      sceneModePicker,
      navigationHelpButton,
      useDefaultRenderLoop,
      showRenderLoopErrors,
      fullscreenButton,
      infoBox,
      animation,
      vrButton,
      geocoder,
      homeButton,
      CreditsDisplay,
    };
  }
  //设置视角无动画
  setView(fields = { lon: 0, lat: 0, zoom: 10000000, heading: 0, pitch: 0, roll: 0 }) {
    let self = this;
    self.map.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(fields.lon, fields.lat, fields.zoom), //赤道上空1000km高度
      orientation: {
        heading: Cesium.Math.toRadians(fields.heading), // 相机方向指向当地东向
        pitch: Cesium.Math.toRadians(fields.pitch), // 再将相机方向转向地心,此时Up方向指向当地东向
        roll: fields.roll,
      },
    });
  }
  //设置视角有动画
  flyTo(fields = { lon: 0, lat: 0, zoom: 10000000, heading: 0, pitch: 0, roll: 0, duration: 1 }) {
    let self = this;
    self.map.camera.flyTo({
      duration: fields.fields, //飞行时间
      destination: Cesium.Cartesian3.fromDegrees(fields.lon, fields.lat, fields.zoom), //赤道上空1000km高度
      orientation: {
        heading: Cesium.Math.toRadians(fields.heading), // 相机方向指向当地东向
        pitch: Cesium.Math.toRadians(fields.pitch), // 再将相机方向转向地心,此时Up方向指向当地东向
        roll: fields.roll,
      },
    });
  }
  //添加矢量切片
  addMVTImageryProvider(
    options = {
      style: '',
    }
  ) {
    let mvtImageryProvider = new MVTImageryProvider({
      style: options.style,
      tileSize: 1024,
      mapboxAccessToken: 'pk.eyJ1IjoibHVrYXNtYXJ0aW5lbGxpIiwiYSI6ImNpem85dmhwazAyajIyd284dGxhN2VxYnYifQ.HQCmyhEXZUTz3S98FMrVAQ',
    });
    this.map.scene.globe.baseColor = Cesium.Color.fromCssColorString(options.style.layers[0]['paint']['background-color']);
    this.map.imageryLayers.addImageryProvider(mvtImageryProvider);
  }
  //添加3Dtiles
  async loadCesium3DTileSet(e = {}) {
    let { url: o, id: a = _.uniqueId(), style: l = {}, show: i = !0, customShader: s = void 0, callback } = e;
    // e = this.map.scene.primitives.add(
    //   new Cesium.Cesium3DTileset({
    //     url: o,
    //     show: i,
    //     customShader: s,
    //     shadows: !1,
    //     skipLevelOfDetail: !0,
    //     baseScreenSpaceError: 1024,
    //     maximumScreenSpaceError: 64,
    //     skipScreenSpaceErrorFactor: 16,
    //     skipLevels: 1,
    //     immediatelyLoadDesiredLevelOfDetail: !1,
    //     loadSiblings: !1,
    //     cullWithChildrenBounds: !0,
    //     cullRequestsWhileMoving: !0,
    //     cullRequestsWhileMovingMultiplier: 10,
    //     preloadWhenHidden: !0,
    //     preloadFlightDestinations: !0,
    //     preferLeaves: !0,
    //     maximumMemoryUsage: 1024,
    //     progressiveResolutionHeightFraction: 0.5,
    //     dynamicScreenSpaceErrorDensity: 1,
    //     dynamicScreenSpaceErrorFactor: 4,
    //     dynamicScreenSpaceErrorHeightFalloff: 0.25,
    //     foveatedScreenSpaceError: !0,
    //     foveatedConeSize: 0.1,
    //     foveatedMinimumScreenSpaceErrorRelaxation: 0,
    //     foveatedTimeDelay: 0,
    //     luminanceAtZenith: 0,
    //     backFaceCulling: !0,
    //     debugFreezeFrame: !1,
    //     debugColorizeTiles: !1,
    //     debugWireframe: !1,
    //     debugShowBoundingVolume: !1,
    //     debugShowContentBoundingVolume: !1,
    //     debugShowViewerRequestVolume: !1,
    //     debugShowGeometricError: !1,
    //     debugShowRenderingStatistics: !1,
    //     debugShowMemoryUsage: !1,
    //     debugShowUrl: !1,
    //     dynamicScreenSpaceError: !0,
    //   })
    // );
    const tileset = await Cesium.Cesium3DTileset.fromUrl(o);
    tileset.newFiberId = 'cesiumBuilding';
    this.map.scene.primitives.add(tileset);
    var boundingSphere = tileset.boundingSphere;
    var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
    var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
    var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0);
    var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
    var m = Cesium.Transforms.eastNorthUpToFixedFrame(surface);
    const _scale = Cesium.Matrix4.fromUniformScale(4);
    Cesium.Matrix4.multiply(tileset._root.transform, _scale, m);
    tileset._root.transform = m;
    if (callback) {
      callback(tileset, this.map);
    }
    //不能每个模型都跳一此,首次缩放改为所选的回调
    // this.map.zoomTo(tileset)

    // return (
    //   (e.key = a),
    //   e.readyPromise.then(function (e) {
    //     var t = Cesium.Cartographic.fromCartesian(e.boundingSphere.center),
    //       o = Cesium.Cartesian3.fromRadians(t.longitude, t.latitude, 0);
    //     let a = Cesium.Cartesian3.fromRadians(t.longitude, t.latitude, 0);
    //     t = Cesium.Cartesian3.subtract(a, o, new Cesium.Cartesian3());
    //     (e.modelMatrix = Cesium.Matrix4.fromTranslation(t)),
    //       l.color &&
    //         (e.style = new Cesium.Cesium3DTileStyle({
    //           color: {
    //             conditions: [['true', l.color]],
    //           },
    //         })),
    //       l.isEffects && e.tileVisible.addEventListener(r.modelEffect);
    //   }),
    //   a
    // );
  }
  /**由经纬度拼接geojson
   *
   */
  getgeojson(data) {
    let arr = [];
    if (data.length > 0) {
      for (var i = 0; i < data.length; i++) {
        if (
          data[i].lon != null &&
          data[i].lat != null &&
          data[i].lon != '' &&
          data[i].lat != '' &&
          parseFloat(data[i].lon) > -180 &&
          parseFloat(data[i].lon) < 180 &&
          parseFloat(data[i].lat) > -90 &&
          parseFloat(data[i].lat) < 90
        ) {
          let point = {
            coordinates: [data[i].lon, data[i].lat],
            properties: data[i],
          };
          arr.push(point);
        }
      }
    }
    return {
      type: 'FeatureCollection',
      features: arr.map((item) => {
        let geometry = {
          type: 'Point',
          coordinates: item.coordinates,
        };
        return {
          type: 'Feature',
          geometry,
          properties: item.properties,
        };
      }),
    };
  }
  getWKTtoGeojson(arry) {
    return {
      type: 'FeatureCollection',
      features: arry.map((item) => {
        if (!!item.geometrys) {
          let geometry = WKT.parse(item.geometrys);
          return { type: 'Feature', geometry, properties: item };
        } else {
          let geometry = WKT.parse(item.supplier);
          return { type: 'Feature', geometry, properties: item };
        }
      }),
    };
  }
  //添加geojson   point
  addGeojsonPoint(
    option = {
      id: '',
      data: '',
      icon: '',
      text: '',
      fontSize: '',
      font: 'Source Han Sans CN',
      height: 25,
      width: 25,
      labelOffset: [0, 20],
      imgOffset: [0, 0],
      showBackground: false,
      backgroundColor: '#ff0000',
      fillColor: '#ffffff',
      outlineColor: '',
      outlineWidth: 1,
      show: false,
      style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
      distanceDisplayCondition: [0, 1000000],
    }
  ) {
    const promise = Cesium.GeoJsonDataSource.load(option.data); //读取geojson数据
    promise.then((dataSource) => {
      dataSource.name = option.id;
      this.map.dataSources.add(dataSource);
      const entities = dataSource.entities.values; //获取dataSource中的entitis集合
      for (const item in entities) {
        const entity = entities[item];
        entity.newFiberId = option.id;
        if (option.text !== '') {
          let timer = setInterval(() => {
            if (!entity.properties) {
              return;
            } else {
              entity.name = entity.properties[option.text]._value;
              entity.label.text = entity.name;
              clearInterval(timer);
            }
          });
        }
        entity.billboard = {
          image: option.icon, //修改图片样式
          height: option.height,
          width: option.width,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // //相对于对象的原点(注意是原点的位置)的水平位置
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //相对于对象的原点的垂直位置,BOTTOM时锚点在下,对象在上
          pixelOffset: new Cesium.Cartesian2(option.imgOffset[0], option.imgOffset[1]),
          show: option.show,
          position: entity.position,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            option.distanceDisplayCondition ? option.distanceDisplayCondition[0] : 0,
            option.distanceDisplayCondition ? option.distanceDisplayCondition[1] : 1000000
          ),
        };
        entity.label = {
          text: entity.name, //文字描述
          font: option.fontSize + ' ' + option.font, //字体样式
          fillColor: Cesium.Color.fromCssColorString(option.fillColor), //字体颜色
          backgroundColor: Cesium.Color.fromCssColorString(option.backgroundColor), //背景颜色
          showBackground: option.showBackground, //是否显示背景颜色
          style: option.style, //label样式
          outlineColor: Cesium.Color.fromCssColorString(option.outlineColor),
          outlineWidth: option.outlineWidth, //外轮廓宽度
          pixelOffset: new Cesium.Cartesian2(option.labelOffset[0], option.labelOffset[1]), //偏移
          //eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
          show: option.show,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            option.distanceDisplayCondition ? option.distanceDisplayCondition[0] : 0,
            option.distanceDisplayCondition ? option.distanceDisplayCondition[1] : 1000000
          ),
          // disableDepthTestDistance: Number.POSITIVE_INFINITY, //一个属性,指定从相机到该距离时禁用深度测试的距离
          // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地设置
        };
        this.map.entities.add(entity);
      }
    });
  }
  //添加geojson polyLine
  addGeojsonLine(
    option = {
      id: '',
      data: '',
      text: '',
      fontSize: '',
      font: 'Source Han Sans CN',
      labelOffset: [0, 20],
      showBackground: false,
      backgroundColor: '#ff0000',
      fillColor: '#ffffff',
      outlineColor: '',
      outlineWidth: 1,
      style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
      material: null,
      width: 6,
      distanceDisplayCondition: [0, 1000000],
    }
  ) {
    const promise = Cesium.GeoJsonDataSource.load(option.data); //读取geojson数据
    promise.then((dataSource) => {
      dataSource.name = option.id;
      this.map.dataSources.add(dataSource);
      const entities = dataSource.entities.values; //获取dataSource中的entitis集合
      for (const item in entities) {
        const entity = entities[item];
        entity.newFiberId = option.id;
        setTimeout(() => {
          if (typeof entity === 'function') return;
          entity.polyline.material = option.material
            ? option.material
            : !!entity.properties
            ? Cesium.Color.fromCssColorString(entity.properties.color._value).withAlpha(0.6)
            : '';
          entity.polyline.width = option.width;
          entity.polyline.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(
            option.distanceDisplayCondition ? option.distanceDisplayCondition[0] : 0,
            option.distanceDisplayCondition ? option.distanceDisplayCondition[1] : 1000000
          );
          entity.label = {
            text: option.text, //文字描述
            font: option.fontSize + ' ' + option.font, //字体样式
            fillColor: Cesium.Color.fromCssColorString(option.fillColor), //字体颜色
            backgroundColor: Cesium.Color.fromCssColorString(option.backgroundColor), //背景颜色
            showBackground: option.showBackground, //是否显示背景颜色
            style: option.style, //label样式
            outlineColor: Cesium.Color.fromCssColorString(option.outlineColor),
            outlineWidth: option.outlineWidth, //外轮廓宽度
            verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
            pixelOffset: new Cesium.Cartesian2(option.labelOffset[0], option.labelOffset[1]), //偏移
            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 20000000.0),
            scaleByDistance: new Cesium.NearFarScalar(1000, 1, 20000000, 1.5),
            // eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
            disableDepthTestDistance: Number.POSITIVE_INFINITY, //一个属性,指定从相机到该距离时禁用深度测试的距离
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地设置
          };
          this.map.entities.add(entity);
        }, 100);
      }
    });
  }
  //添加geojson polygon
  addGeojsonPolygon(
    option = {
      id: '',
      data: '',
      text: '',
      fontSize: '',
      font: 'Source Han Sans CN',
      labelOffset: [0, 20],
      showBackground: false,
      backgroundColor: '#ff0000',
      fillColor: '#ffffff',
      outlineColor: '',
      outlineWidth: 1,
      style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE  Cesium.LabelStyle.OUTLINE
      material: null,
      width: 6,
      strokeColor: '#ffffff',
      groundHeight: 0,
      distanceDisplayCondition: [0, 1000000],
    }
  ) {
    const promise = Cesium.GeoJsonDataSource.load(option.data, {}); //读取geojson数据
    promise.then((dataSource) => {
      dataSource.name = option.id;
      this.map.dataSources.add(dataSource);
      const entities = dataSource.entities.values; //获取dataSource中的entitis集合
      for (const item in entities) {
        const entity = entities[item];
        entity.newFiberId = option.id;
        setTimeout(() => {
          if (typeof entity === 'function') return;
          entity.polygon.material =
            option.material !== null
              ? option.material
              : !!entity.properties
              ? Cesium.Color.fromCssColorString(entity.properties.color._value).withAlpha(0.2)
              : '';
          entity.polygon.outline = false;
          entity.polygon.outlineColor = Cesium.Color.fromCssColorString(entity.properties.color._value);
          entity.polygon.height = option.groundHeight;
          entity.polygon.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(
            option.distanceDisplayCondition ? option.distanceDisplayCondition[0] : 0,
            option.distanceDisplayCondition ? option.distanceDisplayCondition[1] : 1000000
          );
          entity.label = {
            text: option.text, //文字描述
            font: option.fontSize + ' ' + option.font, //字体样式
            fillColor: Cesium.Color.fromCssColorString(option.fillColor), //字体颜色
            backgroundColor: Cesium.Color.fromCssColorString(option.backgroundColor), //背景颜色
            showBackground: option.showBackground, //是否显示背景颜色
            style: option.style, //label样式
            outlineColor: Cesium.Color.fromCssColorString(option.outlineColor),
            outlineWidth: option.outlineWidth, //外轮廓宽度
            verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
            pixelOffset: new Cesium.Cartesian2(option.labelOffset[0], option.labelOffset[1]), //偏移
            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 20000000.0),
            scaleByDistance: new Cesium.NearFarScalar(1000, 1, 20000000, 1.5),
            // eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
            disableDepthTestDistance: Number.POSITIVE_INFINITY, //一个属性,指定从相机到该距离时禁用深度测试的距离
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地设置
          };
          this.map.entities.add(entity);
        }, 100);
      }
    });
  }
  //添加动态水面
  dynamicWaterToMap(geojson, waterImg) {
    geojson.features.forEach((feature) => {
      let coordinatesArry = feature.geometry.coordinates.flat().flat();
      let instance = new Cesium.GeometryInstance({
        id: 'dynamicWater',
        geometry: new Cesium.PolygonGeometry({
          polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(coordinatesArry)),
        }),
      });
      let primitive = new Cesium.Primitive({
        geometryInstances: instance, //可以是实例数组
        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: waterImg,
                frequency: 1000.0,
                animationSpeed: 0.1,
                amplitude: 20,
                specularIntensity: 10,
              },
            },
          }),
        }),
      });

      // 将图元添加到集合
      this.map.scene.primitives.add(primitive);
    });
  }
  //添加geoserver wms
  addGeoserverWMS(
    option = {
      url: '',
      layerId: '',
      id: '',
    }
  ) {
    let provider = new Cesium.WebMapServiceImageryProvider({
      url: option.url,
      layers: option.layerId,
      newFiberId: option.id,
      parameters: {
        service: 'WMS',
        format: 'image/png',
        transparent: true,
      },
    });
    this.map.imageryLayers.addImageryProvider(provider);
  }
  //构造抛物线
  parabolaFlowInit(option = { id: '', startPosition: '', endPosition: '', height: '', color: '', width: '' }) {
    let _siglePositions = parabola(option.startPosition, option.endPosition, option.height);
    let polyline = {
      positions: _siglePositions,
      width: option.width,
      material: new Cesium.LineFlowMaterialProperty({
        color: Cesium.Color.fromCssColorString(option.color),
        speed: 5,
        percent: 0.5,
        gradient: 0.01,
      }),
    };
    // this.map.entities.add({
    //   polyline: {
    //     width: option.width,
    //     newFiberId: option.id,
    //     positions: _siglePositions,
    //     material: Cesium.Color.fromCssColorString(option.color1),
    //   },
    // });
    this.map.entities.add({
      polyline: polyline,
      newFiberId: option.id,
    });
    function parabola(startPosition, endPosition, height = 0, count = 50) {
      //方程 y=-(4h/L^2)*x^2+h h:顶点高度 L:横纵间距较大者
      let result = [];
      height = Math.max(+height, 100);
      count = Math.max(+count, 50);
      let diffLon = Math.abs(startPosition[0] - endPosition[0]);
      let diffLat = Math.abs(startPosition[1] - endPosition[1]);
      let L = Math.max(diffLon, diffLat);
      let dlt = L / count;
      if (diffLon > diffLat) {
        //base on lon
        let delLat = (endPosition[1] - startPosition[1]) / count;
        if (startPosition[0] - endPosition[0] > 0) {
          dlt = -dlt;
        }
        for (let i = 0; i < count; i++) {
          let h = height - (Math.pow(-0.5 * L + Math.abs(dlt) * i, 2) * 4 * height) / Math.pow(L, 2);
          let lon = startPosition[0] + dlt * i;
          let lat = startPosition[1] + delLat * i;
          let point = new Cesium.Cartesian3.fromDegrees(lon, lat, h);
          result.push(point);
        }
      } else {
        //base on lat
        let delLon = (endPosition[0] - startPosition[0]) / count;
        if (startPosition[1] - endPosition[1] > 0) {
          dlt = -dlt;
        }
        for (let i = 0; i < count; i++) {
          let h = height - (Math.pow(-0.5 * L + Math.abs(dlt) * i, 2) * 4 * height) / Math.pow(L, 2);
          let lon = startPosition[0] + delLon * i;
          let lat = startPosition[1] + dlt * i;
          let point = new Cesium.Cartesian3.fromDegrees(lon, lat, h);
          result.push(point);
        }
      }
      return result;
    }
  }
  //点击事件
  mapClickEvent(callback) {
    //点击地图事件
    let handler = new Cesium.ScreenSpaceEventHandler(this.map.scene.canvas);
    handler.setInputAction((click) => {
      // 屏幕坐标转世界坐标——关键点
      let ellipsoid = this.map.scene.globe.ellipsoid;
      let cartesian = this.map.camera.pickEllipsoid(click.position, ellipsoid);

      if (cartesian) {
        //判断点击的是否是地球
        //将笛卡尔坐标转换为地理坐标
        let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        //将弧度转为度的十进制度表示
        let lon = Cesium.Math.toDegrees(cartographic.longitude);
        let lat = Cesium.Math.toDegrees(cartographic.latitude);
        let pick = this.map.scene.pick(click.position);
        if (Cesium.defined(pick) && pick.id.id) {
          let position = cartesian;
          let point = [lon, lat];
          let feature = pick.id;
          if (typeof callback === 'function') callback(position, point, feature);
        }
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }
  //创建弹窗
  createPopup(option = { element: '', position: '' }) {
    let self = this;
    let position = Cesium.Cartesian3.fromDegrees(option.position[0], option.position[1], option.position[2]);
    let bubble = document.getElementById(option.element);
    let winpos = self.map.scene.cartesianToCanvasCoordinates(position);
    let poph = bubble.offsetHeight;
    bubble.style.left = winpos.x + 'px';
    bubble.style.top = winpos.y - poph + 'px';
    //self.map.scene.postRender.addEventListener(function (e) {});

    //相机移动开始事件
    // this.map.scene.camera.moveStart.addEventListener(() => {
    this.removeHandler = this.map.scene.postRender.addEventListener(() => {
      if (position) {
        winpos = self.map.scene.cartesianToCanvasCoordinates(position);
        bubble = document.getElementById(option.element);
        if (!bubble) return;
        poph = bubble.offsetHeight;
        bubble.style.left = winpos.x + 'px';
        bubble.style.top = winpos.y - poph + 'px';
      }
    });
    //});
    //相机移动结束事件
    // this.map.scene.camera.moveEnd.addEventListener(() => {
    //   console.log('end');
    //   this.removeHandler.call();
    // });
  }
  setVisibility(id, visible) {
    let selectedLayer = this.map.entities.values.filter((item) => item.newFiberId == id);
    if (!selectedLayer.length) return;
    selectedLayer.forEach((entity) => {
      entity.show = visible;
      if (entity.billboard) {
        entity.billboard.show._value = visible;
      }
      if (entity.label) {
        entity.label.show._value = visible;
      }
    });
  }
  removeLayer(id) {
    let selectedLayer = this.map.entities.values.filter((item) => item.newFiberId == id);
    if (!selectedLayer.length) return;
    selectedLayer.forEach((entity) => {
      this.map.entities.remove(entity);
    });
    let selectedSource = this.map.dataSources.getByName(id);
    if (!selectedSource.length) return;
    this.map.dataSources.remove(selectedSource[0]);
  }
}