csk-gis-frame-work 4.0.0

package/mapboxgl/js/three/ThreeGltfProvider.js

@@ -0,0 +1,245 @@
+import mapboxgl from "@cgcs2000/mapbox-gl";
+
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
+
+/**
+ * 定义GLTF模型提供类
+ *
+ * @alias ThreeGltfProvider
+ * @constructor
+ *
+ * @param options -GLTF选项
+ */
+function ThreeGltfProvider(options) {
+  this._map = options.map;
+  this._url = options.url;
+  this._lonLat = options.origin || [];
+  this._alt = options.alt || 0;
+
+  this._draco = options.draco || false;
+
+  this._layerId = undefined;
+
+  // 初始化转换参数
+  this._initTransform();
+}
+
+/**
+ * 设置模型原点
+ * @param {Number} lon -经度
+ * @param {Number} lat -纬度
+ * @param {Number} alt -高程
+ */
+ThreeGltfProvider.prototype.setOrigin = function (lon, lat, alt = 0) {
+  // parameters to ensure the model is georeferenced correctly on the map
+  this._lonLat = [lon, lat];
+  this._alt = alt;
+
+  this._initTransform();
+}
+
+/**
+ * 创建自定义图层
+ *
+ * @returns {String} 图层Id
+ */
+ThreeGltfProvider.prototype.loadLayer = function (id) {
+  let modelTransform = this._transform;
+  let url = this._url;
+  let draco = this._draco;
+
+  let layerId = id || 'model_gltf-default';
+  this._layerId = layerId;
+
+  // 移除图层
+  this.removeLayer();
+
+  const mouse = new THREE.Vector4(-1000, -1000, 1, 1);
+  // configuration of the custom layer for a 3D model per the CustomLayerInterface
+  let customLayer = {
+    id: layerId,
+    type: "custom",
+    renderingMode: "3d",
+    onAdd: function (map, gl) {
+      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
+      this.scene = new THREE.Scene();
+
+      // create two three.js lights to illuminate the model
+      var directionalLight = new THREE.DirectionalLight(0xffffff);
+      directionalLight.position.set(0, -50, 100).normalize();
+      this.scene.add(directionalLight);
+
+      var directionalLight2 = new THREE.DirectionalLight(0xffffff);
+      directionalLight2.position.set(0, 50, 100).normalize();
+      this.scene.add(directionalLight2);
+
+      // use the three.js GLTF loader to add the 3D model to the three.js scene
+      var loader = new GLTFLoader();
+      if (draco) {
+        var dracoLoader = new DRACOLoader();
+        dracoLoader.setDecoderPath('../static/draco/gltf/');//设置解压库文件路径
+        dracoLoader.setDecoderConfig({ type: 'js' });
+
+        loader.setDRACOLoader(dracoLoader);
+      }
+      loader.load(url, function (gltf) {
+        gltf.scene.traverse(function (child) {
+          if (child.isMesh) {
+            child.material.emissive = child.material.color;
+            child.material.emissiveMap = child.material.map;
+          }
+        });
+        this.scene.add(gltf.scene);
+      }.bind(this)
+      );
+
+      this.map = map;
+
+      // use the Mapbox GL JS map canvas for three.js
+      this.renderer = new THREE.WebGLRenderer({
+        canvas: map.getCanvas(),
+        context: gl,
+        antialias: true, //设置抗锯齿
+        alpha: true,     //背景透明
+        logarithmicDepthBuffer: true
+      });
+
+      this.renderer.autoClear = false;
+
+      this.raycaster = new THREE.Raycaster();
+      // 添加click事件
+      this.renderer.domElement.addEventListener('click', (e) => {
+        e.preventDefault();
+        mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
+        mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
+
+        // 计算物体和射线的焦点
+        const intersects = this.raycaster.intersectObjects(this.scene.children, true);
+        if (intersects.length > 0) {
+          //console.log(intersects);
+        }
+      });
+    },
+
+    render: function (gl, matrix) {
+      var rotationX = new THREE.Matrix4().makeRotationAxis(
+        new THREE.Vector3(1, 0, 0),
+        modelTransform.rotateX
+      );
+      var rotationY = new THREE.Matrix4().makeRotationAxis(
+        new THREE.Vector3(0, 1, 0),
+        modelTransform.rotateY
+      );
+      var rotationZ = new THREE.Matrix4().makeRotationAxis(
+        new THREE.Vector3(0, 0, 1),
+        modelTransform.rotateZ
+      );
+
+      var m = new THREE.Matrix4().fromArray(matrix);
+      var l = new THREE.Matrix4()
+        .makeTranslation(
+          modelTransform.translateX,
+          modelTransform.translateY,
+          modelTransform.translateZ
+        )
+        .scale(
+          new THREE.Vector3(
+            modelTransform.scale,
+            -modelTransform.scale,
+            modelTransform.scale
+          )
+        )
+        .multiply(rotationX)
+        .multiply(rotationY)
+        .multiply(rotationZ);
+
+      this.camera.projectionMatrix.elements = matrix;
+      this.camera.projectionMatrix = m.multiply(l);
+      this.renderer.state.reset();
+
+      const freeCamera = this.map.getFreeCameraOptions();
+      let cameraPosition = new THREE.Vector4(freeCamera.position.x, freeCamera.position.y, freeCamera.position.z, 1);
+      cameraPosition.applyMatrix4(l.invert());
+
+      let direction = mouse.clone().applyMatrix4(this.camera.projectionMatrix.clone().invert());
+      direction.divideScalar(direction.w);
+      this.raycaster.set(cameraPosition, direction.sub(cameraPosition).normalize());
+
+      this.renderer.render(this.scene, this.camera);
+      // 渲染
+      this.map.triggerRepaint();
+    }
+  };
+
+  this._map.addLayer(customLayer, "");
+
+  return layerId;
+}
+
+/**
+ * 图层是否已加载
+ * @returns {Boolean}
+ */
+ThreeGltfProvider.prototype.hasLayer = function () {
+  if (this._layerId && this._map.getLayer(this._layerId)) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * 移除图层
+ */
+ThreeGltfProvider.prototype.removeLayer = function () {
+  if (this.hasLayer()) {
+    this._map.removeLayer(this._layerId);
+  }
+}
+
+/**
+ * 显示/隐藏图层
+ * @param {Boolean} isShow -是否显示
+ */
+ThreeGltfProvider.prototype.showLayer = function (isShow = true) {
+  let visible = isShow ? 'visible' : 'none';
+
+  if (this.hasLayer()) {
+    this._map.setLayoutProperty(this._layerId, 'visibility', visible);
+  }
+}
+
+/**
+ * 初始化转换参数
+ */
+ThreeGltfProvider.prototype._initTransform = function () {
+  let modelOrigin = this._lonLat;
+  let modelAltitude = this._alt;
+  let modelRotate = [Math.PI / 2, 0, 0];
+  //let modelRotate = [0, 0, 0];
+  //let modelScale = 2.41843220338983e-8; // 模型比例
+  var modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
+    modelOrigin,
+    modelAltitude
+  );
+
+  // transformation parameters to position, rotate and scale the 3D model onto the map
+  let modelTransform = {
+    translateX: modelAsMercatorCoordinate.x,
+    translateY: modelAsMercatorCoordinate.y,
+    translateZ: modelAsMercatorCoordinate.z,
+    rotateX: modelRotate[0],
+    rotateY: modelRotate[1],
+    rotateZ: modelRotate[2],
+    /* Since our 3D model is in real world meters, a scale transform needs to be
+     * applied since the CustomLayerInterface expects units in MercatorCoordinates.
+     */
+    scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits(),
+  };
+
+  this._transform = modelTransform;
+}
+
+export default ThreeGltfProvider;

