WEBGl之THREEJS導入shp文件，生成三維模型

如果threejs可以導入shp文件，就可以呈現效果那是多么完美的事情啊！當然這是肯定的，那是我在經歷的痛苦期，現在來分享我的甜品。

ps.我的其中一篇是關於json格式的，知道我為啥這么了解嗎，就是最先的思路是將shp文件轉成json 的格式，然后用threejs 讀取。然后就沒有然后了。

有個偶然，一個QQ群的人，告訴我有個大神寫了shp.js，可以讀取線坐標，這才是我豁然開朗。（附上：https://www.bram.us/2012/07/30/shp-js-javascript-shapefile-parser/）

這只是一個開始。。。。。。正如大家看到的，這個怎么是圓的，我的內心是崩潰的。。

 

之后，我就開始潛心，通讀代碼，已經修改代碼之旅了。。。。（大家也可以下載上面的那個網址的示例，附有代碼的，可以改着玩）

 

首先是，shp.js看到這個js，我直接放棄了，這不是真的放棄，指的是根本不用修改其中的代碼，目的很明確就是將shp格式的文件讀取出來（點、線、面）。

shp_three.js(要說shp.js是核心，那這是核心中的核心)

思路：第一步要做的就是怎么把圓的變成平的

在shp_three.js中有spherize

是不是很開心，沒錯，就是這個才讓整體效果變成圓形的，因此，不多說，直接將這段代碼注釋。如下

/* if (spherize)
 {
   //判斷是球形狀嗎，是的話，
   var a = -x/180*Math.PI;
   var t = y/180*Math.PI;
   y = Math.sin(t) * 90;
   x = Math.cos(a) * 90 * Math.cos(t);
   var z = Math.sin(a) * 90 * Math.cos(t);
   poly.push(new THREE.Vector3(x, y, z));
 }
 else
 {
   poly.push(new THREE.Vector3(x, y, 0));
 }*/

知道不是只有這么一處

/* if (spherize) {
    var k;
     //方案一、平面
    var verts = [];
    var vs = geo.vertices;
    for (k=0; k<geo.faces.length; k++) {
    var f = geo.faces[k];
    verts.push(vs[f.a], vs[f.b], vs[f.c]);
    }
    geo = new THREE.Geometry();
    geo.vertices = verts;
    for (k=0; k<verts.length; k+=3) {
    geo.faces.push(new THREE.Face3(k, k+1, k+2));
    }
     //方案二、曲面
    /!*for (k=0; k<geo.vertices.length; k++) {
      var v = geo.vertices[k];
      var a = -v.x/180*Math.PI;
      var t = v.y/180*Math.PI;
      v.y = Math.sin(t);
      v.x = Math.cos(a) * Math.cos(t);
      v.z = Math.sin(a) * Math.cos(t);
      }
      for (k=0; k<geo.vertices.length; k++) {
      geo.vertices[k].setLength(90);
      }*!/
 }*/

我自己隨便在本地找了一個shp，效果：

 

這樣就差不多能把它變成平的了，但是我們的目的是要顯示三維呀，平的沒用！

然后，就要進行拉伸處理

原先，它的代碼，就是lines.push(geo)。

if (false && r.type == SHP.POLYGON)
{
  console.log('new polygon', poly.length, points.length/2);
  poly.pop();
  polys.push(new THREE.ExtrudeGeometry(new THREE.Shape(poly), {amount: 0}));
}
else
{
  console.log('new polyline', poly.length, points.length/2);
  var geo = new THREE.Geometry();
  geo.vertices = poly;
    lines.push(geo);

我們要把它改成

if (false && r.type == SHP.POLYGON)
{
  console.log('new polygon', poly.length, points.length/2);
  poly.pop();
  polys.push(new THREE.ExtrudeGeometry(new THREE.Shape(poly), {amount: 0}));
}
else
{
  console.log('new polyline', poly.length, points.length/2);

    var geo=new THREE.ExtrudeGeometry(new THREE.Shape(poly), {
        amount:10,
        bevelThickness: 2,
        bevelSize: 0.5,
        bevelEnabled: false,
        curveSegments: 12});
    lines.push(geo);

到此，差不多效果就出來了，咱們加上光照，材質等

 

效果

 

目前只是修改到這里，只是實現了三維的效果，關於材質、光照以及更美好的展現，還有待進一步的研究。