功能添加

suerprisePlus

2024-06-13 28de79b44655118b1deffb5c9a8b06ec2904905b

 src/assets/js/map/layerManage.js

@@ -1,288 +1,344 @@
const layerManage = {
  layerManage: [],
  setAddLayer(res) {
    switch (res.sourceType) {
      // arcgis 影像图
      case "arcgis":
        this.addArcGisLayer(res);
        break;
      //高德地图
      case "gdmap":
        this.addGaoLayer(res);
        break;
      //矢量图
      case "SimpleGraphic":
        this.addSimpleGraphicLayer(res);
        break;
      // 流光线
      case "FlowField":
        this.addFlowFieldLayer(res);
        break;
      // gltf模型
      case "gltf":
        this.addGltfLayer(res);
        break;
      //天地图
      case "tdmap":
        this.addTdMapLayer(res);
        break;
      // 腾讯地图
      case "txmap":
        this.addTxMapLayer(res);
        break;
    }
  },
  addSimpleGraphicLayer(res) {
    switch (res.style.type) {
      case "label":
        this.addLabelSimpleGraphic(res);
        break;
      case "billboard":
        this.addBillboardSimpleGraphic(res);
        break;
      case "polyline":
        this.addPolylineSimpleGraphic(res);
        break;
    }
  },
  setRemoveLayer(res) {
    for (var i = 0; i < this.layerManage.length; i++) {
      var obj = this.layerManage[i];
      if (obj.id === res.id) {
        switch (obj.type) {
          case "label":
          case "billboard":
          case "polyline":
          case "txmap":
          case "tdmap":
          case "arcgis":
          case "gdmap":
            obj.layer.removeFromMap();
            break;
          case "FlowField":
            obj.layer.deleteObject();
            break;
          case "gltf":
            earthCtrl.factory.removeModel(obj.layer);
            break;
        }
        this.layerManage.splice(i, 1);
        i--;
      }
    }
  },
  addTdMapLayer(res) {
    var layer = earthCtrl.factory.createImageryLayer({
      sourceType: "mapworld",
      url: res.urls,
      layers: "tdtBasicLayer",
      style: "default",
      format: "image/jpeg",
      maximumLevel: res.maximumLevel,
      layer: "",
      tileMatrixSetID: "",
    });
    this.layerManage.push({
      id: res.id,
      layer: layer,
      type: "tdmap",
    });
  },
  addTxMapLayer(res) {
    var layer = earthCtrl.factory.createImageryLayer({
      sourceType: "qqmap",
      url: "https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229",
      customTags: {
        sx: function (imageryProvider, x, y, level) {
          return x >> 4;
        },
        sy: function (imageryProvider, x, y, level) {
          return ((1 << level) - y) >> 4;
        },
      },
      tilingScheme: earthCtrl.core.getOffsetTilingScheme(), // 偏移纠正
    });

    this.layerManage.push({
      id: res.id,
      layer: layer,
      type: "txmap",
    });
  },
  addGltfLayer(res) {
    var layer = earthCtrl.factory.createModel({
      name: res.name,
      url: res.urls,
      lon: res.lon,
      lat: res.lat,
      alt: res.height,
      heading: res.heading,
      scale: res.scale,
      minimumPixelSize: 100,
      id: {
        name: "gltf",
      },
    });

    this.layerManage.push({
      id: res.id,
      layer: layer,
      type: "gltf",
    });
  },
  addPolylineSimpleGraphic(res) {
    var style = res.style;
    var std = [];
    for (var i in style.positions) {
      var position = this.getCartographic(style.positions[i]);
      std.push(position.lon, position.lat, position.alt);
    }
    const positions = SmartEarth.Cesium.Cartesian3.fromDegreesArrayHeights(std);

    const layer = earthCtrl.factory.createPolyline({
      name: style.name,
      lineColor: new SmartEarth.Cesium.PolylineGlowMaterialProperty({
        //折线发光材质
        color: SmartEarth.Cesium.Color.fromCssColorString(style.color), //颜色
      }),
      lineWidth: style.width,
      isDepthTest: false,
      clampToGround: false,
      positions: positions,
    });
    this.layerManage.push({
      id: res.id,
      layer: layer,
      type: "polyline",
    });
  },

  addArcGisLayer(res) {
    var layer = earthCtrl.factory.createImageryLayer({
      sourceType: "arcgis",
      url: res.urls,
      enablePickFeatures: false,
    });
    this.layerManage.push({
      id: res.id,
      layer: layer,
      type: "arcgis",
    });
  },
  addFlowFieldLayer(res) {
    var style = res.style;
    var std = [];
    for (var i in res.positions) {
      var position = this.getCartographic(res.positions[i]);
      std.push([position.lon, position.lat]);
    }
    var obj = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "LineString",
            coordinates: std,
          },
          properties: {
            osm_id: "66023824",
            code: 5115,
            fclass: "tertiary",
            name: "",
            ref: "",
            oneway: "B",
            maxspeed: 0,
            layer: 0,
            bridge: "F",
            tunnel: "F",
          },
        },
      ],
    };

    let layer = earthCtrl.factory.createPathLayer({
      url: obj,
      color: "#0033FF", //线的颜色
      width: style.width, //线的宽度
      pointColor: "#FFFFFF", //移动点的颜色
      speed: 0.5,
    });
    this.layerManage.push({
      id: res.id,
      layer: layer,
      type: "FlowField",
    });
  },

  addGaoLayer(res) {
    var layer = earthCtrl.factory.createImageryLayer({
      sourceType: "gdmap",
      url: res.urls,
      minimumLevel: 3,
      maximumLevel: 18,
    });
    this.layerManage.push({
      id: res.id,
      layer: layer,
      type: "gdmap",
    });
  },

  addBillboardSimpleGraphic(res) {
    var style = res.style;
    var position = this.getCartographic(style.position);
    const layer = earthCtrl.factory.createBillboard({
      name: "billboard",
      id: style.id,
      image: style.image,
      width: style.width,
      height: style.height,
      lon: position.lon,
      lat: position.lat,
      alt: position.alt,
      scale: style.scale,
      distanceDisplayCondition: style.distanceDisplayCondition,
    });
    this.layerManage.push({
      id: res.id,
      layer: layer,
      type: "billboard",
    });
  },
  getCartographic(res) {
    var cartographic = Cesium.Cartographic.fromCartesian(res);
    return {
      lon: Cesium.Math.toDegrees(cartographic.longitude),
      lat: Cesium.Math.toDegrees(cartographic.latitude),
      alt: cartographic.height,
    };
  },
  addLabelSimpleGraphic(res) {
    var style = res.style;
    var position = this.getCartographic(style.position);
    var layer = earthCtrl.factory.createLabel({
      name: style.name,
      id: style.id,
      text: style.text,
      font: style.font,
      outlineWidth: 2,
      fillColor: Cesium.Color.fromCssColorString(style.fillColor),
      lon: position.lon,
      lat: position.lat,
      alt: position.alt,
      showBackground: true,
      backgroundColor: Cesium.Color.fromCssColorString(style.backgroundColor),
      scale: style.scale,
      distanceDisplayCondition: style.distanceDisplayCondition,
      clampToGround: true,
    });

    this.layerManage.push({
      id: res.id,
      layer: layer,
      type: "label",
    });
  },
};
export default layerManage;
const layerManage = {

  layerManage: [],

  setAddLayer(res) {

    switch (res.sourceType) {

      // arcgis 影像图

      case "arcgis":

        this.addArcGisLayer(res);

        break;

      //高德地图

      case "gdmap":

        this.addGaoLayer(res);

        break;

      //矢量图

      case "SimpleGraphic":

        this.addSimpleGraphicLayer(res);

        break;

      // 流光线

      case "FlowField":

        this.addFlowFieldLayer(res);

        break;

      // gltf模型

      case "gltf":

        this.addGltfLayer(res);

        break;

      // gltf模型

      case "3DTiles":

        this.add3DTilesLayer(res);

        break;

      //天地图

      case "tdmap":

        this.addTdMapLayer(res);

        break;

      // 腾讯地图

      case "txmap":

        this.addTxMapLayer(res);

        break;

      // 腾讯地图

      case "WMS":

        this.addWMSLayer(res);

        break;

      // 腾讯地图

      case "TMS":

        this.addTMSLayer(res);

        break;

    }

  },

  addSimpleGraphicLayer(res) {

    switch (res.style.type) {

      case "label":

        this.addLabelSimpleGraphic(res);

        break;

      case "billboard":

        this.addBillboardSimpleGraphic(res);

        break;

      case "polyline":

        this.addPolylineSimpleGraphic(res);

        break;

    }

  },

  setRemoveLayer(res) {

    for (var i = 0; i < this.layerManage.length; i++) {

      var obj = this.layerManage[i];

      if (obj.id === res.id) {

        switch (obj.type) {

          case "WMS":

          case "TMS":

          case "label":

          case "billboard":

          case "polyline":

          case "txmap":

          case "tdmap":

          case "arcgis":

          case "gdmap":

            obj.layer.removeFromMap();

            break;

          case "FlowField":

            obj.layer.deleteObject();

            break;

          case "gltf":

            earthCtrl.factory.removeModel(obj.layer);

            break;

          case "3DTiles":

            obj.layer.deleteObject();

            break;

        }

        this.layerManage.splice(i, 1);

        i--;

      }

    }

  },

  addTMSLayer(res) {

    const layer = earthCtrl.factory.createImageryLayer({

      sourceType: "tms",

      url: res.url

    });

    this.layerManage.push({

      id: res.id,

      layer: layer,

      type: "TMS"

    });

  },

  addWMSLayer(res) {

    const layer = earthCtrl.factory.createImageryLayer({

      sourceType: "wms",

      url: res.url,

      layers: "",

      parameters: {

        format: "image/png",

        srs: "EPSG:4326",

        version: 1.3

      }

    });

    this.layerManage.push({

      id: res.id,

      layer: layer,

      type: "WMS"

    });

  },

  addTdMapLayer(res) {

    var layer = earthCtrl.factory.createImageryLayer({

      sourceType: "mapworld",

      url: res.urls,

      layers: "tdtBasicLayer",

      style: "default",

      format: "image/jpeg",

      maximumLevel: res.maximumLevel,

      layer: "",

      tileMatrixSetID: ""

    });

    this.layerManage.push({

      id: res.id,

      layer: layer,

      type: "tdmap"

    });

  },

  addTxMapLayer(res) {

    var layer = earthCtrl.factory.createImageryLayer({

      sourceType: "qqmap",

      url: "https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229",

      customTags: {

        sx: function (imageryProvider, x, y, level) {

          return x >> 4;

        },

        sy: function (imageryProvider, x, y, level) {

          return ((1 << level) - y) >> 4;

        }

      },

      tilingScheme: earthCtrl.core.getOffsetTilingScheme() // 偏移纠正

    });



    this.layerManage.push({

      id: res.id,

      layer: layer,

      type: "txmap"

    });

  },

  add3DTilesLayer(res) {

    const layer = earthCtrl.factory.create3DTilesets({

      url: res.url

    });

    earthCtrl.camera.flyToObj(layer);

    this.layerManage.push({

      id: res.id,

      layer: layer,

      type: "3DTiles"

    });

  },

  addGltfLayer(res) {

    var layer = earthCtrl.factory.createModel({

      name: res.name,

      url: res.urls,

      lon: res.lon,

      lat: res.lat,

      alt: res.height,

      heading: res.heading,

      scale: res.scale,

      minimumPixelSize: 100,

      id: {

        name: "gltf"

      }

    });



    this.layerManage.push({

      id: res.id,

      layer: layer,

      type: "gltf"

    });

  },

  addPolylineSimpleGraphic(res) {

    var style = res.style;

    var std = [];

    for (var i in style.positions) {

      var position = this.getCartographic(style.positions[i]);

      std.push(position.lon, position.lat, position.alt);

    }

    const positions = SmartEarth.Cesium.Cartesian3.fromDegreesArrayHeights(std);



    const layer = earthCtrl.factory.createPolyline({

      name: style.name,

      lineColor: new SmartEarth.Cesium.PolylineGlowMaterialProperty({

        //折线发光材质

        color: SmartEarth.Cesium.Color.fromCssColorString(style.color) //颜色

      }),

      lineWidth: style.width,

      isDepthTest: false,

      clampToGround: false,

      positions: positions

    });

    this.layerManage.push({

      id: res.id,

      layer: layer,

      type: "polyline"

    });

  },



  addArcGisLayer(res) {

    var layer = earthCtrl.factory.createImageryLayer({

      sourceType: "arcgis",

      url: res.urls,

      enablePickFeatures: false

    });

    this.layerManage.push({

      id: res.id,

      layer: layer,

      type: "arcgis"

    });

  },

  addFlowFieldLayer(res) {

    var style = res.style;

    var std = [];

    for (var i in res.positions) {

      var position = this.getCartographic(res.positions[i]);

      std.push([position.lon, position.lat]);

    }

    var obj = {

      type: "FeatureCollection",

      features: [

        {

          type: "Feature",

          geometry: {

            type: "LineString",

            coordinates: std

          },

          properties: {

            osm_id: "66023824",

            code: 5115,

            fclass: "tertiary",

            name: "",

            ref: "",

            oneway: "B",

            maxspeed: 0,

            layer: 0,

            bridge: "F",

            tunnel: "F"

          }

        }

      ]

    };



    let layer = earthCtrl.factory.createPathLayer({

      url: obj,

      color: "#0033FF", //线的颜色

      width: style.width, //线的宽度

      pointColor: "#FFFFFF", //移动点的颜色

      speed: 0.5

    });

    this.layerManage.push({

      id: res.id,

      layer: layer,

      type: "FlowField"

    });

  },



  addGaoLayer(res) {

    var layer = earthCtrl.factory.createImageryLayer({

      sourceType: "gdmap",

      url: res.urls,

      minimumLevel: 3,

      maximumLevel: 18

    });

    this.layerManage.push({

      id: res.id,

      layer: layer,

      type: "gdmap"

    });

  },



  addBillboardSimpleGraphic(res) {

    var style = res.style;

    var position = this.getCartographic(style.position);

    const layer = earthCtrl.factory.createBillboard({

      name: "billboard",

      id: style.id,

      image: style.image,

      width: style.width,

      height: style.height,

      lon: position.lon,

      lat: position.lat,

      alt: position.alt,

      scale: style.scale,

      distanceDisplayCondition: style.distanceDisplayCondition

    });

    this.layerManage.push({

      id: res.id,

      layer: layer,

      type: "billboard"

    });

  },

  getCartographic(res) {

    var cartographic = Cesium.Cartographic.fromCartesian(res);

    return {

      lon: Cesium.Math.toDegrees(cartographic.longitude),

      lat: Cesium.Math.toDegrees(cartographic.latitude),

      alt: cartographic.height

    };

  },

  addLabelSimpleGraphic(res) {

    var style = res.style;

    var position = this.getCartographic(style.position);

    var layer = earthCtrl.factory.createLabel({

      name: style.name,

      id: style.id,

      text: style.text,

      font: style.font,

      outlineWidth: 2,

      fillColor: Cesium.Color.fromCssColorString(style.fillColor),

      lon: position.lon,

      lat: position.lat,

      alt: position.alt,

      showBackground: true,

      backgroundColor: Cesium.Color.fromCssColorString(style.backgroundColor),

      scale: style.scale,

      distanceDisplayCondition: style.distanceDisplayCondition,

      clampToGround: true

    });



    this.layerManage.push({

      id: res.id,

      layer: layer,

      type: "label"

    });

  }

};

export default layerManage;