• Three.js+GeoJSON实现三维地图显示

    目录

    1.GeoJSON

    1.1 GeoJSON介绍

    1.2 GeoJSON数据获取

    2. Three加载GeoJSON数据

    2.1 加载并解析GeoJSON

    2.2 对JSON数据中的地理坐标进行转换

    2.3 操作数据并生成三维地图

    2.4 添加点击事件实现点击地图切换颜色

    2.5 main.js源码

    1.GeoJSON

    1.1 GeoJSON介绍

    GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法(JavaScript Object Notation, 简称JSON)的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

    1. {
    2.   "type": "Feature",
    3.   "geometry": {
    4.     "type": "Point",
    5.     "coordinates": [125.6, 10.1]
    6.   },
    7.   "properties": {
    8.     "name": "Dinagat Islands"
    9.   }
    10. }

    一个完整的GeoJSON数据结构总是一个（JSON术语里的）对象。在GeoJSON里，对象由名/值对--也称作成员的集合组成。对每个成员来说，名字总是字符串。成员的值要么是字符串、数字、对象、数组，要么是下面文本常量中的一个："true","false"和"null"。数组的值是上面所说的元素组成。

    GeoJSON总是由一个单独的对象组成。这个对象（指的是下面的GeoJSON对象）表示几何、特征或者特征集合。

    GeoJSON对象可能有任何数目成员（名/值对）。

    GeoJSON对象必须有一个名字为"type"的成员。这个成员的值是由GeoJSON对象的类型所确定的字符串。

    type成员的值必须是下面之一："Point", "MultiPoint", "LineString", "MultiLineString", "Polygon", "MultiPolygon", "GeometryCollection", "Feature", 或者 "FeatureCollection"。

    GeoJSON对象可能有一个可选的"crs"成员，它的值必须是一个坐标参考系统的对象。

    GeoJSON对象可能有一个"bbox"成员，它的值必须是边界框数组。

    GeoJSON特征集合：

    1. {
    2.     "type": "FeatureCollection",
    3.     "features": [{
    4.             "type": "Feature",
    5.             "geometry": {
    6.                 "type": "Point",
    7.                 "coordinates": [102.0, 0.5]
    8.             },
    9.             "properties": {
    10.                 "prop0": "value0"
    11.             }
    12.         }, {
    13.             "type": "Feature",
    14.             "geometry": {
    15.                 "type": "LineString",
    16.                 "coordinates": [[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]]
    17.             },
    18.             "properties": {
    19.                 "prop0": "value0",
    20.                 "prop1": 0.0
    21.             }
    22.         }, {
    23.             "type": "Feature",
    24.             "geometry": {
    25.                 "type": "Polygon",
    26.                 "coordinates": [[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]]
    27.             },
    28.             "properties": {
    29.                 "prop0": "value0",
    30.                 "prop1": {
    31.                     "this": "that"
    32.                 }
    33.             }
    34.         }
    35.     ]
    36. }

    1.2 GeoJSON数据获取

    可以通过阿里云DataV获取GeoJSON数据，也可以在其他地理信息平台获取数据并转换为GeoJson数据：
    DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。icon-default.png?t=M666http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.521903996156105&lng=104.29849999999999&zoom=4

    2. Three加载GeoJSON数据

     2.1 加载并解析GeoJSON

    使用Three提供的FileLoader加载数据并对JSON数据进行解析：

    1. const loader = new THREE.FileLoader();
    2. loader.load("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json", (data) => {
    3.   console.log(data);
    4.   const jsonData = JSON.parse(data);
    5.   operationData(jsonData);
    6.   console.log(jsonData);
    7. });

    控制台输出如下：

     2.2 对JSON数据中的地理坐标进行转换

    安装d3并使用该插件将地理坐标转换为Three所支持的xyz坐标系：

    1）d3.js安装

    1. yarn add d3
    2. or
    3. npm install d3

    2）导入d3

    import * as d3 from "d3";

    3）使用d3转换坐标 

    1. // 以经纬度116，39为中心，进行投影的函数转换函数
    2. const projection1 = d3.geoMercator().center([116, 39]).translate([0, 0, 0]);

    2.3 操作数据并生成三维地图

    1. function operationData(jsondata) {
    2.   // 全国信息
    3.   const features = jsondata.features;
    4.  
    5.   features.forEach((feature) => {
    6.     // 单个省份 对象
    7.     const province = new THREE.Object3D();
    8.     // 地址
    9.     province.properties = feature.properties.name;
    10.     const coordinates = feature.geometry.coordinates;
    11.     const color = "#99ff99";
    12.  
    13.     if (feature.geometry.type === "MultiPolygon") {
    14.       // 多个，多边形
    15.       coordinates.forEach((coordinate) => {
    16.         // console.log(coordinate);
    17.         // coordinate 多边形数据
    18.         coordinate.forEach((rows) => {
    19.           const mesh = drawExtrudeMesh(rows, color, projection1);
    20.           const line = lineDraw(rows, color, projection1);
    21.           // 唯一标识
    22.           mesh.properties = feature.properties.name;
    23.  
    24.           province.add(line);
    25.           province.add(mesh);
    26.         });
    27.       });
    28.     }
    29.  
    30.     if (feature.geometry.type === "Polygon") {
    31.       // 多边形
    32.       coordinates.forEach((coordinate) => {
    33.         const mesh = drawExtrudeMesh(coordinate, color, projection1);
    34.         const line = lineDraw(coordinate, color, projection1);
    35.         // 唯一标识
    36.         mesh.properties = feature.properties.name;
    37.  
    38.         province.add(line);
    39.         province.add(mesh);
    40.       });
    41.     }
    42.     map.add(province);
    43.   });
    44.   scene.add(map);
    45. }
    46.  
    47. function lineDraw(polygon, color, projection) {
    48.   const lineGeometry = new THREE.BufferGeometry();
    49.   const pointsArray = new Array();
    50.   polygon.forEach((row) => {
    51.     const [x, y] = projection(row);
    52.     // 创建三维点
    53.     pointsArray.push(new THREE.Vector3(x, -y, 9));
    54.   });
    55.   // 放入多个点
    56.   lineGeometry.setFromPoints(pointsArray);
    57.   // 生成随机颜色
    58.   const lineColor = new THREE.Color(
    59.     Math.random() * 0.5 + 0.5,
    60.     Math.random() * 0.5 + 0.5,
    61.     Math.random() * 0.5 + 0.5
    62.   );
    63.  
    64.   const lineMaterial = new THREE.LineBasicMaterial({
    65.     color: lineColor,
    66.   });
    67.   return new THREE.Line(lineGeometry, lineMaterial);
    68. }
    69.  
    70. // 根据经纬度坐标生成物体
    71. function drawExtrudeMesh(polygon, color, projection) {
    72.   const shape = new THREE.Shape();
    73.   // console.log(polygon, projection);
    74.   polygon.forEach((row, i) => {
    75.     const [x, y] = projection(row);
    76.     // console.log(row, [x, y]);
    77.     if (i === 0) {
    78.       // 创建起点,使用moveTo方法
    79.       // 因为计算出来的y是反过来，所以要进行颠倒
    80.       shape.moveTo(x, -y);
    81.     }
    82.     shape.lineTo(x, -y);
    83.   });
    84.  
    85.   // 拉伸
    86.   const geometry = new THREE.ExtrudeGeometry(shape, {
    87.     depth: 5,
    88.     bevelEnabled: true,
    89.   });
    90.  
    91.   // 随机颜色
    92.   const randomColor = (0.5 + Math.random() * 0.5) * 0xffffff;
    93.   const material = new THREE.MeshBasicMaterial({
    94.     color: randomColor,
    95.     transparent: true,
    96.     opacity: 0.5,
    97.   });
    98.   return new THREE.Mesh(geometry, material);
    99. }

    实现效果：

    2.4 添加点击事件实现点击地图切换颜色

    1. // 监听鼠标
    2. window.addEventListener("click", onRay);
    3. // 全局对象
    4. let lastPick = null;
    5. function onRay(event) {
    6.   let pickPosition = setPickPosition(event);
    7.   const raycaster = new THREE.Raycaster();
    8.   raycaster.setFromCamera(pickPosition, camera);
    9.   // 计算物体和射线的交点
    10.   const intersects = raycaster.intersectObjects([map], true);
    11.   // 数组大于0 表示有相交对象
    12.   if (intersects.length > 0) {
    13.     if (lastPick) {
    14.       if (lastPick.object.properties !== intersects[0].object.properties) {
    15.         lastPick.object.material.color.set("#99ff99");
    16.         lastPick = null;
    17.       }
    18.     }
    19.     if (intersects[0].object.properties) {
    20.       intersects[0].object.material.color.set("red");
    21.     }
    22.     lastPick = intersects[0];
    23.   } else {
    24.     if (lastPick) {
    25.       // 复原
    26.       if (lastPick.object.properties) {
    27.         lastPick.object.material.color.set("yellow");
    28.         lastPick = null;
    29.       }
    30.     }
    31.   }
    32. }
    33.  
    34. /**
    35.  * 获取鼠标在three.js 中归一化坐标
    36.  * */
    37. function setPickPosition(event) {
    38.   let pickPosition = { x: 0, y: 0 };
    39.   // 计算后 以画布 开始为 （0，0）点
    40.   const pos = getCanvasRelativePosition(event);
    41.   // 数据归一化
    42.   pickPosition.x = (pos.x / canvas.width) * 2 - 1;
    43.   pickPosition.y = (pos.y / canvas.height) * -2 + 1;
    44.   return pickPosition;
    45. }
    46.  
    47. // 计算 以画布 开始为（0，0）点 的鼠标坐标
    48. function getCanvasRelativePosition(event) {
    49.   const rect = canvas.getBoundingClientRect();
    50.   return {
    51.     x: ((event.clientX - rect.left) * canvas.width) / rect.width,
    52.     y: ((event.clientY - rect.top) * canvas.height) / rect.height,
    53.   };
    54. }

    实现效果：

     2.5 main.js源码

    1. import * as THREE from "three";
    2. import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
    3. import * as d3 from "d3";
    4. import Stats from "three/examples/jsm/libs/stats.module.js";
    5.  
    6.  
    7. const stats = new Stats();
    8. document.body.appendChild(stats.dom);
    9. // console.log(THREE);
    10. // 初始化场景
    11. const scene = new THREE.Scene();
    12.  
    13. // console.log(d3);
    14. // 创建透视相机
    15. const camera = new THREE.PerspectiveCamera(
    16.   90,
    17.   window.innerHeight / window.innerHeight,
    18.   0.1,
    19.   100000
    20. );
    21. // 设置相机位置
    22. // object3d具有position，属性是1个3维的向量
    23. camera.position.set(0, 0, 1000);
    24. // 更新摄像头
    25. camera.aspect = window.innerWidth / window.innerHeight;
    26. //   更新摄像机的投影矩阵
    27. camera.updateProjectionMatrix();
    28. scene.add(camera);
    29.  
    30. // 加入辅助轴，帮助我们查看3维坐标轴
    31. const axesHelper = new THREE.AxesHelper(5);
    32. scene.add(axesHelper);
    33.  
    34. // 加载纹理
    35. const map = new THREE.Object3D();
    36.  
    37. const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    38. scene.add(directionalLight);
    39. const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
    40. scene.add(light);
    41. // 初始化渲染器
    42. const renderer = new THREE.WebGLRenderer({ alpha: true });
    43. // renderer.shadowMap.enabled = true;
    44. // renderer.shadowMap.type = THREE.BasicShadowMap;
    45. // renderer.shadowMap.type = THREE.VSMShadowMap;
    46.  
    47. // 设置渲染尺寸大小
    48. renderer.setSize(window.innerWidth, window.innerHeight);
    49.  
    50. // 监听屏幕大小改变的变化，设置渲染的尺寸
    51. window.addEventListener("resize", () => {
    52.   //   console.log("resize");
    53.   // 更新摄像头
    54.   camera.aspect = window.innerWidth / window.innerHeight;
    55.   //   更新摄像机的投影矩阵
    56.   camera.updateProjectionMatrix();
    57.  
    58.   //   更新渲染器
    59.   renderer.setSize(window.innerWidth, window.innerHeight);
    60.   //   设置渲染器的像素比例
    61.   renderer.setPixelRatio(window.devicePixelRatio);
    62. });
    63.  
    64. // 将渲染器添加到body
    65. document.body.appendChild(renderer.domElement);
    66. const canvas = renderer.domElement;
    67.  
    68. // 初始化控制器
    69. const controls = new OrbitControls(camera, renderer.domElement);
    70. // 设置控制器阻尼
    71. controls.enableDamping = true;
    72. // 设置自动旋转
    73. // controls.autoRotate = true;
    74.  
    75. const clock = new THREE.Clock();
    76. function animate(t) {
    77.   controls.update();
    78.   stats.update();
    79.   const deltaTime = clock.getDelta();
    80.  
    81.   requestAnimationFrame(animate);
    82.   // 使用渲染器渲染相机看这个场景的内容渲染出来
    83.   renderer.render(scene, camera);
    84. }
    85.  
    86. animate();
    87.  
    88. // 创建纹理加载器对象
    89. const textureLoader = new THREE.TextureLoader();
    90.  
    91.  
    92. const loader = new THREE.FileLoader();
    93. loader.load("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json", (data) => {
    94.   //console.log(data);
    95.   const jsonData = JSON.parse(data);
    96.   operationData(jsonData);
    97.   console.log(jsonData);
    98. });
    99. // 以经纬度116，39为中心，进行投影的函数转换函数
    100. const projection1 = d3.geoMercator().center([116, 39]).translate([0, 0, 0]);
    101.  
    102. function operationData(jsondata) {
    103.   // 全国信息
    104.   const features = jsondata.features;
    105.  
    106.   features.forEach((feature) => {
    107.     // 单个省份 对象
    108.     const province = new THREE.Object3D();
    109.     // 地址
    110.     province.properties = feature.properties.name;
    111.     const coordinates = feature.geometry.coordinates;
    112.     const color = "#99ff99";
    113.  
    114.     if (feature.geometry.type === "MultiPolygon") {
    115.       // 多个，多边形
    116.       coordinates.forEach((coordinate) => {
    117.         // console.log(coordinate);
    118.         // coordinate 多边形数据
    119.         coordinate.forEach((rows) => {
    120.           const mesh = drawExtrudeMesh(rows, color, projection1);
    121.           const line = lineDraw(rows, color, projection1);
    122.           // 唯一标识
    123.           mesh.properties = feature.properties.name;
    124.  
    125.           province.add(line);
    126.           province.add(mesh);
    127.         });
    128.       });
    129.     }
    130.  
    131.     if (feature.geometry.type === "Polygon") {
    132.       // 多边形
    133.       coordinates.forEach((coordinate) => {
    134.         const mesh = drawExtrudeMesh(coordinate, color, projection1);
    135.         const line = lineDraw(coordinate, color, projection1);
    136.         // 唯一标识
    137.         mesh.properties = feature.properties.name;
    138.  
    139.         province.add(line);
    140.         province.add(mesh);
    141.       });
    142.     }
    143.     map.add(province);
    144.   });
    145.   scene.add(map);
    146. }
    147.  
    148. function lineDraw(polygon, color, projection) {
    149.   const lineGeometry = new THREE.BufferGeometry();
    150.   const pointsArray = new Array();
    151.   polygon.forEach((row) => {
    152.     const [x, y] = projection(row);
    153.     // 创建三维点
    154.     pointsArray.push(new THREE.Vector3(x, -y, 9));
    155.   });
    156.   // 放入多个点
    157.   lineGeometry.setFromPoints(pointsArray);
    158.   // 生成随机颜色
    159.   const lineColor = new THREE.Color(
    160.     Math.random() * 0.5 + 0.5,
    161.     Math.random() * 0.5 + 0.5,
    162.     Math.random() * 0.5 + 0.5
    163.   );
    164.  
    165.   const lineMaterial = new THREE.LineBasicMaterial({
    166.     color: lineColor,
    167.   });
    168.   return new THREE.Line(lineGeometry, lineMaterial);
    169. }
    170.  
    171. // 根据经纬度坐标生成物体
    172. function drawExtrudeMesh(polygon, color, projection) {
    173.   const shape = new THREE.Shape();
    174.   // console.log(polygon, projection);
    175.   polygon.forEach((row, i) => {
    176.     const [x, y] = projection(row);
    177.     // console.log(row, [x, y]);
    178.     if (i === 0) {
    179.       // 创建起点,使用moveTo方法
    180.       // 因为计算出来的y是反过来，所以要进行颠倒
    181.       shape.moveTo(x, -y);
    182.     }
    183.     shape.lineTo(x, -y);
    184.   });
    185.  
    186.   // 拉伸
    187.   const geometry = new THREE.ExtrudeGeometry(shape, {
    188.     depth: 5,
    189.     bevelEnabled: true,
    190.   });
    191.  
    192.   // 随机颜色
    193.   const randomColor = (0.5 + Math.random() * 0.5) * 0xffffff;
    194.   const material = new THREE.MeshBasicMaterial({
    195.     color: randomColor,
    196.     transparent: true,
    197.     opacity: 0.5,
    198.   });
    199.   return new THREE.Mesh(geometry, material);
    200. }
    201.  
    202. // 监听鼠标
    203. window.addEventListener("click", onRay);
    204. // 全局对象
    205. let lastPick = null;
    206. function onRay(event) {
    207.   let pickPosition = setPickPosition(event);
    208.   const raycaster = new THREE.Raycaster();
    209.   raycaster.setFromCamera(pickPosition, camera);
    210.   // 计算物体和射线的交点
    211.   const intersects = raycaster.intersectObjects([map], true);
    212.   // 数组大于0 表示有相交对象
    213.   if (intersects.length > 0) {
    214.     if (lastPick) {
    215.       if (lastPick.object.properties !== intersects[0].object.properties) {
    216.         lastPick.object.material.color.set("#99ff99");
    217.         lastPick = null;
    218.       }
    219.     }
    220.     if (intersects[0].object.properties) {
    221.       intersects[0].object.material.color.set("red");
    222.     }
    223.     lastPick = intersects[0];
    224.   } else {
    225.     if (lastPick) {
    226.       // 复原
    227.       if (lastPick.object.properties) {
    228.         lastPick.object.material.color.set("yellow");
    229.         lastPick = null;
    230.       }
    231.     }
    232.   }
    233. }
    234.  
    235. /**
    236.  * 获取鼠标在three.js 中归一化坐标
    237.  * */
    238. function setPickPosition(event) {
    239.   let pickPosition = { x: 0, y: 0 };
    240.   // 计算后 以画布 开始为 （0，0）点
    241.   const pos = getCanvasRelativePosition(event);
    242.   // 数据归一化
    243.   pickPosition.x = (pos.x / canvas.width) * 2 - 1;
    244.   pickPosition.y = (pos.y / canvas.height) * -2 + 1;
    245.   return pickPosition;
    246. }
    247.  
    248. // 计算 以画布 开始为（0，0）点 的鼠标坐标
    249. function getCanvasRelativePosition(event) {
    250.   const rect = canvas.getBoundingClientRect();
    251.   return {
    252.     x: ((event.clientX - rect.left) * canvas.width) / rect.width,
    253.     y: ((event.clientY - rect.top) * canvas.height) / rect.height,
    254.   };
    255. }

  • 相关阅读:
    spring整合mybatis的xml配置
    node/npm/nvm node /以及镜像的安装和使用
    leetcode: 49. 字母异位词分组
    【day10.01】使用select实现服务器并发
    神经网络需要的数学知识,神经网络的数学基础
    蓝禾，三七互娱，顺丰，康冠科技，金证科技24春招内推
    【电路理论】ArcGIS pro运行Linkage map3.0
    【场景化解决方案】“云上管车”连接货运系统，帮助企业高效调度车辆
    房产新闻查询易语言代码
    mysql毫秒日期相互转换
  • 原文地址：https://blog.csdn.net/damadashen/article/details/126216716