devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

three.js实现3d地图，包含散点，地图背景图片（vue）_three.js 3d地图

作者：繁依Fanyi0 | 2024-06-03 02:57:48

赞

踩

three.js 3d地图

效果图

图片资源：

1、下载three.js及d3依赖，我这里使用的是three r153版本

  1. npm i three
  2. npm i d3

2、使用d3将地理坐标转换成坐标轴xy值，在地图区域及边界线加载到场景后，通过包围盒计算完整地图的max和min坐标，再根据max和min的值重新计算每个地图区域的uv坐标，如果不重新计算uv坐标会导致贴图显示异常

  1. this.projection = d3
  2.         .geoMercator()
  3.         .center(this.centerCoordinate)
  4.         .translate([0, 0]);
  5.  
  6.  
  7. // 加载地图背景
  8. const backgroundTexture = new THREE.TextureLoader().load(
  9.   require("@/assets/images/map.png")
  10. );
  11. // 加载地图
  12. let fileLoader = new THREE.FileLoader();
  13. fileLoader.load("/anhui.json", (data) => {
  14.   // 添加地图及边界线
  15.   this.addMapGeometry(data);
  16.   // 重新计算地图uv坐标
  17.   let arr = [];
  18.   let box = new THREE.Box3();
  19.   for (let v of this.map.children) {
  20.     for (let v2 of v.children) {
  21.       // 判断是否为ExtrudeGeometry
  22.       if (v2.geometry instanceof THREE.ExtrudeGeometry) {
  23.         arr.push(v2);
  24.         let itemBox = new THREE.Box3().setFromObject(v);
  25.         box.union(itemBox);
  26.       }
  27.     }
  28.   }
  29.   var bboxMin = box.min;
  30.   var bboxMax = box.max;
  31.   // 计算UV的缩放比例
  32.   var uvScale = new THREE.Vector2(
  33.     1 / (bboxMax.x - bboxMin.x),
  34.     1 / (bboxMax.y - bboxMin.y)
  35.   );
  36.   for (let v of arr) {
  37.     let uvAttribute = v.geometry.getAttribute("uv");
  38.     for (let i = 0; i < uvAttribute.count; i++) {
  39.       let u = uvAttribute.getX(i);
  40.       let v = uvAttribute.getY(i);
  41.       // 将UV坐标进行归一化
  42.       let normalizedU = (u - bboxMin.x) * uvScale.x;
  43.       let normalizedV = (v - bboxMin.y) * uvScale.y;
  44.       // 更新UV坐标
  45.       uvAttribute.setXY(i, normalizedU, normalizedV);
  46.     }
  47.     // 更新几何体的UV属性
  48.     v.geometry.setAttribute("uv", uvAttribute);
  49.     v.material.map = backgroundTexture;
  50.     v.material.needsUpdate = true;
  51.   }
  52. });
  53.  
  54. addMapGeometry(jsondata) {
  55. // 初始化一个地图对象
  56. this.map = new THREE.Object3D();
  57. jsondata = JSON.parse(jsondata);
  58. jsondata.features.forEach((elem) => {
  59.   // 定一个省份3D对象
  60.   const province = new THREE.Object3D();
  61.   // 每个的 坐标 数组
  62.   const coordinates = elem.geometry.coordinates;
  63.  
  64.   if (elem.geometry.type === "MultiPolygon") {
  65.     // 循环坐标数组
  66.     coordinates.forEach((multiPolygon) => {
  67.       multiPolygon.forEach((polygon) => {
  68.         this.drawItem(elem, polygon, province);
  69.       });
  70.     });
  71.     this.map.add(province);
  72.   } else if (elem.geometry.type === "Polygon") {
  73.     // 循环坐标数组
  74.     coordinates.forEach((polygon) => {
  75.       this.drawItem(elem, polygon, province);
  76.     });
  77.     this.map.add(province);
  78.   }
  79. });
  80. this.scene.add(this.map);
  81. },
  82. drawItem(elem, polygon, province) {
  83. const shape = new THREE.Shape();
  84. const pointsArray = new Array();
  85. for (let i = 0; i < polygon.length; i++) {
  86.   const [x, y] = this.projection(polygon[i]);
  87.   if (i === 0) {
  88.     shape.moveTo(x, -y);
  89.   }
  90.   shape.lineTo(x, -y);
  91.   pointsArray.push(new THREE.Vector3(x, -y, this.mapConfig.deep));
  92. }
  93. let curve = new THREE.CatmullRomCurve3(pointsArray);
  94. // 这里使用TubeGeometry没有使用line，主要考虑到line的宽度无法设置，也可以使用其他第三方依赖
  95. var tubeGeometry = new THREE.TubeGeometry(
  96.   curve,
  97.   Math.floor(pointsArray.length),
  98.   0.02,
  99.   10
  100. );
  101.  
  102. const extrudeSettings = {
  103.   depth: this.mapConfig.deep,
  104.   bevelEnabled: false, // 对挤出的形状应用是否斜角
  105. };
  106. const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
  107. geometry.computeBoundingBox();
  108. // 创建地图区域材质
  109. let meshMaterial = new THREE.MeshStandardMaterial({
  110.   color: "#ffffff",
  111.   transparent: true,
  112.   opacity: 1,
  113. });
  114. // 创建地图边界线材质
  115. let lineMaterial = new THREE.MeshBasicMaterial({
  116.   color: "#ceebf7",
  117. });
  118.  
  119. const mesh = new THREE.Mesh(geometry, meshMaterial);
  120. const line = new THREE.Mesh(tubeGeometry, lineMaterial);
  121. // 将省份的属性 加进来
  122. province.properties = elem.properties;
  123. province.add(mesh);
  124. this.boundaryLineArr.push(line);
  125. province.add(line);
  126. },