package/mapboxgl/js/utils/CesiumUtils.js

@@ -0,0 +1,109 @@
+import * as Cesium from 'cesium/Cesium';
+
+/**
+ * Cesium工具类
+ */
+const CesiumUtils = {
+
+  /**
+   * 定义CGCS2000椭球体
+   *
+   * @returns {Object}
+   */
+  defineCGCS2000Ellipsolid() {
+    return new Cesium.Ellipsoid(6378137.0, 6378137.0, 6356752.31414035585);
+  },
+
+  /**
+   * 定义CGCS2000投影
+   * @param {Object} cgs2000Ellipsolid -CGCS2000椭球体
+   *
+   * @returns {Object}
+   */
+  defineCGCS2000Projection(cgs2000Ellipsolid) {
+    return new Cesium.GeographicProjection(cgs2000Ellipsolid);
+  },
+
+  /**
+   * 定义CGCS2000切片方案
+   * @param {Object} cgs2000Ellipsolid -CGCS2000椭球体
+   *
+   * @returns {Object}
+   */
+  defineCgcs2000TilingScheme(cgs2000Ellipsolid) {
+    return new Cesium.GeographicTilingScheme({
+      ellipsoid: cgs2000Ellipsolid,
+      rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90),
+      numberOfLevelZeroTilesX: 2,
+      numberOfLevelZeroTilesY: 1
+    });
+  },
+
+  /**
+   * 获取CesiumViewer
+   *
+   * @returns {Object}
+   */
+  getViewer() {
+    return window.viewer;
+  },
+
+  /**
+   * 世界坐标转经纬度
+   * @param {Object} cartesian3 -世界(笛卡尔)坐标
+   * @param {Object} ellipsoid -椭球体
+   *
+   * @returns {Number[]} 经纬度
+   */
+  cartesian3ToLonLat(cartesian3, ellipsoid = null) {
+    let cartographic;
+    // 世界坐标转地理坐标(弧度)
+    if (ellipsoid) {
+      cartographic = ellipsoid.cartesianToCartographic(cartesian3);
+    } else {
+      cartographic = Cesium.Cartographic.fromCartesian(cartesian3)
+    }
+
+    // 地理坐标(弧度)转经纬度
+    let lon = Cesium.Math.toDegrees(cartographic.longitude);
+    let lat = Cesium.Math.toDegrees(cartographic.latitude);
+    let alt = cartographic.height;
+
+    return [lon, lat, alt];
+  },
+
+  /**
+   * 设置视点
+   * @param {Object} viewer
+   * @param {Number[]} lonLat -经纬度([longitude, latitude, altitude])
+   * @param {Number} orientation -方位(同bearing)([heading, pitch, roll])
+   *
+   * @summary<参数orientation内的值均为°，其中heading同bearing>
+   */
+  setView(lonLat, orientation) {
+    let viewer = this.getViewer();
+
+    // 摄像机位置: 经度、纬度、高度
+    let longitude = lonLat[0];
+    let latitude = lonLat[1];
+    let altitude = lonLat.length > 2 ? lonLat[2] : 0;
+    let initialPosition = new Cesium.Cartesian3.fromDegrees(longitude,latitude,altitude);
+
+    // 飞行方位：方位角、俯仰角、翻滚角
+    let heading = orientation[0];
+    let pitch = orientation[1];
+    let roll = orientation.length > 2 ? orientation[2] : 0;
+    let initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(heading, pitch, roll)
+
+    viewer.scene.camera.setView({
+      destination: initialPosition,
+      orientation: {
+        heading: initialOrientation.heading,
+        pitch: initialOrientation.pitch,
+        roll: initialOrientation.roll,
+      },
+    });
+  }
+};
+
+export default CesiumUtils;

