three几何线在mapbox地图显示

1、首先引入three与mapbox库

 <script src="./js/mapbox-gl.js"></script><link href="./js/mapbox-gl.css" rel="stylesheet" /><style>body {margin: 0;padding: 0;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}</style></head><body><script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>

2、加载mapbox地图

  //创建mapbox地图mapboxgl.accessToken ='pk.eyJ1IjoiaG9yc2VmYWNlZCIsImEiOiJjazFzbmVtZm8wZTN4M2JvMHM4NmhjOHF3In0.pt5o3NcTrnXjEt41vnm2oA';var map = (window.map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/light-v10',zoom: 7,center: [104.070606, 30.611274],pitch: 60,antialias: true, // create the gl context with MSAA antialiasing, so custom layers are antialiased}));

3、加载three几何并创建自定义图层

 var start = [104.070606, 30.611274];//初始位置var startAltitude = 0;//起始高度var startCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(start, startAltitude);//转变坐标console.log(startCoordinate);var end = [104.807073, 29.35702];//结束位置var endAltitude = 100000;//结束高度var endCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(end, endAltitude);//转变坐标// console.log('end is ');// console.log(endCoordinate);/* Since our 3D model is in real world meters, a scale transform needs to be* applied since the CustomLayerInterface expects units in MercatorCoordinates.*///var scale = modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()//类型数组创建顶点数据var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象let pointArr = [];pointArr.push(startCoordinate.x, startCoordinate.y, startCoordinate.z);pointArr.push(endCoordinate.x, endCoordinate.y, endCoordinate.z);var vertices = new Float32Array(pointArr);// 创建属性缓冲区对象var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标// 设置几何体attributes属性的位置属性geometry.attributes.position = attribue;// 线条渲染几何体顶点数据var material = new THREE.LineBasicMaterial({color: 0x0000ff, //线条颜色linewidth: 120,// linecap: 'round', //ignored by WebGLRenderer// linejoin: 'round', //ignored by WebGLRenderer}); //材质对象var THREE = window.THREE;var line = new THREE.Line(geometry, material); //线条模型对象var customLayer = {id: '3d-model',type: 'custom',renderingMode: '3d',onAdd: function (map, gl) {this.camera = new THREE.Camera();this.scene = new THREE.Scene();// create two three.js lights to illuminate the model  两个灯光var directionalLight = new THREE.DirectionalLight(0xffffff);directionalLight.position.set(0, -70, 100).normalize();this.scene.add(directionalLight);var directionalLight2 = new THREE.DirectionalLight(0xffffff);directionalLight2.position.set(0, 70, 100).normalize();this.scene.add(directionalLight2);this.scene.add(line);this.map = map;// use the Mapbox GL JS map canvas for three.jsthis.renderer = new THREE.WebGLRenderer({canvas: map.getCanvas(),context: gl,antialias: true,});this.renderer.autoClear = false;},render: function (gl, matrix) {var m = new THREE.Matrix4().fromArray(matrix);this.camera.projectionMatrix = m;this.renderer.state.reset();this.renderer.render(this.scene, this.camera);this.map.triggerRepaint();},};map.on('style.load', function () {map.addLayer(customLayer, 'waterway-label');});

注意：
three与mapbox相结合必须创建mapbox自定义图层

核心代码： three画线并转经纬度

          // 参数，以确保模型在地图上的地理引用正确  var start = [104.070606, 30.611274];//初始位置var startAltitude = 0;//起始高度var startCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(start, startAltitude);//转变坐标console.log(startCoordinate);var end = [104.807073, 29.35702];//结束位置var endAltitude = 100000;//结束高度var endCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(end, endAltitude);//转变坐标// console.log('end is ');// console.log(endCoordinate);/* Since our 3D model is in real world meters, a scale transform needs to be* applied since the CustomLayerInterface expects units in MercatorCoordinates.*///var scale = modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()//类型数组创建顶点数据var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象let pointArr = [];pointArr.push(startCoordinate.x, startCoordinate.y, startCoordinate.z);pointArr.push(endCoordinate.x, endCoordinate.y, endCoordinate.z);var vertices = new Float32Array(pointArr);// 创建属性缓冲区对象var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标// 设置几何体attributes属性的位置属性geometry.attributes.position = attribue;// 线条渲染几何体顶点数据var material = new THREE.LineBasicMaterial({color: 0x0000ff, //线条颜色linewidth: 120,// linecap: 'round', //ignored by WebGLRenderer// linejoin: 'round', //ignored by WebGLRenderer}); //材质对象

three几何线在mapbox地图显示相关推荐

基于先验激光雷达地图的2D-3D线特征单目定位
论文标题 Monocular Camera Localization in Prior LiDAR Maps with 2D-3D Line Correspondences 1. 摘要对于视觉导航任 ...
hypermesh抽中面后的处理_总结|Hypermesh中几何清理命令汇总
原标题:总结|Hypermesh中几何清理命令汇总 Hypermesh中几何清理命令汇总在有限元分析中,由于三维模型中具有大量的圆角.螺栓孔.交叉面.微小曲面等特征,给前处理带来了极大的麻烦,因此前 ...
直线圆弧的切换和中心线与构造线
当我们使用直线命令时,如果我们想要连续做直线的画(即上一条直线的终点连着下一条直线的起点),那么我们可以选择在第一条直线的起点处单机左键,然后将鼠标移动到终点处,再次单击,即可完成. 但是我们如果想要 ...
HyperMesh 实用教程（四）几何
Blog Links DalNur | 博客总目录 HyperMesh 实用教程(〇)简介 HyperMesh 实用教程(一)组件 HyperMesh 实用教程(二)面板 HyperMesh 实用教程 ...
Google Earth Engine（GEE）——GEE最全介绍（7000字长文）初学者福音！
地球引擎代码编辑器 code.earthengine.google.com 上的地球引擎 (EE) 代码编辑器是用于地球引擎 JavaScript API 的基于网络的 IDE.代码编辑器功能旨在快 ...
Partitioning of Geographic Data（NDS，导航数据标准中的地理数据分区）
地理数据映射到NDS数据库,NDS坐标系统编码,tile划分. 7.1 坐标参考系 NDS使用墨卡托投影或结合wgs84和EGM96进行地图投影和定位目标. 7.1.1 WGS 84和EGM 96 N ...
中国书法的造型元素与原理刘彦湖
为什么80%的码农都做不了架构师?>>> ------------------------------------------------------------------- ...
详解AI Lab 21篇CVPR 2018论文（附论文）
来源:量子位本文共8300字,建议阅读10分钟. 本文从立题背景.作者思路及研究特点为你详解计算机视觉顶会论文. 一年一度的计算机视觉顶会CVPR即将召开,入选论文也陆续揭晓. 今天分享入选论文解析 ...
CVPR 2018 | 腾讯AI Lab入选21篇论文详解
来源:腾讯AI实验室近十年来在国际计算机视觉领域最具影响力.研究内容最全面的顶级学术会议CVPR,近日揭晓2018年收录论文名单,腾讯AI Lab共有21篇论文入选,位居国内企业前列,我们将在下文进 ...

three几何线在mapbox地图显示

three几何线在mapbox地图显示相关推荐

最新文章

热门文章