kengee-data-screen/src/views/AppThreeMap.vue

<script>
export default {
  name: "AppThreeMap",
  label: "3D地图",
  data() {
    return {
      geoMap: null,
      layers: [],
      font: null
    }
  },
  computed: {
    search: v => v.$marketBoard.search
  },
  methods: {
    loadLib() {
      const {$waitFor, THREE, $loadScript} = window
      return $waitFor(THREE).then(() => Promise.all([
        `http://10.0.97.209/presource/datascreen/js/three/js/controls/OrbitControls.js`,
        `http://10.0.97.209/presource/datascreen/js/three/js/renderers/CSS2DRenderer.js`,
        `http://10.0.97.209/presource/datascreen/js/three/js/loaders/FontLoader.js`,
        `http://10.0.97.209/presource/datascreen/js/three/js/geometries/TextGeometry.js`,
        '/presource/datascreen/js/turf.min.js'
      ].map(e => $loadScript('js', e))))
    },
    initMap() {
      const {THREE, d3, axios, TWEEN} = window
      const rootEl = this.$el
      const root = this
      const scale = 4

      class GeoMap {
        constructor() {
          this.cameraPosition = {x: 40, y: 0, z: 40}; // 相机位置
          this.scene = null; // 场景
          this.camera = null; // 相机
          this.renderer = null; // 渲染器
          this.controls = null; // 控制器
          this.mapGroup = new THREE.Group(); // 组
          this.mouse = new THREE.Vector2();
          this.font = null;
          this.tips = new THREE.Group()
        }

        /**
         * @desc 初始化
         * */
        init() {
          this.setScene();
          this.setCamera();
          this.setLight()
          this.setAxes();
          this.setRenderer();
          this.setControl();
          this.makeGround();
          this.getMap('http://10.0.97.209/blade-visual/map/data?id=1456');
          this.addMarkers()
          this.animation();
          this.bindMouseEvent()
        }

        setLight() {
          const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
          this.scene.add(ambientLight);
          const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
          directionalLight.position.set(1, 1, 1).normalize();
          this.scene.add(directionalLight);
        }

        /**
         * @desc 动画循环
         * */
        animation() {
          requestAnimationFrame(this.animation.bind(this));
          TWEEN.update();
          this.controls.update();
          this.renderer.render(this.scene, this.camera);
        }

        /**
         * @desc 获取地图
         * */
        getMap(url) {
          const that = this;
          axios.get(url).then(function (res) {
            if (res.status === 200) {
              const data = res.data;
              that.geoJson = data
              that.setMapData(data)
            }
          })
        }

        /**
         * @desc 绘制地图
         * @params geojson
         * */
        setMapData(data) {
          const that = this, {turf} = window;
          const getLnglat = (arr, cb) => {
            arr?.map(e => {
              if (e.length === 2 && typeof e[0] === 'number' && typeof e[1] === 'number') {
                cb(e)
              } else {
                getLnglat(e, cb)
              }
            })
          }
          let vector3json = [],
              vector3border = []
          const maxBoundaryPoints = turf.union(this.geoJson)
          getLnglat(maxBoundaryPoints.geometry.coordinates, p => {
            const lnglat = that.lnglatToVector3(p);
            const vector3 = new THREE.Vector3(lnglat[0], lnglat[1], lnglat[2]).multiplyScalar(1.2);
            vector3border.push(vector3)
          })
          data.features.forEach(function (features, featuresIndex) {
            const areaItems = features.geometry.coordinates;
            features.properties.cp = that.lnglatToVector3(features.properties.centroid);
            vector3json[featuresIndex] = {
              data: features.properties,
              mercator: []
            };
            areaItems.forEach(function (item, areaIndex) {
              vector3json[featuresIndex].mercator[areaIndex] = [];
              getLnglat(item, cp => {
                const lnglat = that.lnglatToVector3(cp);
                const vector3 = new THREE.Vector3(lnglat[0], lnglat[1], lnglat[2]).multiplyScalar(1.2);
                vector3json[featuresIndex].mercator[areaIndex].push(vector3)
              })
            })
          });
          this.drawMap(vector3json, vector3border)
        }

        /**
         * @desc 绘制图形
         * @param data
         * */
        drawMap(data, border) {
          let that = this;
          this.mapGroup.position.y = 0;
          this.scene.add(that.mapGroup);
          const extrudeSettings = {
            depth: 0.2,
            steps: 1,
            bevelSegments: 0,
            curveSegments: 1,
            bevelEnabled: false,
          };
          const canvas = document.createElement('canvas');
          canvas.width = 256;
          canvas.height = 256;
          const ctx = canvas.getContext('2d');

          const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
          gradient.addColorStop(0, 'rgba(61,127,255,0.35)');
          gradient.addColorStop(1, '#09E2F8');
          // gradient.addColorStop(0, 'rgba(61,127,255,0.01)'); // 结束颜色
          ctx.fillStyle = gradient;
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          const blockMaterial = new THREE.MeshBasicMaterial({
            map: new THREE.CanvasTexture(canvas),
            // side: THREE.DoubleSide,
            transparent: true, wireframe: false
          });
          const lineMaterial = new THREE.LineBasicMaterial({color: '#97CAE6'});
          data.forEach(function (areaData) {
            let areaGroup = new THREE.Group();
            areaGroup.name = 'area';
            areaGroup._groupType = 'areaBlock';
            areaData.mercator.forEach(function (areaItem) {
              // Draw Line
              let lineGeometry = new THREE.BufferGeometry().setFromPoints(areaItem);
              let lineMesh = new THREE.Line(lineGeometry, lineMaterial);
              lineMesh.position.z = 0.201;
              areaGroup.add(lineMesh);
            });
            const {name, cp} = areaData.data
            that.setTips(name, cp[0], cp[1])
            // areaGroup.add(that.tipsSprite(areaData));
            that.mapGroup.add(areaGroup);
          });
          that.mapGroup.add(that.tips)
          const shape = new THREE.Shape(border);
          const areaGeometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
          const mesh = new THREE.Mesh(areaGeometry, blockMaterial);
          that.mapGroup.add(mesh)
          that.mapGroup.scale.set(scale, scale, scale)
          that.mapGroup.position.set(0, 0, 0)
          that.scene.add(that.mapGroup);
        }

        transLayer(item = {}) {
          let {bakeStockAmt, longitude, latitude} = item
          longitude = Number(longitude || 0).toFixed(6);
          latitude = Number(latitude || 0).toFixed(6);
          const markerGeometry = new THREE.CircleGeometry(0.015, 32);
          const markerMaterial = new THREE.MeshBasicMaterial({
            side: THREE.DoubleSide,
            blending: THREE.AdditiveBlending,
            color: bakeStockAmt > 0 ? "#66FFFF" : "#FFD15C",
            depthTest: false,
            transparent: true,
            opacity: 1
          });
          const marker = new THREE.Mesh(markerGeometry, markerMaterial);
          const lnglat = this.lnglatToVector3([longitude, latitude]);
          let v3 = new THREE.Vector3(lnglat[0], lnglat[1], lnglat[2]).multiplyScalar(1.2);
          marker.data = item
          marker.position.set(v3.x, v3.y, 0.201)
          marker.renderOrder = 3
          return marker
        }

        addMarkers() {
          this.markers = new THREE.Group();
          root.layers.map(layer => {
            const marker = this.transLayer(layer)
            this.markers.add(marker)
          })
          this.mapGroup.add(this.markers)
        }

        lnglatToVector3(lnglat = []) {
          if (!this.projection) {
            this.projection = d3.geoMercator().center([113.665412, 34.757975]).scale(100).translate([0.3, 0]);
          }
          const [x, y] = this.projection([lnglat[0], lnglat[1]])
          const z = 0;
          return [y, x, z]
        }

        /**
         * @desc 创建场景
         * */
        setScene() {
          this.scene = new THREE.Scene();
        }

        /**
         * @desc 创建相机
         * */
        setCamera() {
          this.camera = new THREE.PerspectiveCamera(10, rootEl.offsetWidth / rootEl.offsetHeight, 1, 2000);
          this.camera.up.x = 0;
          this.camera.up.y = 0;
          this.camera.up.z = 1;
          this.camera.lookAt(0, 0, 0);
          this.scene.add(this.camera);
        }

        /**
         * @desc 创建渲染器
         * */
        setRenderer() {
          this.renderer = new THREE.WebGLRenderer({antialias: true});
          this.renderer.setPixelRatio(window.devicePixelRatio);
          this.renderer.sortObjects = true; // 渲染顺序
          this.renderer.setClearColor(0xffffff, 0);
          this.renderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight);
          rootEl.appendChild(this.renderer.domElement);

          function onWindowResize() {
            this.camera.aspect = rootEl.offsetWidth / rootEl.offsetHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight);
          }

          rootEl.addEventListener('resize', onWindowResize.bind(this), false);
        }

        /**
         * @desc 创建控制器
         * */
        setControl() {
          this.controls = new THREE.OrbitControls(this.camera, rootEl);
          // this.controls.enableRotate = false
          this.camera.position.set(this.cameraPosition.x, this.cameraPosition.y, this.cameraPosition.z);
        }

        /**
         * @desc 创建一个xyz坐标轴
         * */
        setAxes() {
          const axes = new THREE.AxesHelper(100);
          this.scene.add(axes);
        }

        /**
         * @desc 鼠标 hover 事件
         * */
        makeGround() {
          const material = new THREE.MeshBasicMaterial({opacity: 0.5, transparent: true, color: '#07193D'});
          const geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
          let ground = new THREE.Mesh(geometry, material);
          ground.position.x = 0;
          ground.position.y = 0;
          ground.position.z = -1;
          this.scene.add(ground);
          ground.receiveShadow = true;
          ground.castShadow = true;
        }

        setTips(text, x, y) {
          const textGeometry = new THREE.TextGeometry(text, {
            font: root.font,
            size: 0.04,
            height: 0.02
          });
          textGeometry.center()
          textGeometry.rotateZ(Math.PI / 2)
          textGeometry.rotateY(Math.PI / 4)
          textGeometry.translate(x, y, 0.25)
          const textMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, transparent: true, opacity: 0.8});
          const textMesh = new THREE.Mesh(textGeometry, textMaterial);
          this.tips.add(textMesh)
        }

        bindMouseEvent() {
          const raycaster = new THREE.Raycaster();

          const onPointerMove = (event) => {
            const {clientWidth: width, clientHeight: height} = rootEl;
            this.mouse.x = (event.clientX / width) * 2 - 1; //标准设备横坐标
            this.mouse.y = -(event.clientY / height) * 2 + 1; //标准设备纵坐标
            // const standardVector = new THREE.Vector3(x, y, 0.5); //标准设备坐标
            // //标准设备坐标转世界坐标
            // const worldVector = standardVector.unproject(that.camera);
            // //射线投射方向单位向量(worldVector坐标减相机位置坐标)
            // const ray = worldVector.sub(that.camera.position).normalize();
            // //创建射线投射器对象
            // let raycaster = new THREE.Raycaster(that.camera.position, ray);
            // //返回射线选中的对象
            // let intersects = raycaster.intersectObjects(that.meshList);
            // if (intersects.length) {
            //   if (intersects[0].object.parent && intersects[0].object.parent._groupType === 'areaBlock') {
            //     if (that.selectObject !== intersects[0].object.parent) {
            //       if (that.selectObject) {
            //         transiform(that.selectObject.position, {
            //           x: that.selectObject.position.x,
            //           y: that.selectObject.position.y,
            //           z: 0
            //         }, 100);
            //         transiform(intersects[0].object.parent.position, {
            //           x: intersects[0].object.parent.position.x,
            //           y: intersects[0].object.parent.position.y,
            //           z: 0.8
            //         }, 100);
            //         that.selectObject = intersects[0].object.parent;
            //       } else {
            //         transiform(intersects[0].object.parent.position, {
            //           x: intersects[0].object.parent.position.x,
            //           y: intersects[0].object.parent.position.y,
            //           z: 0.8
            //         }, 100);
            //         that.selectObject = intersects[0].object.parent;
            //       }
            //     }
            //   }
            // }
          }

          const onClick = () => {
            // 创建一个射线投射器
            raycaster.setFromCamera(this.mouse, this.camera);
            console.table(raycaster.ray)
            const intersects = raycaster.intersectObjects(this.markers.children)
            console.log(intersects)
            intersects.forEach(e => {
              if (e.visible) {
                const {$glob} = window
                root.$storeBoard.search.storeCode = marker.data?.storeCode
                $glob.group = '9f299712-5549-413b-a93b-7c3e3b5bfadb'
              }
            })
          }
          rootEl.addEventListener('pointermove', onPointerMove);
          rootEl.addEventListener('click', onClick);
        }
      }

      return new GeoMap()
    },
    getData() {
      const {$http, $waitFor} = window
      const {groupCodeList, currentDate} = this.search
      return $waitFor($http).then(() => $http.post("/data-boot/la/screen/marketBoard/storeReport", {
        groupCodeList, currentDate
      })).then(res => {
        if (res?.data) {
          return this.layers = res.data || []
        }
      })
    }
  },
  watch: {
    search: {
      immediate: true, deep: true, handler() {
        const {$waitFor} = window
        this.getData().then(() => $waitFor(this.geoMap)).then(() => this.geoMap.addMarkers())
      }
    }
  },
  mounted() {
    this.loadLib().then(() => new Promise(resolve => {
      const loader = new THREE.FontLoader();
      loader.load("/presource/datascreen/js/three/fonts/HarmonyOS Sans SC_Regular.json", font => {
        this.font = font
        resolve()
      })
    })).then(() => {
      this.geoMap = this.initMap();
      this.geoMap.init();
    })
  }
}
</script>
<template>
  <section class="AppThreeMap"/>
</template>
<style>
.AppThreeMap {
  width: 100%;
  height: 100%;
}
</style>