package/mapboxgl/js/utils/ColorUtils.js

@@ -0,0 +1,48 @@
+import DataUtils from "./DataUtils";
+
+/**
+ * 颜色工具类
+ */
+const ColorUtils = {
+  /**
+   * 16进制颜色转RGB
+   * @param {String} hex -16进制颜色字符串
+   */
+  toRgb(hex) {
+  },
+
+  /**
+   * RGB转16进制颜色
+   * @param {String} RGB -RGB颜色字符串
+   */
+  toHex(rgb) {
+  },
+
+  /**
+   * 16进制颜色转数组
+   * @param {String} hex -16进制颜色字符串
+   */
+  hexToArray(hex) {
+    let color = hex.replace(/\s/g, '');
+
+    //#rrggbbaa
+    let rrggbbaaMatcher = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i,
+
+    matches = rrggbbaaMatcher.exec(color);
+    if (matches !== null) {
+      let red = parseInt(matches[1], 16);
+      let green = parseInt(matches[2], 16);
+      let blue = parseInt(matches[3], 16);
+      // 透明度
+      if (matches.length > 3) {
+        let alpha = parseInt(DataUtils.default(matches[4], 'f'), 16) / 15.0;
+
+        return [red, green, blue, alpha];
+      }
+
+      return [red, green, blue];
+    }
+  }
+};
+
+export default ColorUtils;

package/mapboxgl/js/utils/CommonUtils.js

