threejs(18) - 地图模型加载

在这里插入图片描述

GeoJSON是什么

如果你接触过数据可视化,那么大概率会知道GeoJSON。不知道?没关系,本文将为您娓娓道来!
GeoJSON是一种对各种地理数据结构进行编码的格式,基于Javascript对象表示法的地理空间信息数据交换格式。

官网: https://geojson.org/

中文翻译:https://www.oschina.net/translate/geojson-spec

GeoJSON对象

GeoJSON对象必须由一个名字为"type"的成员。
type成员的值必须是下面之一:“Point”, “MultiPoint”, “LineString”, “MultiLineString”, “Polygon”, “MultiPolygon”, “GeometryCollection”, “Feature”, 或者 “FeatureCollection”。
GeoJSON对象分为三种:几何对象、特征对象、特征集合对象
note: 下面的代码都可以在 geojson.io 查看效果,如下:

在这里插入图片描述

几何对象

GeoJSON支持以下几何类型:Point,MultiPoint,LineString,MultiLineString,Polygon,和MultiPolygon。
除了“GeometryCollection”外的其他任何类型的GeoJSON几何对象必须由一个名字为"coordinates"的成员。coordinates成员的值总是数组。这个数组里的元素的结构由几何类型来确定。

点(Point)
{ "type": "Point", "coordinates": [100.0, 0.0] }

多点(MultiPoint)

{
    "type": "MultiPoint",
    "coordinates": [
        [ 100, 0 ],
        [ 101, 1 ]
    ]
}

线 (LineString)

{
    "type": "MultiLineString",
    "coordinates": [
        [ [100.0, 0.0], [101.0, 1.0] ],
        [ [102.0, 2.0], [103.0, 3.0] ]
    ]
}

多边 (Polygon)

没有孔的:

{
    "type": "Polygon",
    "coordinates": [
        [
            [ 100, 0 ],
            [ 101, 0 ],
            [ 101, 1 ],
            [ 100, 1 ],
            [ 100, 0 ]
        ]
    ]
}

有孔的:

{
    "type": "Polygon",
    "coordinates": [
        [
            [ 100, 0 ],
            [ 101, 0 ],
            [ 101, 1 ],
            [ 100, 1 ],
            [ 100, 0 ]
        ],
        [
            [ 100.2, 0.2 ],
            [ 100.8, 0.2 ],
            [ 100.8, 0.8 ],
            [ 100.2, 0.8 ],
            [ 100.2, 0.2 ]
        ]
    ]
}

多多边(和MultiPolygon)

{
  "type": "MultiPolygon",
  "coordinates":
    [ 
        [[[102.0, 2.0], [103.0, 2.0], [103.0, 3.0], [102.0, 3.0], [102.0, 2.0]]],
        [
            [
                [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]
            ],
            [
                [100.2, 0.2], [100.8, 0.2], [100.8, 0.8], [100.2, 0.8], [100.2, 0.2]
            ]
        ]
    ]
}

几何集合

{ "type": "GeometryCollection",
  "geometries": [
    { "type": "Point",
      "coordinates": [100.0, 0.0]
      },
    { "type": "LineString",
      "coordinates": [ [101.0, 0.0], [102.0, 1.0] ]
      }
  ]
}

特征对象

类型为"Feature"的GeoJSON对象是特征对象。
特征对象必须由一个名字为"geometry"的成员,这个几何成员的值是上面定义的几何对象或者JSON的null值。
特征对戏那个必须有一个名字为“properties"的成员,这个属性成员的值是一个对象(任何JSON对象或者JSON的null值)。
如果特征是常用的标识符,那么这个标识符应当包含名字为“id”的特征对象成员。

{
    "type":"Feature",
    "properties":{},
    "geometry":{ "type": "Point", "coordinates": [100.0, 0.0] }
}

特征集合对象

特征集合对象type为FeatureCollection。
类型为"FeatureCollection"的对象必须由一个名字为"features"的成员。与“features"相对应的值是一个数组。这个数组中的每个元素都是上面定义的特征对象。

{
  "type": "FeatureCollection",
  "features": []
}

坐标参考系统对象

GeoJSON对象的坐标参考系统(CRS)是由它的"crs"成员(指的是下面的CRS对象)来确定的。如果对象没有crs成员,那么它的父对象或者祖父对象的crs成员可能被获取作为它的crs。如果这样还没有获得crs成员,那么默认的CRS将应用到GeoJSON对象。

边界框

GeoJSON对象可能有一个名字为"bbox的成员。bbox成员的值必须是2*n数组,这儿n是所包含几何对象的维数,并且所有坐标轴的最低值后面跟着最高者值。

### 使用 Three.js 加载 3D 地图 Three.js 是一个用于创建基于 WebGL 的 3D 图形的强大库。要加载并显示 3D 地图,通常涉及以下几个方面: 1. **准备地理数据** - 需要有合适的三维模型文件或者地形高度图来表示地图特征。这些可以是通过 GIS 工具导出的 STL 文件、OBJ 文件或者其他支持的格式。 2. **加载几何体和材质** - 利用 `THREE.BufferGeometry` 和相应的材料类(如 `MeshStandardMaterial` 或者其他适合表现自然景观效果的材质),可以从外部资源加载网格对象。 3. **应用纹理映射** - 对于更真实的视觉体验,在加载后的物体上贴附卫星影像或其他类型的图像作为表面纹理是非常重要的一步操作[^1]。 4. **集成交互功能** - 提供用户界面以便浏览不同视角下的场景;比如可以通过 OrbitControls 实现鼠标控制相机旋转平移缩放等功能。 下面是一个简单的代码片段展示如何使用 Three.js 来加载 OBJ 格式的建筑物模型,并将其放置在一个模拟的城市环境中: ```javascript // 初始化渲染器、场景以及摄像机... const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 设置光源... scene.add(new THREE.AmbientLight(0x404040)); const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(1, 1, 1).normalize(); scene.add(light); // 创建地面平面... const geometryGround = new THREE.PlaneBufferGeometry(100, 100); const materialGround = new THREE.MeshBasicMaterial({ color: 0xcccccc, }); const groundPlane = new THREE.Mesh(geometryGround, materialGround); groundPlane.rotation.x = Math.PI * -.5; scene.add(groundPlane); // 加载建筑模型 (假设为 .obj 文件) ... const loader = new THREE.OBJLoader(); loader.load('path/to/building.obj', function(object){ object.scale.set(.1,.1,.1); // 调整大小以适应视窗比例 scene.add(object); }); camera.position.z = 5; function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 此段脚本展示了基本框架设置之后,利用 `THREE.OBJLoader()` 方法读取本地存储的对象文件,并调整其尺寸使之融入到整个虚拟城市布局之中。 对于更复杂的项目来说,则可能需要用到第三方插件和服务来进行高精度的地图建模工作,例如 CesiumJS 可提供全球范围内的地理空间可视化能力,而 Mapbox GL JS 支持矢量瓦片样式定制化服务等工具可以帮助构建更为精细逼真的在线地图应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值