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

three.js实现3D地图+地名_threejs 3d地图

作者：一键难忘520 | 2024-07-23 02:52:15

赞

踩

threejs 3d地图

  1. <template>
  2.     <div class="page" id="page" ref="page"
  3.         style="width: 100% !important;height: 100% !important;border:0px solid red;position: relative;">
  4.         <div
  5.             style="display: flex;align-items: center;font-size:12px;color:#15aef6;position: absolute;top: 8%;right:10%;cursor: pointer;">
  6.             <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #14acf5;margin-right: 8px;"></div>
  7.             海口市企业共有 <span style="color:#fff">113</span> 家
  8.         </div>
  9.         <!-- <div class="tooltip" ref="tooltip" v-show="show">
  10.             {{ selectedPointData.name }}
  11.         </div> -->
  12.     </div>
  13. </template>
  14.  
  15. <script>
  16. import * as THREE from "three";
  17. import * as d3 from "d3";
  18. import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
  19. import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
  20. import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
  21. import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
  22. import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
  23. import { toRaw } from '@vue/reactivity';
  24. import { log } from "prettier/parser-postcss";
  25.  
  26. import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
  27. import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
  28.  
  29.  
  30. let scale;
  31. export default {
  32.     data() {
  33.         return {
  34.             materialArr: [],
  35.             scene: null,
  36.             camera: null,
  37.             renderer: null,
  38.             controls: null,
  39.             centerCoordinate: [0, 0], // 地图中心地理坐标
  40.             projection: null, // Mercator 投影
  41.             mapConfig: {
  42.                 deep: 0.2, // 挤出的深度
  43.             },
  44.             boundaryLineArr: [], // 边界线
  45.             composer: "", // 后期处理
  46.             pointData: [
  47.                 {
  48.                     coordinates: [110.102773, 19.362916], // 假设的三亚地理位置坐标，实际请核实
  49.                     type: 1,
  50.                     name: "屯昌县",
  51.                     value: 100,
  52.                 },
  53.                 // {
  54.                 //     coordinates: [109.488, 18.225], // 另一个假设的三亚地理位置坐标，实际请根据具体地点调整
  55.                 //     type: 1,
  56.                 //     name: "天涯海角",
  57.                 //     value: 100,
  58.                 // },
  59.             ],
  60.             pointInstanceArr: [], // 坐标点实例
  61.             show: false, // 是否显示tooltip
  62.             selectedPointData: {}, // 选中的坐标点数据
  63.         };
  64.     },
  65.  
  66.     // created() {
  67.     //     let that = this
  68.     //     this.$nextTick(() => {
  69.     //         // 确保fontLoader和font已定义并加载完成
  70.     //         let fontLoader = new FontLoader();
  71.     //         fontLoader.load('/font.json', (font) => {
  72.     //             // this.font = font;
  73.  
  74.     //             console.log(666, font);
  75.  
  76.  
  77.     //             // // 创建文本几何体
  78.     //             let textGeometry = new TextGeometry('三亚市', {
  79.     //                 font,
  80.     //                 size: 0.2, // 文本大小
  81.     //                 height: 0.1, // 文本厚度
  82.     //             });
  83.  
  84.     //             // // 应用纹理或颜色
  85.     //             let textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); // 白色
  86.  
  87.     //             // // 创建文本网格
  88.     //             let textMesh = new THREE.Mesh(textGeometry, textMaterial);
  89.  
  90.     //             // // 设置文本位置
  91.     //             textMesh.position.set(0, 2, 0); // 例如，在z轴上10的位置
  92.  
  93.     //             // // 添加到场景
  94.     //             that.scene.add(textMesh);
  95.     //         });
  96.     //     })
  97.     // },
  98.  
  99.     mounted() {
  100.         this.init();
  101.         // window.addEventListener("resize", () => {
  102.         //     const width = document.querySelector(".page").offsetWidth
  103.         //     const height = document.querySelector(".page").offsetHeight;
  104.         //     this.renderer.setSize(width, height);
  105.         //     this.camera.aspect = width / height;
  106.         //     this.camera.updateProjectionMatrix();
  107.         // });
  108.     },
  109.     methods: {
  110.         latLonToVector3(lat, lon, radius = 10) { // 假设场景中心为原点，radius为假想地球半径
  111.             let phi = (90 - lat) * (Math.PI / 180);
  112.             let theta = lon * (Math.PI / 180);
  113.  
  114.             let x = radius * Math.sin(phi) * Math.cos(theta);
  115.             let y = radius * Math.cos(phi);
  116.             let z = radius * Math.sin(phi) * Math.sin(theta);
  117.  
  118.             return new THREE.Vector3(x, y, z);
  119.         },
  120.  
  121.         init() {
  122.             // 计算地图中心点
  123.             let fileLoader = new THREE.FileLoader();
  124.             fileLoader.load("/map.json", (data) => {
  125.                 let jsondatas = JSON.parse(data);
  126.                 jsondatas.features.forEach((item, index) => {
  127.                     if (item.properties.name == '三沙市') {
  128.                         jsondatas.features.splice(index, 1)
  129.                         // console.log(111, jsondatas.features[index]);
  130.                     }
  131.                 })
  132.                 // 假设你有一个名为geojsonData的变量包含了所有地图数据
  133.                 const centerCoordinate = this.calculateCentroid(jsondatas);
  134.                 // console.log("自动计算的中心点坐标:", centerCoordinate);
  135.                 this.centerCoordinate = centerCoordinate
  136.             });
  137.             setTimeout(() => {
  138.                 this.renderer = new THREE.WebGLRenderer();
  139.                 const width = document.querySelector(".page").offsetWidth
  140.                 const height = document.querySelector(".page").offsetHeight;
  141.                 this.renderer.setSize(width, height);
  142.                 this.renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
  143.                 document.querySelector("#page").appendChild(this.renderer.domElement);
  144.  
  145.                 this.scene = new THREE.Scene();
  146.                 // this.scene.background = new THREE.TextureLoader().load("../assets/images/bigBg.png");
  147.                 this.scene.background = new THREE.TextureLoader().load("bigBg.png");
  148.                 // this.camera = new THREE.PerspectiveCamera(
  149.                 //     45,
  150.                 //     window.innerWidth / window.innerHeight,
  151.                 //     0.1,
  152.                 //     1000
  153.                 // );
  154.                 // this.camera.position.set(5, 5, 26);
  155.                 this.camera = new THREE.PerspectiveCamera(
  156.                     9, // 减小fov使视野更窄，让物体看起来更大
  157.                     window.innerWidth / window.innerHeight,
  158.                     0.5,
  159.                     1000
  160.                 );
  161.                 // this.camera.position.set(3, 3, 100); // 缩短z轴距离，让相机离地图更近
  162.                 this.camera.position.set(5, 5, 45);
  163.                 this.camera.lookAt(0, 0, 0);
  164.  
  165.                 // let axesHelp = new THREE.AxesHelper(5);
  166.                 // this.scene.add(axesHelp);
  167.  
  168.                 this.controls = new OrbitControls(this.camera, this.renderer.domElement);
  169.  
  170.                 // 墨卡托投影转换
  171.                 this.projection = d3
  172.                     .geoMercator()
  173.                     .center(this.centerCoordinate)
  174.                     .translate([0, 0]); // 根据地球贴图做轻微调整
  175.                 // 添加地图
  176.                 this.addMap();
  177.                 // let mapObject = this.addMap();
  178.                 // 调整地图对象的位置
  179.                 // addMap().position.y -= 1; // 向下移动1个单位
  180.                 // 给地图边界线添加outline效果
  181.                 this.setLineOutline();
  182.  
  183.                 // 添加灯光
  184.                 let ambientLight = new THREE.AmbientLight(0xffffff, 1);
  185.                 this.scene.add(toRaw(ambientLight));
  186.  
  187.                 // 添加散点
  188.                 this.setPoint();
  189.                 // 设置光线投射
  190.                 this.setRaycaster();
  191.  
  192.                 this.render();
  193.             }, 500)
  194.         },
  195.         render() {
  196.             this.renderer.render(toRaw(this.scene), this.camera);
  197.             this.controls.update();
  198.             if (this.composer) this.composer.render();
  199.             requestAnimationFrame(this.render);
  200.         },
  201.         // 添加地图
  202.         addMap() {
  203.             // 加载地图背景
  204.             const backgroundTexture = new THREE.TextureLoader().load(
  205.                 require("@/assets/images/map.png")
  206.                 // require("@/assets/images/bigBg.png")
  207.             );
  208.             // 加载地图
  209.             let fileLoader = new THREE.FileLoader();
  210.             fileLoader.load("/map.json", (data) => {
  211.                 // 添加地图及边界线
  212.                 this.addMapGeometry(data);
  213.                 // 重新计算地图uv坐标
  214.                 let arr = [];
  215.                 let box = new THREE.Box3();
  216.                 for (let v of this.map.children) {
  217.                     for (let v2 of v.children) {
  218.                         // 判断是否为ExtrudeGeometry，只计算所有地图区域总和的包围盒大小
  219.                         if (v2.geometry instanceof THREE.ExtrudeGeometry) {
  220.                             arr.push(v2);
  221.                             let itemBox = new THREE.Box3().setFromObject(v2);
  222.                             box.union(itemBox);
  223.                         }
  224.                     }
  225.                 }
  226.                 var bboxMin = box.min;
  227.                 var bboxMax = box.max;
  228.                 // 计算UV的缩放比例
  229.                 var uvScale = new THREE.Vector2(
  230.                     1 / (bboxMax.x - bboxMin.x),
  231.                     1 / (bboxMax.y - bboxMin.y)
  232.                 );
  233.                 for (let v of arr) {
  234.                     let uvAttribute = v.geometry.getAttribute("uv");
  235.                     for (let i = 0; i < uvAttribute.count; i++) {
  236.                         let u = uvAttribute.getX(i);
  237.                         let v = uvAttribute.getY(i);
  238.                         // 将UV坐标进行归一化
  239.                         let normalizedU = (u - bboxMin.x) * uvScale.x;
  240.                         let normalizedV = (v - bboxMin.y) * uvScale.y;
  241.                         // 更新UV坐标
  242.                         uvAttribute.setXY(i, normalizedU, normalizedV);
  243.                     }
  244.                     // 更新几何体的UV属性
  245.                     v.geometry.setAttribute("uv", uvAttribute);
  246.                     v.material.map = backgroundTexture;
  247.                     v.material.needsUpdate = true;
  248.                 }
  249.             });
  250.         },
  251.         addMapGeometry(jsondata) {
  252.             // 初始化一个地图对象
  253.             this.map = new THREE.Object3D();
  254.             jsondata = JSON.parse(jsondata);
  255.  
  256.             jsondata.features.forEach((elem) => {
  257.                 // console.log("循环区域", elem.properties)
  258.                 // 新增: 根据省份名称或其他条件判断是否跳过当前元素（例如排除海南）
  259.                 if (elem.properties.name === "三沙市") { // 假设properties中有name或adcode标识省份
  260.                     // console.log("跳过了海南诸岛的数据");
  261.                     return; // 直接返回，跳过当前循环的这个省份
  262.                 }
  263.                 // 定一个省份3D对象
  264.                 const province = new THREE.Object3D();
  265.                 // 每个的 坐标 数组
  266.                 const coordinates = elem.geometry.coordinates;
  267.  
  268.                 if (elem.geometry.type === "MultiPolygon") {
  269.                     // 循环坐标数组
  270.                     coordinates.forEach((multiPolygon) => {
  271.                         multiPolygon.forEach((polygon) => {
  272.                             this.drawItem(elem, polygon, province);
  273.                         });
  274.                     });
  275.                     this.map.add(province);
  276.                 } else if (elem.geometry.type === "Polygon") {
  277.                     // 循环坐标数组
  278.                     coordinates.forEach((polygon) => {
  279.                         this.drawItem(elem, polygon, province);
  280.                     });
  281.                     this.map.add(province);
  282.                 }
  283.  
  284.  
  285.  
  286.  
  287.  
  288.  
  289.                 this.$nextTick(() => {
  290.                     let fontLoader = new FontLoader();
  291.                     fontLoader.load('/font.json', (font) => {
  292.                         console.log(123, font);
  293.                         let textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); // 应用纹理或颜色 白色 
  294.  
  295.  
  296.                         let textGeometry = new TextGeometry('三亚市', { font, size: 0.15, height: 0.1 }); // 创建文本几何体  
  297.                         let textMesh = new THREE.Mesh(textGeometry, textMaterial); // 创建文本网格 
  298.                         textMesh.position.set(-1.3, -2.5, 0.5); // 例如，在z轴上10的位置 // 设置文本位置
  299.  
  300.  
  301.                         let textGeometry2 = new TextGeometry('乐东黎族自治县', { font, size: 0.15, height: 0.1 });
  302.                         let textMesh2 = new THREE.Mesh(textGeometry2, textMaterial);
  303.                         textMesh2.position.set(-2.8, -1.5, 0.5);
  304.  
  305.                         let textGeometry3 = new TextGeometry('东方市', { font, size: 0.15, height: 0.1 });
  306.                         let textMesh3 = new THREE.Mesh(textGeometry3, textMaterial);
  307.                         textMesh3.position.set(-2.8, -0.5, 0.5);
  308.  
  309.                         let textGeometry4 = new TextGeometry('保亭黎族苗族自治县', { font, size: 0.15, height: 0.1 });
  310.                         let textMesh4 = new THREE.Mesh(textGeometry4, textMaterial);
  311.                         textMesh4.position.set(-1, -1.6, 0.5);
  312.  
  313.                         let textGeometry5 = new TextGeometry('陵水黎族自治县', { font, size: 0.15, height: 0.1 });
  314.                         let textMesh5 = new THREE.Mesh(textGeometry5, textMaterial);
  315.                         textMesh5.position.set(0, -1.9, 0.5);
  316.  
  317.  
  318.                         let textGeometry6 = new TextGeometry('五指山市', { font, size: 0.15, height: 0.1 });
  319.                         let textMesh6 = new THREE.Mesh(textGeometry6, textMaterial);
  320.                         textMesh6.position.set(-1.15, -1, 0.5);
  321.  
  322.                         let textGeometry7 = new TextGeometry('琼中黎族苗族自治县', { font, size: 0.15, height: 0.1 });
  323.                         let textMesh7 = new THREE.Mesh(textGeometry7, textMaterial);
  324.                         textMesh7.position.set(-0.5, -0.5, 0.5);
  325.  
  326.                         let textGeometry8 = new TextGeometry('昌江黎族自治县', { font, size: 0.15, height: 0.1 });
  327.                         let textMesh8 = new THREE.Mesh(textGeometry8, textMaterial);
  328.                         textMesh8.position.set(-2.6, 0.4, 0.5);
  329.  
  330.                         let textGeometry9 = new TextGeometry('白沙黎族自治区', { font, size: 0.15, height: 0.1 });
  331.                         let textMesh9 = new THREE.Mesh(textGeometry9, textMaterial);
  332.                         textMesh9.position.set(-1.8, -0.2, 0.5);
  333.  
  334.                         let textGeometry10 = new TextGeometry('儋州市', { font, size: 0.15, height: 0.1 });
  335.                         let textMesh10 = new THREE.Mesh(textGeometry10, textMaterial);
  336.                         textMesh10.position.set(-1.3, 1, 0.5);
  337.  
  338.                         let textGeometry11 = new TextGeometry('临高县', { font, size: 0.15, height: 0.1 });
  339.                         let textMesh11 = new THREE.Mesh(textGeometry11, textMaterial);
  340.                         textMesh11.position.set(-0.4, 1.6, 0.5);
  341.  
  342.                         let textGeometry12 = new TextGeometry('澄迈县', { font, size: 0.15, height: 0.1 });
  343.                         let textMesh12 = new THREE.Mesh(textGeometry12, textMaterial);
  344.                         textMesh12.position.set(0.35, 1.5, 0.5);
  345.  
  346.                         let textGeometry13 = new TextGeometry('海口市', { font, size: 0.15, height: 0.1 });
  347.                         let textMesh13 = new THREE.Mesh(textGeometry13, textMaterial);
  348.                         textMesh13.position.set(1.3, 1.85, 0.5);
  349.  
  350.                         let textGeometry14 = new TextGeometry('文昌市', { font, size: 0.15, height: 0.1 });
  351.                         let textMesh14 = new THREE.Mesh(textGeometry14, textMaterial);
  352.                         textMesh14.position.set(2.45, 1.5, 0.5);
  353.  
  354.                         let textGeometry15 = new TextGeometry('琼海市', { font, size: 0.15, height: 0.1 });
  355.                         let textMesh15 = new THREE.Mesh(textGeometry15, textMaterial);
  356.                         textMesh15.position.set(1.5, 0, 0.5);
  357.  
  358.                         let textGeometry16 = new TextGeometry('万宁市', { font, size: 0.15, height: 0.1 });
  359.                         let textMesh16 = new THREE.Mesh(textGeometry16, textMaterial);
  360.                         textMesh16.position.set(0.8, -1.2, 0.5);
  361.  
  362.                         let textGeometry17 = new TextGeometry('定安县', { font, size: 0.15, height: 0.1 });
  363.                         let textMesh17 = new THREE.Mesh(textGeometry17, textMaterial);
  364.                         textMesh17.position.set(1.3, 0.9, 0.5);
  365.  
  366.                         let textGeometry18 = new TextGeometry('屯昌县', { font, size: 0.15, height: 0.1 });
  367.                         let textMesh18 = new THREE.Mesh(textGeometry18, textMaterial);
  368.                         textMesh18.position.set(0.4, 0.3, 0.5);
  369.  
  370.  
  371.                         // 添加文字到场景
  372.                         this.scene.add(textMesh, textMesh2, textMesh3, textMesh4, textMesh5, textMesh6, textMesh7, textMesh8, textMesh9, textMesh10, textMesh11, textMesh12, textMesh13, textMesh14, textMesh15, textMesh16, textMesh17, textMesh18);
  373.                         // this.scene.add(textMesh2);
  374.                     })
  375.                 })
  376.  
  377.  
  378.  
  379.  
  380.             });
  381.             this.scene.add(this.map);
  382.             // let that = this
  383.             // this.$nextTick(() => {
  384.             //     let fontLoader = new FontLoader();
  385.             //     fontLoader.load('/font.json', (font) => {
  386.             //         console.log(123, font);
  387.             //         // 创建文本几何体
  388.             //         let textGeometry = new TextGeometry('三亚市', {
  389.             //             font,
  390.             //             size: 0.2, // 文本大小
  391.             //             height: 0.1, // 文本厚度
  392.             //         });
  393.             //         // 应用纹理或颜色
  394.             //         let textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); // 白色
  395.             //         // 创建文本网格
  396.             //         let textMesh = new THREE.Mesh(textGeometry, textMaterial);
  397.  
  398.             //         // 设置文本位置
  399.             //         textMesh.position.set(0, 2, 0); // 例如，在z轴上10的位置
  400.  
  401.             //         // 添加文字到场景
  402.             //         that.scene.add(textMesh);
  403.  
  404.             //         // 然后添加地图到场景
  405.  
  406.             //     });
  407.             // })
  408.  
  409.         },
  410.         drawItem(elem, polygon, province) {
  411.             const shape = new THREE.Shape();
  412.             const pointsArray = new Array();
  413.             for (let i = 0; i < polygon.length; i++) {
  414.                 const [x, y] = this.projection(polygon[i]);
  415.                 if (i === 0) {
  416.                     shape.moveTo(x, -y);
  417.                 }
  418.                 shape.lineTo(x, -y);
  419.                 pointsArray.push(new THREE.Vector3(x, -y, this.mapConfig.deep));
  420.             }
  421.             let curve = new THREE.CatmullRomCurve3(pointsArray);
  422.             // 这里使用TubeGeometry没有使用line，主要考虑到line的宽度无法设置，也可以使用其他第三方依赖去做
  423.             var tubeGeometry = new THREE.TubeGeometry(
  424.                 curve,
  425.                 Math.floor(pointsArray.length),
  426.                 0.02,
  427.                 10
  428.             );
  429.  
  430.             const extrudeSettings = {
  431.                 depth: this.mapConfig.deep,
  432.                 bevelEnabled: false, // 对挤出的形状应用是否斜角
  433.             };
  434.             const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
  435.             geometry.computeBoundingBox();
  436.             // 创建地图区域材质
  437.             let meshMaterial = new THREE.MeshStandardMaterial({
  438.                 color: "#ffffff",
  439.                 transparent: true,
  440.                 opacity: 1,
  441.             });
  442.             // 创建地图边界线材质
  443.             let lineMaterial = new THREE.MeshBasicMaterial({
  444.                 color: "#ceebf7",
  445.             });
  446.  
  447.             const mesh = new THREE.Mesh(geometry, meshMaterial);
  448.             const line = new THREE.Mesh(tubeGeometry, lineMaterial);
  449.             // 将省份的属性 加进来
  450.             province.properties = elem.properties;
  451.             province.add(mesh);
  452.             this.boundaryLineArr.push(line);
  453.             province.add(line);
  454.         },
  455.         // 给地图边界线添加outline效果
  456.         setLineOutline() {
  457.             //设置光晕
  458.             this.composer = new EffectComposer(this.renderer); //效果组合器
  459.             //创建通道
  460.             let renderScene = new RenderPass(this.scene, this.camera);
  461.             this.composer.addPass(renderScene);
  462.  
  463.             let outlinePass = new OutlinePass(
  464.                 new THREE.Vector2(window.innerWidth, window.innerHeight),
  465.                 this.scene,
  466.                 this.camera,
  467.                 this.boundaryLineArr
  468.             );
  469.             outlinePass.renderToScreen = true;
  470.             outlinePass.edgeGlow = 2; // 光晕效果
  471.             outlinePass.usePatternTexture = false;
  472.             outlinePass.edgeThickness = 10; // 边框宽度
  473.             outlinePass.edgeStrength = 1.5; // 光晕效果
  474.             outlinePass.pulsePeriod = 0; // 光晕闪烁的速度
  475.             outlinePass.visibleEdgeColor.set("#1acdec");
  476.             outlinePass.hiddenEdgeColor.set("#1acdec");
  477.             this.composer.addPass(outlinePass);
  478.         },
  479.         // 添加散点
  480.         setPoint() {
  481.             let pointTexture = new THREE.TextureLoader().load(
  482.                 require("@/assets/images/point.png")
  483.             );
  484.             for (let v of this.pointData) {
  485.                 let [x, y] = this.projection(v.coordinates);
  486.                 const sprite = new THREE.Sprite(
  487.                     new THREE.SpriteMaterial({
  488.                         map: pointTexture,
  489.                     })
  490.                 );
  491.                 sprite.scale.set(.7, .7, 1);
  492.                 sprite.position.set(x, -y, this.mapConfig.deep + 0.5);
  493.                 sprite.properties = v;
  494.                 this.pointInstanceArr.push(sprite);
  495.                 this.scene.add(sprite);
  496.             }
  497.         },
  498.         // 光线投射
  499.         setRaycaster() {
  500.             const raycaster = new THREE.Raycaster();
  501.             const pointer = new THREE.Vector2();
  502.             this.$refs.page.addEventListener("click", (event) => {
  503.                 pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  504.                 pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
  505.  
  506.                 raycaster.setFromCamera(pointer, this.camera);
  507.                 const intersects = raycaster.intersectObjects(this.pointInstanceArr);
  508.                 if (intersects && intersects.length > 0) {
  509.                     // let tooltip = this.$refs.tooltip;
  510.                     // tooltip.style.left = event.pageX + "px";
  511.                     // tooltip.style.top = event.pageY + "px";
  512.                     this.selectedPointData = intersects[0].object.properties;
  513.                     // this.show = true;
  514.                 } else {
  515.                     this.selectedPointData = {};
  516.                     // this.show = false;
  517.                 }
  518.             });
  519.         },
  520.         // 地图中心点计算
  521.         calculateCentroid(geojsonData) {
  522.             let totalLat = 0;
  523.             let totalLon = 0;
  524.             let count = 0;
  525.  
  526.             geojsonData.features.forEach(feature => {
  527.                 if (feature.geometry.type === 'Polygon') {
  528.                     feature.geometry.coordinates.forEach(ring => {
  529.                         ring.forEach(point => {
  530.                             totalLat += point[1];
  531.                             totalLon += point[0];
  532.                             count++;
  533.                         });
  534.                     });
  535.                 } else if (feature.geometry.type === 'MultiPolygon') {
  536.                     feature.geometry.coordinates.forEach(polygon => {
  537.                         polygon.forEach(ring => {
  538.                             ring.forEach(point => {
  539.                                 totalLat += point[1];
  540.                                 totalLon += point[0];
  541.                                 count++;
  542.                             });
  543.                         });
  544.                     });
  545.                 }
  546.             });
  547.  
  548.             // 计算平均经纬度
  549.             const avgLat = totalLat / count;
  550.             const avgLon = totalLon / count;
  551.  
  552.             return [avgLon, avgLat]; // 返回经度在前，纬度在后，符合大多数GIS标准
  553.         },
  554.  
  555.     },
  556. };
  557. </script>
  558. <style scoped>
  559. .page {
  560.     height: 100vh;
  561.     /* background: url("../assets/images/bigBg.png") no-repeat top center;
  562.     background-size: 100% 100%; */
  563. }
  564.  
  565. .tooltip {
  566.     position: absolute;
  567.     background-color: #fff;
  568.     padding: 10px;
  569.     border-radius: 8px;
  570. }
  571. </style>

 需要注意的点：

首先下载依赖

  1. npm i three
  2. npm i d3

1.下载的字体文件需要转换为JSON格式的：转换网址Facetype.js

2.three.module.js这个文件记得加上这4行代码

3.项目中的图片

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

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

  

闽ICP备14008679号