three.js SVG 学习绘制地图

https://www.js-css.cn/jscode/other/other43/
找到一个不错的资源，不过每个省份的svg数据太小了，不精确。

主要的是这个js文件：chinaMapConfig.js，有了它我们就可以根据svg路径绘制三维模型了。

这个网站也有svg的地图。http://mapsvg.com/maps/，相对精确一些，投影方式也不一样。

先测试一下内蒙古，没有问题。

var neimongol= transformSVGPathExposed(chinaMapConfig.shapes.neimongol);
var extrudeSettings = {steps: 2,depth: 16,bevelEnabled: true,bevelThickness: 1,bevelSize: 1,bevelSegments: 1
};
var geometry = new THREE.ExtrudeGeometry( neimongol, extrudeSettings );
var materiala = new THREE.MeshPhongMaterial( {color: 0x00ffff ,// wireframe:true
} );
var mesha = new THREE.Mesh( geometry, materiala ) ;
scene.add( mesha );

接着我们开始利用svg绘制完整的三维中国地图：

三维地图绘制完整，有点单调，添加一个交互事件。点击每个省份可以出发一个事件。

由于svg的坐标和three.js的坐标不一样，所以需要转换。
我新建了两个group，一个是把所有的省份添加进去，然后进行缩放平移操作。平移的依据是添加的box3，它计算出了group的包围盒。因为地图的本地坐标系不在中心，所以又添加了一个group是用来旋转操作。
最后使用Raycaster来检测点击的省份，并改变颜色，同时绘制了一个长方体。传参数group.children。只检测省份，默认是scene.children。

var group = new THREE.Group();
var chinaMap = new THREE.Group();window.addEventListener( 'click', onDocumentMouseDown, false );var extrudeSettings = {steps: 2,depth: 8,bevelEnabled: false,bevelThickness: 1,bevelSize: 1,bevelSegments: 1
};for (let shapesKey in chinaMapConfig.shapes) {var materiala = new THREE.MeshPhongMaterial( {color: 0xffffff*Math.random()} );var shapesvgs= $d3g.transformSVGPath(chinaMapConfig.shapes[shapesKey]);var geometry = new THREE.ExtrudeGeometry( shapesvgs.toShapes(true), extrudeSettings );var mesha = new THREE.Mesh( geometry, materiala ) ;group.add( mesha );
}
group.scale.set(0.05,0.05,0.05);
var box = new THREE.Box3().expandByObject(group);
var bx = box.max.x-box.min.x,by = box.max.y-box.min.y,bz = box.max.z-box.min.z;
group.position.set(-bx/2,-by/2,-bz/2);
chinaMap.add(group);
chinaMap.rotation.x = Math.PI/2;
scene.add(chinaMap);function onDocumentMouseDown(event) {var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);vector = vector.unproject(camera);var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());var intersects = raycaster.intersectObjects(group.children); if(intersects.length>0){console.log(intersects[0].point);intersects[0].object.material.color.set(0xff0000*Math.random());cubeDr(4,intersects[0].point.x,intersects[0].point.y+4/2,intersects[0].point.z);}
}

哦，上面忘记了介绍svg插件了。https://github.com/asutherland/d3-threeD。
这个插件也是7年没更新了，但是也不影响使用哈。
使用transformSVGPathExposed方法的时候需要引用下面的js插件。
<script src="../threejs/d3-three3D.js"></script>

两种常见的投影方式：

右侧的是叫墨卡托投影，是正轴等角圆柱投影。由荷兰地图学家墨卡托(G.Mercator)于1569年创立。假想一个与地轴方向一致的圆柱切或割于地球，按等角条件，将经纬网投影到圆柱面上，将圆柱面展为平面后，即得本投影。墨卡托投影在切圆柱投影与割圆柱投影中，最早也是最常用的是切圆柱投影。
左侧地图中台湾的左边又一条经度线，是倾斜的。但是在右边的图中，经度线就回成为垂直的。

上面的方法是使用svg的方法，有点局限性，一个是svg的地图难找，而且精确度难以把握，另一个原因是在地理数据可视化中，经纬度用不上。所以我们得改进一下，在我的另外一篇博客中介绍了使用geojson的方法绘制地图，这种方式的可操作行更好，值得学习。

Three.js之GeoJson 3D地图数据可视化飞行线实战

TMD离谱，文章内容违反国家相关法律法规了。 所以图片全部删了，换成你们看到的样子。

three.js SVG 学习绘制三维地图相关推荐

html绘制三维,在HTML + JS画布中绘制三维图形
是否有任何框架/引擎能够在Canvas上绘制三维图像?在HTML + JS画布中绘制三维图形我打算画位于一个平面一些基元(不同形状的): var dist = 2; var hexHalfW = 3 ...
jeremy的路径规划学习-1.三维地图定义，散点拟合插值与粒子群算法（matlab实现）
jeremy的路径规划学习-1.三维地图定义,散点拟合插值与粒子群算法(matlab实现) 本文基于小黎的ally学习资料实现,感谢该博主的无私奉献三维地图与二维地图的差别 1.二维无高度信息,多用 ...
js室内地图开发_如何使用JS来开发室内三维地图的轨迹回放功能
在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回放 ...
FGMap学习之--三维地图
你是否想让自己的地图以三维的形式展示出来呢?在三维下查看QQ地图.Bing地图.MapABC地图或者自己的地图是否有不一样的感觉呢?今天我们就来看看如果使用FGMap API来实现这个功能. 上次我们 ...
使用EXCEL绘制三维地图（超简单的五分钟绘制地图方法，妈妈再也不用担心我不会画地图啦~）
博主为从区域规划转行地图学的小学渣一枚,最近处理数据希望对结果进行三维可视化,意外发现从小用到大的EXCEL可以绘制地图且功能非常强大,在这里做一下简单介绍,希望可以给看官提供些许帮助.那下面就开始吧 ...
《ESMap平台如何在线绘制三维可视化地图-易景空间地图》
最近在了解一些如何绘制三维地图的问题,其中有一个ESMap平台是使用了地图编辑器场景搭建的方式,并支持在线开发,可以达到快速开发三维可视化地图的目的.所以花了几天天的时间看看这方面的东西,并总结一下. ...
别好奇了，Excel绘制闪到发光的三维地图真的很简单！
excel 绘制三维地图,简单.快捷,今天分享给大家大概需要 2-4 分钟就可以学会 ok,直接开始首先 ,你要确保你的数据文件不是一个 csv 文件因为三维地图不能在 csv 文件中插入.所以 ...
别好奇了，excel 绘制闪到发光的三维地图真的很简单！
大家好,我是小一今天的文章来自于朋友圈,在基站分布那一篇文章中用到 excel 绘制三维地图,发现大家并不了解这种绘图方式鉴于在工作中我个人比较常用这种绘图方式,简单.快捷,所以今天分享给大家大 ...
高德地图 Web JS API示例学习笔记（3）——地图（三维地图）
文章目录三维地图 3D地图区域掩膜三维地图 3D地图 map = new AMap.Map('container', {resizeEnable: true,rotateEnable: true ...

three.js SVG 学习绘制三维地图

three.js SVG 学习绘制地图

两种常见的投影方式：

three.js SVG 学习绘制三维地图相关推荐

最新文章

热门文章