使用技術：根據經緯度坐標集合，使用形狀幾何體ShapeGeometry繪制
根據包圍盒大小設置 正投影相機位置 系數
下面以河南省為例：

// 河南邊界輪廓坐標var arr = [[110.3906, 34.585],[110.8301, 34.6289],[111.1816, 34.8047],[111.5332, 34.8486],[111.7969, 35.0684],[112.0605, 35.0684],[112.0605, 35.2881],[112.7637, 35.2002],[113.1152, 35.332],[113.6426, 35.6836],[113.7305, 36.3428],[114.873, 36.123],[114.9609, 36.0791],[115.1367, 36.2109],[115.3125, 36.0791],[115.4883, 36.167],[115.3125, 35.8154],[116.1035, 36.0791],[115.4883, 35.7275],[115.2246, 35.4199],[115.0488, 35.376],[114.7852, 35.0684],[115.4004, 34.8486],[115.5762, 34.585],[116.1914, 34.585],[116.1914, 34.4092],[116.543, 34.2773],[116.6309, 33.9258],[116.1914, 33.7061],[116.0156, 33.9697],[115.6641, 34.0576],[115.5762, 33.9258],[115.5762, 33.6621],[115.4004, 33.5303],[115.3125, 33.1787],[114.873, 33.1348],[114.873, 33.0029],[115.1367, 32.8711],[115.2246, 32.6074],[115.5762, 32.4316],[115.8398, 32.5195],[115.9277, 31.7725],[115.4883, 31.6846],[115.4004, 31.4209],[115.2246, 31.4209],[115.1367, 31.5967],[114.7852, 31.4648],[114.6094, 31.5527],[114.5215, 31.7725],[114.1699, 31.8604],[113.9941, 31.7725],[113.8184, 31.8604],[113.7305, 32.4316],[113.4668, 32.2998],[113.2031, 32.4316],[112.3242, 32.3438],[111.5332, 32.6074],[111.0059, 33.2666],[111.0059, 33.5303],[110.6543, 33.8379],[110.6543, 34.1455],[110.4785, 34.2334],[110.3906, 34.585]]var points = [];arr.forEach(elem => {points.push(new THREE.Vector2(elem[0], elem[1]))});var shape = new THREE.Shape(points);var geometry = new THREE.ShapeGeometry(shape);var material = new THREE.MeshPhongMaterial({color: 0x0000ff,side: THREE.DoubleSide});var mesh = new THREE.Mesh(geometry, material);scene.add(mesh);var width = window.innerWidth; //窗口寬度var height = window.innerHeight; //窗口高度var k = width / height; //窗口寬高比var s = 150; //三維場景顯示范圍控制系數，系數越大，顯示的范圍越大// var s = 3;//根據包圍盒尺寸的數量級，輔助設置你想要的渲染范圍var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1500);// var camera = new THREE.PerspectiveCamera(30, width / height, 1, 1500);camera.position.set(400, 300, 500); //設置相機位置camera.lookAt(new THREE.Vector3(0, 0, 0)); //坐標原點// 包圍盒計算模型對象的大小和位置var box3 = new THREE.Box3(); box3.expandByObject(mesh);// 計算模型包圍盒console.log('查看包圍盒box3', box3);var size = new THREE.Vector3();box3.getSize(size); // 計算包圍盒尺寸console.log('查看返回的包圍盒尺寸', size);var center = new THREE.Vector3();box3.getCenter(center); // 計算一個層級模型對應包圍盒的幾何體中心坐標console.log('查看幾何體中心坐標', center);// 設置相機目標觀察點，指向包圍盒幾何中心camera.lookAt(center); function render() {renderer.render(scene, camera);requestAnimationFrame(render);}render();var controls = new THREE.OrbitControls(camera, renderer.domElement);// 如果使用了相機控件，與上面lookAt代碼沖突，注意設置.target屬性controls.target.copy(center);controls.update(); //update()函數內會執行camera.lookAt(controls.target) 這樣一個河南省地圖就顯示出來了，如果想要地圖更精細，就設置更多更精細的經緯度坐標

總結

以上是生活随笔為你收集整理的使用Threejs自己画一个河南省地图（超简单）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。