@@ -0,0 +1,65 @@
+/**
+ * 通用方法工具类
+ */
+const CommonUtils = {
+  /**
+   * 数组转字符串
+   * @param {Array} arr -数组
+   *
+   * @return {String}
+   */
+  array2String(arr) {
+    let str = "";
+
+    arr.forEach((item) => {
+      str += item.toString() + ",";
+    });
+    if (str.length > 1) {
+      str = str.substring(0, str.length - 1);
+    }
+
+    return str;
+  },
+
+  /**
+   * ID数组转字符串
+   * @param {Array} arr -数组
+   *
+   * @summery <arr参数：[{id: id, name: name}]>
+   *
+   * @return {String}
+   */
+  ids2String(arr) {
+    let str = "";
+
+    arr.forEach((item) => {
+      str += item.id.toString() + ",";
+    });
+    if (str.length > 1) {
+      str = str.substring(0, str.length - 1);
+    }
+
+    return str;
+  },
+
+  /**
+   * 字符串转SQL字符串
+   * @param {String} str -字符串
+   *
+   * @return {String}
+   */
+  str2Sqlstr(str) {
+    let sqlStr = "";
+
+    str.split(',').forEach((item) => {
+      sqlStr += "'" + item + "',";
+    });
+    if (sqlStr.length > 1) {
+      sqlStr = sqlStr.substring(0, sqlStr.length - 1);
+    }
+
+    return sqlStr;
+  }
+}
+
+export default CommonUtils;

package/mapboxgl/js/utils/DataUtils.js

@@ -0,0 +1,138 @@
+/**
+ * 数据定义工具类
+ */
+const DataUtils = {
+  /**
+   * 定义空对象作为默认值
+   * @type {Object}
+   */
+  OBJECT_EMPTY: Object.freeze({}),
+
+  /**
+   * 未定义值
+   * @type {Number}
+   */
+  VALUE_UNDEF: -99999.0,
+
+  /**
+   * 值精度
+   * @type {Number}
+   */
+  VALUE_DEVIATE: 0.0000001,
+
+  PI: Math.PI,
+  FACTOR_RAD: Math.PI / 180.0, // 弧度与度的比例因子
+  FACTOR_DEG: 180.0 / Math.PI, // 度与弧度的比例因子
+
+  /**
+   * 返回默认参数
+   *
+   * @function
+   *
+   * @param {*} a
+   * @param {*} b
+   * @returns {*} 如果第一个参数不是undefined，返回第一个，否则返回第二个参数
+   */
+  default(a, b) {
+    return this.isDef(a) ? a : b;
+  },
+
+  /**
+   * 创建UUID
+   *
+   * @returns {String}
+   */
+  uuid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      let r = (Math.random() * 16 | 0)
+      let v = c == 'x' ? r : (r&0x3 | 0x8);
+
+      return v.toString(16);
+    });
+  },
+
+  /**
+   * 判断参数是否定义
+   *
+   * @function
+   *
+   * @param {*} v
+   * @returns {Boolean} true-对象是定义的，false-对象未定义
+   */
+  isDef(v) {
+    return v !== undefined && v !== null;
+  },
+
+  /**
+   * 判断值是否定义
+   */
+  isValDef(val) {
+    return this.isDef(val) &&
+      val instanceof Number &&
+      val !== this.VALUE_UNDEF;
+  },
+
+  /**
+   * 克隆对象
+   *  @param {Object} obj
+   *
+   * @returns {Object}
+   */
+  clone(obj) {
+    if (!obj) return null;
+
+    if (obj.constructor === Date) return new Date(obj);
+    if (obj.constructor === RegExp) return new RegExp(obj);
+    if (obj.constructor !== Object) return obj;
+
+    let newObj = new obj.constructor();
+    for (let key in obj) {
+      let val = obj[key];
+      //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val;
+      newObj[key] = val;
+    }
+
+    return newObj;
+  },
+
+  /**
+   * 格式化日期/时间
+   * @param {String|Date} d -日期(时间)
+   * @param {String} pattern -格式
+   *
+   * @returns {String}
+   */
+  formatDt(d, pattern) {
+    if (!d) return "";
+
+		if (typeof d != "object") {
+			if (/[TZ]/.test(d) == false && /[-]/.test(d)) {
+				// 考虑到浏览器兼容性问题，将yyyy-MM-dd转换成yyyy/MM/dd的格式再进行new Date
+				d = d.replace(/-/g, '/');
+			}
+			d = new Date(d);
+		}
+		pattern = pattern || 'yyyy-MM-dd';
+
+		var y = d.getFullYear().toString(),
+			o = {
+				M: d.getMonth() + 1,
+				d: d.getDate(),
+				h: d.getHours(),
+				m: d.getMinutes(),
+				s: d.getSeconds()
+			};
+		pattern = pattern.replace(/(y+)/ig, function (a, b) {
+			return y.substr(4 - Math.min(4, b.length));
+		});
+		for (var i in o) {
+			pattern = pattern.replace(new RegExp('(' + i + '+)', 'g'), function (a, b) {
+				return (o[i] < 10 && b.length > 1) ? '0' + o[i] : o[i];
+			});
+		}
+
+		return pattern;
+  }
+};
+
+export default DataUtils;