3、设置后期处理

  1. //设置光晕
  2. this.composer = new EffectComposer(this.renderer); //效果组合器
  3. //创建通道
  4. let renderScene = new RenderPass(this.scene, this.camera);
  5. this.composer.addPass(renderScene);
  6.  
  7. let outlinePass = new OutlinePass(
  8.   new THREE.Vector2(window.innerWidth, window.innerHeight),
  9.   this.scene,
  10.   this.camera,
  11.   this.boundaryLineArr // 边界线数组
  12. );
  13. outlinePass.renderToScreen = true;
  14. outlinePass.edgeGlow = 2; // 光晕效果
  15. outlinePass.usePatternTexture = false;
  16. outlinePass.edgeThickness = 10; // 边框宽度
  17. outlinePass.edgeStrength = 1.5; // 光晕效果
  18. outlinePass.pulsePeriod = 0; // 光晕闪烁的速度
  19. outlinePass.visibleEdgeColor.set("#1acdec");
  20. outlinePass.hiddenEdgeColor.set("#1acdec");
  21. this.composer.addPass(outlinePass);

完整代码

注：我这边使用的是安徽的地图，需要替换自己的地图json以及地图中心地理坐标

  1. <template>
  2.   <div class="page" id="page" ref="page">
  3.     <div class="tooltip" ref="tooltip" v-show="show">
  4.       {{ selectedPointData.name }}
  5.     </div>
  6.   </div>
  7. </template>
  8.  
  9. <script>
  10. import * as THREE from "three";
  11. import * as d3 from "d3";
  12. import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
  13. import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
  14. import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
  15. import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
  16. import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
  17. export default {
  18.   data() {
  19.     return {
  20.       scene: null,
  21.       camera: null,
  22.       renderer: null,
  23.       controls: null,
  24.       centerCoordinate: [117.13, 31.89], // 地图中心地理坐标
  25.       projection: null, // Mercator 投影
  26.       mapConfig: {
  27.         deep: 0.2, // 挤出的深度
  28.       },
  29.       boundaryLineArr: [], // 边界线
  30.       composer: "", // 后期处理
  31.       pointData: [
  32.         {
  33.           coordinates: [117.33, 31.79],
  34.           type: 1,
  35.           name: "合肥",
  36.           value: 100,
  37.         },
  38.         {
  39.           coordinates: [118.502, 31.684],
  40.           type: 1,
  41.           name: "马鞍山",
  42.           value: 100,
  43.         },
  44.       ],
  45.       pointInstanceArr: [], // 坐标点实例
  46.       show: false, // 是否显示tooltip
  47.       selectedPointData: {}, // 选中的坐标点数据
  48.     };
  49.   },
  50.  
  51.   mounted() {
  52.     this.init();
  53.     window.addEventListener("resize", () => {
  54.       this.renderer.setSize(window.innerWidth, window.innerHeight);
  55.       this.camera.aspect = window.innerWidth / window.innerHeight;
  56.       this.camera.updateProjectionMatrix();
  57.     });
  58.   },
  59.  
  60.   methods: {
  61.     init() {
  62.       this.renderer = new THREE.WebGLRenderer();
  63.       this.renderer.setSize(window.innerWidth, window.innerHeight);
  64.       this.renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
  65.       document.querySelector("#page").appendChild(this.renderer.domElement);
  66.  
  67.       this.scene = new THREE.Scene();
  68.       this.camera = new THREE.PerspectiveCamera(
  69.         45,
  70.         window.innerWidth / window.innerHeight,
  71.         0.1,
  72.         1000
  73.       );
  74.       this.camera.position.set(5, 5, 26);
  75.       this.camera.lookAt(0, 0, 0);
  76.  
  77.       // let axesHelp = new THREE.AxesHelper(5);
  78.       // this.scene.add(axesHelp);
  79.  
  80.       this.controls = new OrbitControls(this.camera, this.renderer.domElement);
  81.  
  82.       // 墨卡托投影转换
  83.       this.projection = d3
  84.         .geoMercator()
  85.         .center(this.centerCoordinate)
  86.         .translate([0, 0]); // 根据地球贴图做轻微调整
  87.       // 添加地图
  88.       this.addMap();
  89.       // 给地图边界线添加outline效果
  90.       this.setLineOutline();
  91.  
  92.       // 添加灯光
  93.       let ambientLight = new THREE.AmbientLight(0xffffff, 1);
  94.       this.scene.add(ambientLight);
  95.  
  96.       // 添加散点
  97.       this.setPoint();
  98.       // 设置光线投射
  99.       this.setRaycaster();
  100.  
  101.       this.render();
  102.     },
  103.     render() {
  104.       this.renderer.render(this.scene, this.camera);
  105.       this.controls.update();
  106.       if (this.composer) this.composer.render();
  107.       requestAnimationFrame(this.render);
  108.     },
  109.     // 添加地图
  110.     addMap() {
  111.       // 加载地图背景
  112.       const backgroundTexture = new THREE.TextureLoader().load(
  113.         require("@/assets/images/map.png")
  114.       );
  115.       // 加载地图
  116.       let fileLoader = new THREE.FileLoader();
  117.       fileLoader.load("/anhui.json", (data) => {
  118.         // 添加地图及边界线
  119.         this.addMapGeometry(data);
  120.         // 重新计算地图uv坐标
  121.         let arr = [];
  122.         let box = new THREE.Box3();
  123.         for (let v of this.map.children) {
  124.           for (let v2 of v.children) {
  125.             // 判断是否为ExtrudeGeometry，只计算所有地图区域总和的包围盒大小
  126.             if (v2.geometry instanceof THREE.ExtrudeGeometry) {
  127.               arr.push(v2);
  128.               let itemBox = new THREE.Box3().setFromObject(v2);
  129.               box.union(itemBox);
  130.             }
  131.           }
  132.         }
  133.         var bboxMin = box.min;
  134.         var bboxMax = box.max;
  135.         // 计算UV的缩放比例
  136.         var uvScale = new THREE.Vector2(
  137.           1 / (bboxMax.x - bboxMin.x),
  138.           1 / (bboxMax.y - bboxMin.y)
  139.         );
  140.         for (let v of arr) {
  141.           let uvAttribute = v.geometry.getAttribute("uv");
  142.           for (let i = 0; i < uvAttribute.count; i++) {
  143.             let u = uvAttribute.getX(i);
  144.             let v = uvAttribute.getY(i);
  145.             // 将UV坐标进行归一化
  146.             let normalizedU = (u - bboxMin.x) * uvScale.x;
  147.             let normalizedV = (v - bboxMin.y) * uvScale.y;
  148.             // 更新UV坐标
  149.             uvAttribute.setXY(i, normalizedU, normalizedV);
  150.           }
  151.           // 更新几何体的UV属性
  152.           v.geometry.setAttribute("uv", uvAttribute);
  153.           v.material.map = backgroundTexture;
  154.           v.material.needsUpdate = true;
  155.         }
  156.       });
  157.     },
  158.     addMapGeometry(jsondata) {
  159.       // 初始化一个地图对象
  160.       this.map = new THREE.Object3D();
  161.       jsondata = JSON.parse(jsondata);
  162.       jsondata.features.forEach((elem) => {
  163.         // 定一个省份3D对象
  164.         const province = new THREE.Object3D();
  165.         // 每个的 坐标 数组
  166.         const coordinates = elem.geometry.coordinates;
  167.  
  168.         if (elem.geometry.type === "MultiPolygon") {
  169.           // 循环坐标数组
  170.           coordinates.forEach((multiPolygon) => {
  171.             multiPolygon.forEach((polygon) => {
  172.               this.drawItem(elem, polygon, province);
  173.             });
  174.           });
  175.           this.map.add(province);
  176.         } else if (elem.geometry.type === "Polygon") {
  177.           // 循环坐标数组
  178.           coordinates.forEach((polygon) => {
  179.             this.drawItem(elem, polygon, province);
  180.           });
  181.           this.map.add(province);
  182.         }
  183.       });
  184.       this.scene.add(this.map);
  185.     },
  186.     drawItem(elem, polygon, province) {
  187.       const shape = new THREE.Shape();
  188.       const pointsArray = new Array();
  189.       for (let i = 0; i < polygon.length; i++) {
  190.         const [x, y] = this.projection(polygon[i]);
  191.         if (i === 0) {
  192.           shape.moveTo(x, -y);
  193.         }
  194.         shape.lineTo(x, -y);
  195.         pointsArray.push(new THREE.Vector3(x, -y, this.mapConfig.deep));
  196.       }
  197.       let curve = new THREE.CatmullRomCurve3(pointsArray);
  198.       // 这里使用TubeGeometry没有使用line，主要考虑到line的宽度无法设置，也可以使用其他第三方依赖去做
  199.       var tubeGeometry = new THREE.TubeGeometry(
  200.         curve,
  201.         Math.floor(pointsArray.length),
  202.         0.02,
  203.         10
  204.       );
  205.  
  206.       const extrudeSettings = {
  207.         depth: this.mapConfig.deep,
  208.         bevelEnabled: false, // 对挤出的形状应用是否斜角
  209.       };
  210.       const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
  211.       geometry.computeBoundingBox();
  212.       // 创建地图区域材质
  213.       let meshMaterial = new THREE.MeshStandardMaterial({
  214.         color: "#ffffff",
  215.         transparent: true,
  216.         opacity: 1,
  217.       });
  218.       // 创建地图边界线材质
  219.       let lineMaterial = new THREE.MeshBasicMaterial({
  220.         color: "#ceebf7",
  221.       });
  222.  
  223.       const mesh = new THREE.Mesh(geometry, meshMaterial);
  224.       const line = new THREE.Mesh(tubeGeometry, lineMaterial);
  225.       // 将省份的属性 加进来
  226.       province.properties = elem.properties;
  227.       province.add(mesh);
  228.       this.boundaryLineArr.push(line);
  229.       province.add(line);
  230.     },
  231.     // 给地图边界线添加outline效果
  232.     setLineOutline() {
  233.       //设置光晕
  234.       this.composer = new EffectComposer(this.renderer); //效果组合器
  235.       //创建通道
  236.       let renderScene = new RenderPass(this.scene, this.camera);
  237.       this.composer.addPass(renderScene);
  238.  
  239.       let outlinePass = new OutlinePass(
  240.         new THREE.Vector2(window.innerWidth, window.innerHeight),
  241.         this.scene,
  242.         this.camera,
  243.         this.boundaryLineArr
  244.       );
  245.       outlinePass.renderToScreen = true;
  246.       outlinePass.edgeGlow = 2; // 光晕效果
  247.       outlinePass.usePatternTexture = false;
  248.       outlinePass.edgeThickness = 10; // 边框宽度
  249.       outlinePass.edgeStrength = 1.5; // 光晕效果
  250.       outlinePass.pulsePeriod = 0; // 光晕闪烁的速度
  251.       outlinePass.visibleEdgeColor.set("#1acdec");
  252.       outlinePass.hiddenEdgeColor.set("#1acdec");
  253.       this.composer.addPass(outlinePass);
  254.     },
  255.     // 添加散点
  256.     setPoint() {
  257.       let pointTexture = new THREE.TextureLoader().load(
  258.         require("@/assets/images/point.png")
  259.       );
  260.       for (let v of this.pointData) {
  261.         let [x, y] = this.projection(v.coordinates);
  262.         const sprite = new THREE.Sprite(
  263.           new THREE.SpriteMaterial({
  264.             map: pointTexture,
  265.           })
  266.         );
  267.         sprite.scale.set(0.7, 0.7, 1);
  268.         sprite.position.set(x, -y, this.mapConfig.deep + 0.5);
  269.         sprite.properties = v;
  270.         this.pointInstanceArr.push(sprite);
  271.         this.scene.add(sprite);
  272.       }
  273.     },
  274.     // 光线投射
  275.     setRaycaster() {
  276.       const raycaster = new THREE.Raycaster();
  277.       const pointer = new THREE.Vector2();
  278.       this.$refs.page.addEventListener("click", (event) => {
  279.         pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  280.         pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
  281.  
  282.         raycaster.setFromCamera(pointer, this.camera);
  283.         const intersects = raycaster.intersectObjects(this.pointInstanceArr);
  284.         if (intersects && intersects.length > 0) {
  285.           let tooltip = this.$refs.tooltip;
  286.           tooltip.style.left = event.pageX + "px";
  287.           tooltip.style.top = event.pageY + "px";
  288.           this.selectedPointData = intersects[0].object.properties;
  289.           this.show = true;
  290.         } else {
  291.           this.selectedPointData = {};
  292.           this.show = false;
  293.         }
  294.       });
  295.     },
  296.   },
  297. };
  298. </script>
  299. <style scoped lang="scss">
  300. .page {
  301.   height: 100vh;
  302.   .tooltip {
  303.     position: absolute;
  304.     background-color: #fff;
  305.     padding: 10px;
  306.     border-radius: 8px;
  307.   }
  308. }
  309. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/665428
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号