@vtx/cs-map/lib/three-line-layer/ThreeLineLayer.js

React components for Vortex

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _cesium = require("cesium");
var _transformRgb = _interopRequireDefault(require("../_util/transformRgb"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
var glsl = "\n  czm_material czm_getMaterial(czm_materialInput materialInput) {\n    czm_material material = czm_getDefaultMaterial(materialInput);\n    vec2 st = materialInput.st;\n    // vec2 st = materialInput.st * repeat;\n    vec4 colorImage = texture2D(image, vec2(fract((st.s - speed * czm_frameNumber * 0.001)), st.t));\n    material.alpha = colorImage.a;\n    material.diffuse = colorImage.rgb;\n    return material;\n  }";

// 创建圆形
function computeCircle(radius) {
  var positions = [];
  for (var i = 0; i < 360; i++) {
    var radians = _cesium.Math.toRadians(i);
    positions.push(new _cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
  }
  return positions;
}

// 创建方形
function computeSquare(size) {
  return [new _cesium.Cartesian2(-size, -size),
  // 左上角
  new _cesium.Cartesian2(size, -size),
  // 右上角
  new _cesium.Cartesian2(size, size),
  // 右下角
  new _cesium.Cartesian2(-size, size) // 左下角
  ];
}

var getMultiPoints = function getMultiPoints(data) {
  var points = {};
  data.map(function (first) {
    var first_start = first.start.join(',');
    var first_end = first.end.join(',');
    data.map(function (two) {
      var two_start = two.start.join(',');
      var two_end = two.end.join(',');
      var key, value;
      if (first_start === two_start && first_end !== two_end) {
        key = first_start;
        value = [first.end, first.start, two.end];
      } else if (first_start === two_end && first_end !== two_start) {
        key = first_start;
        value = [first.end, first.start, two.start];
      } else if (first_end === two_start && first_start !== two_end) {
        key = first_end;
        value = [first.start, first.end, two.end];
      } else if (first_end === two_end && first_start !== two_start) {
        key = first_end;
        value = [first.start, first.end, two.start];
      }
      if (key && value) {
        if (points[key]) {
          points[key].push(value);
        } else {
          points[key] = [value];
        }
      }
    });
  });
  return points;
};
function createGradientImage(canvasId, startColor, endColor) {
  // 获取canvas元素
  var canvas = document.createElement('canvas');

  // 设置canvas的尺寸
  canvas.width = 512;
  canvas.height = 32;

  // 获取绘图上下文
  var ctx = canvas.getContext('2d');

  // 创建一个线性渐变
  // 假设我们想要从左到右的渐变，你也可以根据需要调整渐变的方向
  var gradient = ctx.createLinearGradient(0, 0, 512, 0);

  // 设置渐变的起始颜色和结束颜色
  // 如果startColor是'transparent'，则直接使用，否则你可能需要转换它
  // 这里我们假设startColor已经是有效的CSS颜色字符串，或者你可以添加转换逻辑
  gradient.addColorStop(0, startColor || 'transparent'); // 开始是透明的
  gradient.addColorStop(1, endColor); // 结束是传入的色值

  // 使用渐变填充整个canvas
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  return canvas.toDataURL();
}
var ThreeLineLayer = /*#__PURE__*/function () {
  function ThreeLineLayer(options) {
    var _this$data;
    _classCallCheck(this, ThreeLineLayer);
    var _options$show = options.show,
      show = _options$show === void 0 ? true : _options$show;
    this.map = options.map;

    // 图层标识
    this.key = options.key;

    // 图层名称
    this.name = options.name;

    // 标签字段
    this.labelField = options.labelField;

    // 模版内容
    this.template = options.template;

    // 图例
    this.legend = options.legend;

    // 图层控制
    this.layerControl = options.layerControl;

    // 取消气泡
    this.cancelPopup = options.cancelPopup;

    // 气泡模板
    this.tipTemplate = options.tipTemplate;

    // 仅展示
    this.viewOnly = options.viewOnly;
    this.data = options.data;
    this.color = options.color;
    this.image = options.image;
    this.primitives = [];
    this.show = show;
    if ((_this$data = this.data) !== null && _this$data !== void 0 && _this$data.length) {
      this.loadData(this.data);
    }
  }
  _createClass(ThreeLineLayer, [{
    key: "show",
    set: function set(value) {
      var _this$primitives;
      if ((_this$primitives = this.primitives) !== null && _this$primitives !== void 0 && _this$primitives.length) {
        this.primitives.map(function (primitive) {
          primitive.show = value;
        });
      }
    }
  }, {
    key: "loadData",
    value: function loadData(data) {
      var _this = this,
        _this$loaded;
      this.data = data;
      var map = this.map;
      var show = this.show;
      this.destroy();
      this.primitives = [];
      var colors = {};
      var images = {};

      // getMultiPoints(data);

      data.map(function (item) {
        var start = item.start,
          end = item.end,
          radius = item.radius;
        var positions = item.data ? _toConsumableArray(item.data.flat(Infinity)) : [start[0], start[1], start[2] || 0, end[0], end[1], end[2] || 0];
        var color_str = item.color || _this.color || '#0080ff';
        var image_str = item.image || _this.image;
        if (image_str) {
          // 缓存颜色
          images[image_str] = images[image_str] || {
            item: item,
            line_instances: [],
            data: [],
            ima: image_str
          };

          // 缓存颜色对应的数据
          images[image_str].line_instances.push(new _cesium.GeometryInstance({
            geometry: new _cesium.PolylineVolumeGeometry({
              polylinePositions: _cesium.Cartesian3.fromDegreesArrayHeights(positions),
              vertexFormat: _cesium.VertexFormat.DEFAULT,
              shapePositions: computeCircle(radius || 1.0)
            }),
            id: item.id
          }));
          images[image_str].data.push(item);
        } else {
          // 缓存颜色
          colors[color_str] = colors[color_str] || {
            item: item,
            line_instances: [],
            data: [],
            color: color_str
          };

          // 缓存颜色对应的数据
          colors[color_str].line_instances.push(new _cesium.GeometryInstance({
            geometry: new _cesium.PolylineVolumeGeometry({
              polylinePositions: _cesium.Cartesian3.fromDegreesArrayHeights(positions),
              vertexFormat: _cesium.VertexFormat.DEFAULT,
              shapePositions: computeCircle(radius || 1.0)
            }),
            id: item.id
          }));
          colors[color_str].data.push(item);
        }
      });
      for (var image in images) {
        var _images$image = images[image],
          ima = _images$image.ima,
          line_instances = _images$image.line_instances,
          _data = _images$image.data;
        var line = new _cesium.Primitive({
          geometryInstances: line_instances,
          show: show,
          appearance: new _cesium.MaterialAppearance({
            flat: false,
            material: new _cesium.Material({
              strict: false,
              fabric: {
                materials: {
                  diffuseMaterial: {
                    type: 'DiffuseMap',
                    uniforms: {
                      image: ima,
                      repeat: new _cesium.Cartesian2(10.0, 2.0) // 设置水平和垂直方向上的重复次数
                    }
                  }
                },

                components: {
                  diffuse: 'diffuseMaterial.diffuse'
                }
              },
              minificationFilter: _cesium.TextureMinificationFilter.LINEAR,
              magnificationFilter: _cesium.TextureMagnificationFilter.LINEAR
            })
          }),
          modelMatrix: _cesium.Matrix4.IDENTITY,
          vertexCacheOptimize: false,
          interleave: false,
          compressVertices: true,
          releaseGeometryInstances: true,
          allowPicking: true,
          cull: true,
          asynchronous: true,
          debugShowBoundingVolume: false,
          shadows: _cesium.ShadowMode.DISABLED
        });
        this.setAttribute(line, _data);
        map.scene.primitives.add(line);
        this.primitives.push(line);
      }
      for (var color_str in colors) {
        var _colors$color_str = colors[color_str],
          color = _colors$color_str.color,
          _line_instances = _colors$color_str.line_instances,
          startColor = _colors$color_str.startColor,
          endColor = _colors$color_str.endColor,
          _data2 = _colors$color_str.data;
        // 颜色转换
        var _startColor = startColor || (0, _transformRgb["default"])(color, 0.2);
        var _endColor = endColor || (0, _transformRgb["default"])(color, 1);
        var _image = createGradientImage(color_str, _startColor, _endColor);
        var _line = new _cesium.Primitive({
          geometryInstances: _line_instances,
          show: show,
          appearance: new _cesium.MaterialAppearance({
            flat: false,
            material: new _cesium.Material({
              strict: false,
              fabric: {
                uniforms: {
                  image: _image,
                  speed: 5,
                  repeat: new _cesium.Cartesian2(1.0, 0.0) // 设置水平和垂直方向上的重复次数
                },

                source: glsl
              },
              translucent: function translucent() {
                return true;
              },
              minificationFilter: _cesium.TextureMinificationFilter.LINEAR,
              magnificationFilter: _cesium.TextureMagnificationFilter.LINEAR
            })
          }),
          modelMatrix: _cesium.Matrix4.IDENTITY,
          vertexCacheOptimize: false,
          interleave: false,
          compressVertices: true,
          releaseGeometryInstances: true,
          allowPicking: true,
          cull: true,
          asynchronous: true,
          debugShowBoundingVolume: false,
          shadows: _cesium.ShadowMode.DISABLED
        });
        this.setAttribute(_line, _data2);
        map.scene.primitives.add(_line);
        this.primitives.push(_line);
      }
      (_this$loaded = this.loaded) === null || _this$loaded === void 0 || _this$loaded.call(this, this.primitives);
    }
  }, {
    key: "setAttribute",
    value: function setAttribute(primitive, data) {
      // 图层标识
      primitive.key = this.key;

      // 数据
      primitive.data = data;

      // 图层名称
      primitive.name = this.name;

      // 标签字段
      primitive.labelField = this.labelField;

      // 模版内容
      primitive.template = this.template;

      // 图例
      primitive.legend = this.legend;

      // 图层控制
      primitive.layerControl = this.layerControl;

      // 取消气泡
      primitive.cancelPopup = this.cancelPopup;

      // 气泡模板
      primitive.tipTemplate = this.tipTemplate;

      // 仅展示
      primitive.viewOnly = this.viewOnly;
    }
  }, {
    key: "destroy",
    value: function destroy() {
      var _this$primitives2;
      var map = this.map;
      if ((_this$primitives2 = this.primitives) !== null && _this$primitives2 !== void 0 && _this$primitives2.length) {
        this.primitives.map(function (primitive) {
          map.scene.primitives.remove(primitive);
        });
        this.primitives = null;
      }
    }
  }]);
  return ThreeLineLayer;
}();
var _default = exports["default"] = ThreeLineLayer;
//# sourceMappingURL=ThreeLineLayer.js.map