🌍yymap

Appearance

YY.ThreeScene ​

三维场景，three.js 场景对象

TIP

threeScene生成的三维图形组件都是基于YY.BaseObject,BaseObject是顶级父类，下面的都是它的子类,都拥有BaseObject的属性和方法

BaseObject
│   ExtrudePolygon
│   ExtrudePolygons
│   Bar
│   Bars
│   Line
│   Lines
│   ExtrudeLine
│   ExtrudeLins
│   Model
│   ExtrudeLineTrail
│   TripControl
│   Truck
│   Point
│   Points
│   Terrain
│   HeatMap
│   FatLine
│   FatLines
│   Box
│   Boxs
│   Water
│   TripLine
│   Pipe
│   Pipe
│   TrialLine
│   ArcLine
│   TripArcLine
│   TrialArcLine
│   ......

DANGER

一个地图上一般只有一个 threeScene 实例

TIP

这些功能可以在 mapplat 平台直接配置出来，应该尽量去使用地图管理系统

creation ​

  • constructor(id, options)
    • {string} id
    • {Object} options
      • {boolean} geometryEvents 是否开启事件监测，默认值 true,当 false，threeScene 不会触发任何事件
      • {boolean} light 是否开启增强光照，软白色的环境光，默认 false,开启后这个场景会亮很多
      • {number} identifyCountOnEvent 每次 pick baseobject 的个数，0 代表无数个，其他的数值代表其值，即每次有多个 baseobject 被 pick
      • {number} loopRenderCount 每帧可以添加到场景生的 baseobject 个数，用来控制延迟加载，合适的值可以对整个延迟加载有好的用户体验

example ​

method ​

isRendering() ​

  • 场景是否正在渲染过程中
  • 返回值： boolean

prepareToDraw(gl, scene, camera) ​

  • 图层初始化完成回调函数, 一般我们把自己的业务逻辑放在这个回调函数中执行
js
//3D 图层
const threeScene = new YY.ThreeScene(YY.H.uuid(), {
  // identify:false
  light: true,
});
map.addLayer(threeScene);

threeScene.prepareToDraw = function (gl, scene, camera) {
  addBuildings();
  threeScene.startAnimation();
};

coordinateToXYZ(lnglat, height) ​

  • 经纬度转三维坐标（XYZ）, 即 THREE.Vector3
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {number} height : 高度
  • 返回值： THREE.Vector3

heightToZ(height) ​

  • 高度转为 z , 即 THREE.Vector3 的 z
  • 参数
    • {number} height : 高度
  • 返回值： number

addMesh(baseObjects) ​

  • 添加场景物件 bar, wifi, billboard, terrain, t, beam 等
  • 参数
    • {YY.BaseObject || Array[YY.BaseObject]} baseObjects :场景物件，单个物件或者物件的数组
  • 返回值： this

removeMesh(baseObjects) ​

  • 移除场景物件 bar, wifi, billboard, terrain, t, beam 等
  • 参数
    • {YY.BaseObject || Array[YY.BaseObject]} baseObjects :场景物件，单个物件或者物件的数组
  • 返回值： this

getCamera() ​

  • 获取相机
  • 返回值： THREE.Camera

getScene() ​

  • 获取场景
  • 返回值： THREE.Scene

renderScene() ​

  • 渲染场景
  • 返回值： this

loop(render=true) ​

  • 延迟加载循环函数
  • 参数
    • {boolean} render :是否每次循环都渲染
  • 返回值： this

getThreeRenderer(render=true) ​

  • 获取 webgl 渲染器
  • 返回值： THREE.WebGLRenderer

getPick() ​

  • 获取 GPUPick 组件，一般自定义图形组件开发时用到
  • 返回值： GPUPick

delayAddMesh(baseObjects) ​

  • 将图形组件添加到延迟队列里
  • 参数
    • {YY.BaseObject || Array[YY.BaseObject]} baseObjects :场景物件，单个物件或者物件的数组
  • 返回值： this

identify(coordiante,options) ​

  • 图形命中检测
  • 参数
    • {YY.LngLat} coordiante :坐标值
    • {Object} options :配置项
  • 返回值： Array[YY.BaseObject]

startAnimation() ​

  • 开启动画，整个 ThreeLayer 开启动画
  • 返回值： this

stopAnimation() ​

  • 关闭动画，整个 ThreeLayer 关闭动画
  • 返回值： this

isAnimation() ​

  • 是否处于动画状态
  • 返回值： boolean

toExtrudePolygon(polygon,options,material) ​

  • 构造拔高的多边形 demo
  • 参数
    • {YY.Polygon | YY.MultiPolygon | GeoJSON} polygon : 多边形
    • {Object} options : 配置信息
      • {number} options.height : 垂直高度 default value:0,
      • {number} options.bottomHeight : 悬空高度 default value:0,
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
      • {String} options.topColor :顶部颜色 默认 null
      • {String} options.bottomColor : 底部颜色 默认 '#2d2f61',
    • {THREE.Material} material : 材质
  • 返回值： ExtrudePolygon

toExtrudePolygons(polygons,options,material) ​

  • 构造拔高的多边形 demo
  • 参数
    • {Array[YY.Polygon | YY.MultiPolygon | GeoJSON]} polygons : 多边形,注意每个多边形请配置自己的 height 和 bottomHeight 信息
    • {Object} options : 配置信息
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
      • {String} options.topColor :顶部颜色 默认 null
      • {String} options.bottomColor : 底部颜色 默认 '#2d2f61',
    • {THREE.Material} material : 材质
  • 返回值： ExtrudePolygons

toBar(lnglat,options,material) ​

  • 构造拔高的柱子 demo
  • 参数
    • {YY.LngLat | Array} lnglat : 坐标
    • {Object} options : 配置信息
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
      • {String} options.topColor :顶部颜色 默认 null
      • {String} options.bottomColor : 底部颜色 默认 '#2d2f61',
      • {number} options.radius : 半径
      • {number} options.height :高度
    • {THREE.Material} material : 材质
  • 返回值： Bar

toBars(data,options,material) ​

  • 构造拔高的柱子 demo
  • 参数
    • {Array[Object]} data : 数据 Array[{coordinate:xxx,height:xxx,radius:xxxx}]
    • {Object} options : 配置信息
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
      • {String} options.topColor :顶部颜色 默认 null
      • {String} options.bottomColor : 底部颜色 默认 '#2d2f61',
    • {THREE.Material} material : 材质
  • 返回值： Bars

toLine(lineString,options,material) ​

  • 构造线条 demo
  • 参数
    • {YY.LineString | YY.MultiLineStirng | GeoJSON} lineString
    • {Object} options : 配置信息
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
      • {number} options.bottomHeight :悬空的高度
    • {THREE.Material} material : 材质
  • 返回值： Line

toLines(lineStrings,options,material) ​

  • 构造线条
  • 参数
    • {Array[YY.LineString | YY.MultiLineStirng | GeoJSON]} lineStrings 每个 lineString 应该有自己的 bottomHeight 属性
    • {Object} options : 配置信息
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • {THREE.Material} material : 材质
  • 返回值： Lines

toExtrudeLine(lineString,options,material) ​

  • 构造拔高扩宽的线条 demo
  • 参数
    • {YY.LineString | YY.MultiLineStirng | GeoJSON} lineString
    • {Object} options : 配置信息
      • {number} options.width : 宽度 米制
      • {number} options.height : 高度 米制
      • {number} options.bottomHeight :悬空的高度
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
      • {String} options.topColor :顶部颜色 默认 null
      • {String} options.bottomColor : 底部颜色 默认 '#2d2f61',
    • {THREE.Material} material : 材质
  • 返回值： ExtrudeLine

toExtrudeLines(lineStrings,options,material) ​

  • 构造拔高扩宽的线条
  • 参数
    • {Array[YY.LineString | YY.MultiLineStirng | GeoJSON]} lineStrings 每个线条应该设置自己的 width,height,bottomHeight 属性
    • {Object} options : 配置信息
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
      • {String} options.topColor :顶部颜色 默认 null
      • {String} options.bottomColor : 底部颜色 默认 '#2d2f61',
    • {THREE.Material} material : 材质
  • 返回值： ExtrudeLines

toModel(model,options) ​

  • 构造模型 demo
  • 参数
    • {THREE.Object3d} model 模型
    • {Object} options : 配置信息
      • {YY.LngLat | Array} options.coordinate : 位置
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： Model

toExtrudeLineTrail(lineString,options,material) ​

  • 构造拖尾动画的线条 demo
  • 参数
    • {YY.LineString | GeoJSON} lineString 线条
    • {Object} options : 配置信息
      • {number} options.trail : 尾巴的长度 默认 5
      • {number} options.chunkLength : 线段切割的长度
      • {number} options.width : 宽度
      • {number} options.height : 高度
      • {number} options.speed : 速度
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • {THREE.Material} material : 材质
  • 返回值： ExtrudeLineTrail

getTripLineParams(polyline, chunklength, height = 0) ​

  • 获取轨迹播放的相关参数 demo
  • 参数
    • { YY.Polyline | YY.LineString} polyline :线段,注意 polyline 不支持 MultiLineString
    • { number}} chunklength :线段切割长度
    • { number} height :高度
  • 返回值： Object

toTripControl(baseObject, tripParams, options) ​

  • 轨迹播放控件 demo
  • 参数
    • {BaseObject || Array[BaseObject]} object :需要播放的物体 ，例如 YY.Truck,支持数组，多个 baseObject
    • {Object} tripParams :轨迹参数 一般为 threeScene.getTripLineParams()的结果
    • {Object} options : 额外的配置信息
      • {number} options.speed :播放的速度 默认 1
      • {boolean} options.trip : 是否跟随，即使实时的设置地图的中心点为轨迹当前的点
      • {boolean} options.animation : 是否动画
      • {function} options.callback :播放过程中的回调函数
      • {boolean} options.rotationZ : 是否支持允许自动更新旋转角， 默认 true,object 会自动更新 angle
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： TripControl
js
const OPTIONS = {
  height: 0,
  color: "red",
  scale: 5,
};

const trucks = [];
polylines.forEach((polyline) => {
  // 小货车模型
  const truck = threeScene.toTruck(
    polyline.getLngLats()[0],
    YY.Util.extend({}, OPTIONS, {
      color: YY.randomColor(),
    })
  );
  trucks.push(truck);
  // 获取轨迹播放的参数
  const truckTripObejct = threeScene.getTripLineParams(polyline, 70, 0);
  // 轨迹播放控制器，这里用来控制小车的播放
  const _truckControl = threeScene.toTripControl(truck, truckTripObejct, {
    speed: 0.5,
  });
  truckControls.push(_truckControl);
});
truckControl = truckControls[0];
threeScene.add(trucks);
threeScene.add(truckControls);

toTruck(lnglat, options) ​

  • 小货车简易模型 一般用于轨迹播放 demo
  • 参数
    • {YY.LngLat | Array} lnglat :经纬度
    • {Object} options : 额外的配置信息
      • {string } options.color : 颜色 默认 0xa52523
      • {number} options.scale : 放大的倍数 默认 1
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： Truck
js
const OPTIONS = {
  height: 0,
  color: "red",
};
// 小货车，交通等场景下使用
const trucks = lnglats.map((lnglat) => {
  const car = threeScene.toTruck(
    lnglat,
    YY.Util.extend({}, OPTIONS, {
      color: YY.randomColor(),
    })
  );
  car.bindTooltip("Truck");
  return car;
});

toPoint(coordinate,options,material) ​

  • 构造点
  • 参数
    • {YY.LngLat | Array} coordinate 坐标
    • {Object} options : 配置信息
      • {string} options.color : 颜色 一般用于自定义材质时使用
      • {number} options.size : 大小 一般用于自定义材质时使用
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • {THREE.Material} material : 材质
  • 返回值： Point

toPoints(data,options,material) ​

  • 构造点
  • 参数
    • {Array[Object]} data 数据集 {coordinate:xxx,color:xxx,size:xxx}
    • {Object} options : 配置信息
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • {THREE.Material} material : 材质
  • 返回值： Points

toTileTerrain(extent,options,material) ​

  • 构造地形
  • 参数
    • {YY.Envelope | Array} extent 范围
    • {Object} options : 配置信息
      • {string} options.image : rgba image,海拔高度图片
      • {number} options.imageWidth : 图片宽度
      • {number} options.imageHeight : 图片高度
      • {string} options.texture : 纹理图片
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • {THREE.Material} material : 材质
  • 返回值： Terrain

toHeatMap(data,options,material) ​

  • 构造 3d 热区
  • 参数
    • {Array[Object]} data 数据集 {coordinate:xxx,count:xxxx}
    • {Object} options : 配置信息
      • {number} options.min : 权重的最小值 0
      • {number} options.max : 权重值得最大值 100
      • {number} options.size : 点的大小 13
      • {string} options.gradient : 渐变色 { 0.25: 'rgb(0,0,255)', 0.55: 'rgb(0,255,0)', 0.85: 'yellow', 1.0: 'rgb(255,0,0)' }
      • {string} options.gridScale : 网格缩放比列 0.5
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • {THREE.Material} material : 材质
  • 返回值： HeatMap

toFatLine(lineString,options,material) ​

  • 构造有粗度的线
  • 参数
    • {YY.LineString | YY.MultiLineString | GeoJSON} lineString 线条
    • {Object} options : 配置信息
      • {number} options.bottomHeight : 悬空高度
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • {THREE.Material} material : 材质
  • 返回值： FatLine

toFatLines(lineStrings,options,material) ​

  • 构造有粗度的线
  • 参数
    • {Array[YY.LineString | YY.MultiLineString | GeoJSON]} lineStrings 线条,每条数据应该有自己的 bottomHeight 属性值
    • {Object} options : 配置信息
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • {THREE.Material} material : 材质
  • 返回值： FatLines

toBox(coordinate,options,material) ​

  • 构造四边形的柱子
  • 参数
    • {YY.LngLat | Array} coordinate 坐标值
    • {Object} options : 配置信息
      • {number} options.radius : 半径
      • {number} options.height : 高度
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
      • {String} options.topColor : 顶部颜色 默认 null
      • {String} options.bottomColor : 底部的颜色 默认 '#2d2f61',
    • {THREE.Material} material : 材质
  • 返回值： Box

toBoxs(data,options,material) ​

  • 构造四边形的柱子
  • 参数
    • {Array[Object]} data 数据集 {coordinate:xxx,radius:xxx,height:xxx,topColor:xxx,bottomColor:xxxx}
    • {Object} options : 配置信息
      • {number} options.radius : 半径
      • {number} options.height : 高度
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
      • {String} options.topColor : 顶部颜色 默认 null
      • {String} options.bottomColor : 底部的颜色 默认 '#2d2f61',
    • {THREE.Material} material : 材质
  • 返回值： Boxs

toWater(polygon, options) ​

  • 构造水系, 模拟逼真的水
  • 参数
    • {YY.Polygon | YY.MultiPolygon]} polygon : 多边形
    • {Object} options : 额外的配置信息
      • {string} options.waterNormals : 水的纹理图片地址 默认为 null,这个参数为必填选项
      • {string} options.waterColor : 水的颜色 默认值 #15e8a9
      • {number} options.alitude : 海拔高度 default value:0,
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： Water

toTripLine(polyline, options,material) ​

  • 构造旅行的线段，轨迹的线段
  • 参数
    • { YY.Polyline | YY.LineString} polyline :线段,注意 polyline 不支持 MultiLineString
    • {Object} options : 额外的配置信息
      • {number} options.chunkLength :线段切割的长度 默认 50 米 ，例如 1000 米的线段会被切割成 20 份
      • {number} options.speed :播放的速度 默认 1
      • {string} options.color : 颜色 默认 #fff
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • {THREE.Material} material : 材质
  • 返回值： TripLine

toPipe(data, options,material) ​

  • 构造管道组件
  • 参数
    • { Array} data :数据的集合
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 default 10
      • {number} options.pointNumbers : 管道上的点集的个数 default 200
      • {number} options.segment : 管道的边数 default 10
      • {number} options.widthScale : 管道的横向缩放比例 default 1 当且仅当 segment=4 时起作用
      • {number} options.heightScale : 管道纵向缩放比例 default 1 当且仅当 segment=4 时起作用
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： Pipe

toTrialLine(polyline, options,material) ​

  • 构造拖尾的线
  • 参数
    • { YY.Polyline | YY.LineString} polyline :线段,注意 polyline 不支持 MultiLineString
    • {Object} options : 额外的配置信息
      • {number} options.chunkLength :线段切割的长度
      • {number} options.trial :尾巴的长度的个数，即 长度=trial*chunkLength
      • {number} options.speed :播放的速度 默认 1
      • {string} options.color : 颜色 默认 #fff
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： TrialLine
js
const DEFAULTOPTIONS = {
  pointNumbers: 100,
};
const lnglats = YY.GeometryHelper.strToLngLatArray(polyline);
const line = new YY.Polyline(YY.CoordTransUtil.transformAmapToWGS84(lnglats));
// 旅行的弧线
const triparcline = threeScene.toTripArcLine(
  line,
  YY.Util.extend({}, DEFAULTOPTIONS, {
    color,
  })
);

toArcLine(polyline, options,material) ​

  • 构造弧线线段
  • 参数
    • {YY.Polyline | YY.LineString} polyline : 线段，注意不管改线段有多少个节点，内部只会去第一个节点和最后一个节点
    • {Object} options : 额外的配置信息
      • {number} options.lineWidth :线的宽度 默认 1 单位像素
      • {string} options.color : 颜色 默认 #fff
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： ArcLine
js
const lnglats = YY.GeometryHelper.strToLngLatArray(polyline);
const line = new YY.Polyline(YY.CoordTransUtil.transformAmapToWGS84(lnglats));
// 弧线构造
const arcline = threeScene.toArcLine(line, {
  color,
});

toTripArcLine(polyline, options,material) ​

  • 构造旅行的弧线
  • 参数
    • {YY.Polyline | YY.LineString} polyline : 线段
    • {Object} options : 额外的配置信息
      • {number} options.pointNumbers :弧线上点的个数 默认 200，pointNumbers 越大 播放的速度越慢
      • {number} options.speed :播放的速度 默认 1
      • {string} options.color : 颜色 默认 #fff
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： TripArcLine
js
const DEFAULTOPTIONS = {
  pointNumbers: 100,
};
const lnglats = YY.GeometryHelper.strToLngLatArray(polyline);
const line = new YY.Polyline(YY.CoordTransUtil.transformAmapToWGS84(lnglats));
// 旅行的弧线
const triparcline = threeScene.toTripArcLine(
  line,
  YY.Util.extend({}, DEFAULTOPTIONS, {
    color,
  })
);

toTrialArcLine(polyline, options,material) ​

  • 构造拖尾的弧线
  • 参数
    • {YY.Polyline | YY.LineString} polyline : 线段
    • {Object} options : 额外的配置信息
      • {number} options.pointNumbers :弧线上点的个数 默认 200，pointNumbers 越大 播放的速度越慢
      • {number} options.trial :尾巴的长度个数 即尾巴
      • {number} options.speed :播放的速度 默认 1
      • {string} options.color : 颜色 默认 #fff
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： TrialArcLine
js
const DEFAULTOPTIONS = {
  pointNumbers: 100, //弧线上点的个数
  trial: 10, //尾巴的长度
  height: 100,
  color: "#33FFFF",
};
const lnglats = YY.GeometryHelper.strToLngLatArray(polyline);
const line = new YY.Polyline(YY.CoordTransUtil.transformAmapToWGS84(lnglats));
// 拖尾的弧线
const trialarcline = threeScene.toTrialArcLine(line, DEFAULTOPTIONS);

toTubeLine(polyline, options, material) ​

  • 构造管道,等价于 toExtrudeLine
  • 参数
    • {YY.Polyline | YY.LineString} polyline : 线段
    • {Object} options : 额外的配置信息
      • {number} options.lineWidth :管道的宽度 默认 2 单位米
      • {number} options.depth :管道的高度 厚度 默认 1 单位米
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： TubeLine
js
function getMaterial(color = "#0953BC") {
  return new THREE.MeshPhongMaterial({
    color,
  });
}

const lnglats = YY.GeometryHelper.strToLngLatArray(polyline);
const line = new YY.Polyline(YY.CoordTransUtil.transformAmapToWGS84(lnglats));
// 管道线
const basicLine = threeScene.toTubeLine(line, getMaterial(YY.randomColor()), {
  lineWidth: 100,
  depth: 3,
});

toTubeTripLine(polyline, options ,material) ​

  • 构造旅行的管道
  • 参数
    • {YY.Polyline | YY.LineString} polyline : 线段
    • {Object} options : 额外的配置信息
      • {number} options.lineWidth :管道的宽度 默认 2 单位米
      • {number} options.chunkLength :线段切割的长度 默认 50 单位米
      • {number} options.speed :播放的速度
      • {number} options.depth :管道的高度 厚度 默认 1 单位米
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： TubeTripLine
js
const DEFAULTOPTIONS1 = {
  chunkLength: 1000,
  lineWidth: 100,
  depth: 2,
  height: 0,
  speed: 1,
};

const tripline = threeScene.toTubeTripLine(line, material1, DEFAULTOPTIONS1);
triplines.push(tripline);

toTubeTrialLine(polyline, options, material) ​

  • 构造拖尾的管道
  • 参数
    • {YY.Polyline | YY.LineString} polyline : 线段
    • {Object} options : 额外的配置信息
      • {number} options.lineWidth :管道的宽度 默认 2 单位米
      • {number} options.chunkLength :线段切割的长度 默认 50 单位米
      • {number} options.trial :尾巴长度的个数
      • {number} options.speed :播放的速度
      • {number} options.depth :管道的高度 厚度 默认 1 单位米
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： TubeTrialLine
js
const DEFAULTOPTIONS1 = {
  trial: 15,
  chunkLength: 1000,
  lineWidth: 100,
  depth: 2,
  height: 0,
  speed: 1,
};
// 拖尾的管道线
const trialline = threeScene.toTubeTrialLine(line, material1, DEFAULTOPTIONS1);
triallines.push(trialline);

toTubeArcLine(polyline, options, material) ​

  • 构造弧线的管道
  • 参数
    • {YY.Polyline | YY.LineString} polyline : 线段
    • {Object} options : 额外的配置信息
      • {number} options.radius :管道的半径 单位米 默认 20
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： TubeArcLine
js
const lnglats = YY.GeometryHelper.strToLngLatArray(polyline);
const line = new YY.Polyline(YY.CoordTransUtil.transformAmapToWGS84(lnglats));
// 管道弧线
const basicLine = threeScene.toTubeArcLine(line, material1, {
  radius: 100,
});

toTubeTripArcLine(polyline, options, material) ​

  • 构造旅行的弧线的管道
  • 参数
    • {YY.Polyline | YY.LineString} polyline : 线段
    • {Object} options : 额外的配置信息
      • {number} options.radius :管道的半径 单位米 默认 20
      • {number} options.pointNumbers :管道上点的个数，点越多速度越慢 默认 200
      • {number} options.speed :播放的速度 默认 1
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： TubeTripArcLine
js
const DEFAULTOPTIONS1 = {
  radius: 105,
};
const trialline = threeScene.toTubeTripArcLine(
  line,
  material1,
  DEFAULTOPTIONS1
);
triplines.push(trialline);

toTubeTrialArcLine(polyline, options, material) ​

  • 构造拖尾的弧形的管道
  • 参数
    • {YY.Polyline | YY.LineString} polyline : 线段
    • {Object} options : 额外的配置信息
      • {number} options.radius :管道的半径 单位米 默认 20
      • {number} options.pointNumbers :管道上点的个数，点越多速度越慢 默认 200
      • {number} options.trial :尾巴的个数
      • {number} options.speed :播放的速度 默认 1
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： TubeTrialArcLine
js
const DEFAULTOPTIONS1 = {
  radius: 105,
  trial: 20,
};
const trialline = threeScene.toTubeTrialArcLine(
  line,
  material1,
  DEFAULTOPTIONS1
);
triallines.push(trialline);

toPointAloneLine(polylines, options, material) ​

  • 构造沿线运行的粒子系统，点集
  • 参数
    • {Array[YY.Polyline | YY.LineString]} polylines : 线段的集合
    • {Object} options : 额外的配置信息
      • {number} options.chunkLength : 切割线段的长度
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： PointAloneLine
js
// 点的材质
const pointsMaterial = new THREE.PointsMaterial({
  size: 15,
  depthTest: true,
  depthWrite: false,
  sizeAttenuation: false,
  blending: THREE.AdditiveBlending,
  map: new THREE.TextureLoader().load(PATH + "images/spark.png"),
  vertexColors: THREE.VertexColors, //顶点着色
  transparent: true,
});

// 颜色的集合
const colors = [];
for (let i = 0, len = polylines.length; i < len; i++) {
  const color = new THREE.Color();
  color.setHSL(i / len, 1.0, 0.5);
  colors.push(color);
}

const pointsAloneLine = threeScene.toPointAloneLine(polylines, pointsMaterial, {
  chunkLength: 10,
  colors: colors,
});

toPointAloneArcLine(polylines, options, material) ​

  • 构造沿弧线运行的粒子系统，点集
  • 参数
    • {Array[YY.Polyline | YY.LineString]} polylines : 线段的集合
    • {Object} options : 额外的配置信息
      • {number} options.pointNumbers : 线上点的个数,点的个数越多速度越慢
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： PointAloneArcLine
js
pointsAloneLine = threeScene.toPointAloneArcLine(
  polylines,
  getMaterial(params),
  {
    pointNumbers: 200,
  }
);

toWifi(lnglat, options, material) ​

  • 构造 WiFi 辐射标志
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 单位米 默认 300 米
      • {number} options.height : 垂直高度 单位米 默认 500
      • {number} options.circleHeight : 圆环的高度 单位米 默认 10
      • {number} options.circleOffset : 圆环之间的间距 单位米 默认 20
      • {number} options.speed : 动画的速度 默认 0.3
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： Wifi
js
const DEFAULTOPTIONS = {
  radius: 300,
  h: 500,
  circleHeight: 10,
  circleOffset: 20,
  speed: 0.3,
  height: 200,
  delay: 3000,
};
// WiFi形状的辐射标志，一般用于辐射表示
wifis = lnglats.map((lnglat) => {
  return threeScene.toWifi(
    lnglat,
    getMaterial(),
    YY.Util.extend({}, DEFAULTOPTIONS, {})
  );
});

toT(lnglat, options, material) ​

  • 构造 T 型辐射标志
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.coneRadius : 圆锥的半径 单位米 默认 50
      • {number} options.coneHeight : 圆锥的高度 单位米 默认 30
      • {number} options.sphereRadius : 球形的半径 单位米 默认 10
      • {number} options.cylinderRadius : 圆柱的半径 单位米 默认 5
      • {number} options.cylinderHeight : 圆柱的高度 默认 300
      • {number} options.speed : 旋转的动画时间 默认 0.1
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： T
js
const DEFAULTOPTIONS = {
  coneRadius: 50,
  coneHeight: 300,
  sphereRadius: 30,
  cylinderRadius: 5,
  cylinderHeight: 300,
  speed: 0.05,
};
ts = lnglats.map((lnglat) => {
  const t = threeScene.toT(
    lnglat,
    getMaterial(),
    YY.Util.extend({}, DEFAULTOPTIONS, {})
  );
  t.bindTooltip(YY.H.uuid());
  return t;
});

toGlowSphere(lnglat, options, material) ​

  • 构造透明的罩子型标志
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 单位米 默认 500
      • {string} options.color : 颜色 默认 0x00ffff
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： GlowSphere
js
//构造透明的罩子，一般用于保护，重点脱出等场景下使用
glowSphere = threeScene.toGlowSphere([120.67634557660585, 31.318559038158213], {
  radius: 1000,
  color: "green",
  delay: 3000,
});
glowSphere.bindTooltip("我是透明的罩子");

toFire(lnglat, options) ​

  • 构造火球型标志
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.scale : 缩放的倍数 默认 100 放大 100 倍
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： Fire
js
const OPTIONS = {
  scale: 30,
  height: 100,
};
// 火球 ，消防等场景下可以使用
const fires = lnglats.map((lnglat) => {
  const fire = threeScene.toFire(lnglat, OPTIONS);
  fire.bindTooltip(YY.H.uuid());
  return fire;
});

toBeam(lnglat, options) ​

  • 构造流动的光柱
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.height : 垂直的高度 默认 1000 单位米
      • {number} options.radius : 柱子的半径 默认 1 单位米
      • {number} options.speed : 播放的速度 默认 300
      • {string} options.color : 颜色 默认 white
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： Beam
js
// 构造光柱 beam
const mesh = threeScene.toBeam([lng, lat], {
  h: 5000 + Math.random() * 5000,
  radius: 10,
});

toEffectRing(lnglat, options, material) ​

  • 闪烁的环
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 默认 200 单位米
      • {number} options.ringWidth : 环的宽度 默认 10 单位米
      • {number} options.offset : 环之间的间距 默认 5 单位米
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： EffectRing
js
// 渐进的环
const circle = threeScene.toEffectRing([lng, lat], material, {
  radius: 200,
  ringWidth: 10,
  offset: 5,
  height: 200,
});

toEffectCircle(lnglat, options, material) ​

  • 波纹的圆
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 默认 200 单位米
      • {number} options.ringWidth : 环的宽度 默认 10 单位米
      • {number} options.offset : 环之间的间距 默认 5 单位米
      • {number} options.speed : 播放的速度 默认 0.4
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： EffectCircle
js
// 构造EffectCircle
const circle = threeScene.toEffectCircle([lng, lat], material, {
  radius: 300,
  ringWidth: 5,
  offset: 20,
  height: 200,
  speed: 0.2,
});

toRotateSector(lnglat, options, material) ​

  • 旋转的圆锥
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 默认 200 单位米
      • {number} options.height : 垂直的高度 默认 100 单位米
      • {number} options.startAngle : 开始的角度 默认 0
      • {number} options.endAngle : 结束的角度 默认 120
      • {number} options.speed : 旋转的速度 默认 0.1
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： RotateSector
js
const DEFAULTOPTIONS = {
  radius: 200,
  h: 100, //垂直高度
  startAngle: 0,
  endAngle: 200,
  speed: 0.1,
  height: 300,
  delay: 3000,
};
const rotatesector = threeScene.toRotateSector(
  lnglat,
  getMaterial(),
  YY.Util.extend({}, DEFAULTOPTIONS, {
    endAngle: 360 * Math.random(),
  })
);

toFlag(lnglat, options, material) ​

  • 事件标志物
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 默认 20 单位米
      • {number} options.height : 垂直的高度 默认 100 单位米
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： Flag
js
const OPTIONS = {
  radius: 20,
  h: 100,
};
// 事件标志物，一般用于交通事故等标志
flags = lnglats.map((lnglat) => {
  const flag = threeScene.toFlag(lnglat, getMaterial(), OPTIONS);
  flag.bindTooltip(YY.H.uuid());
  return flag;
});

toProgressiveCircle(lnglat, options, material) ​

  • 渐进的圆，闪烁的圆
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 默认 100 单位米
      • {number} options.speed : 播放的速度 默认 10
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： ProgressiveCircle
js
const OPTIONS = {
  radius: 200,
  height: 0,
  speed: 30,
  height: 100,
};
// 渐进的圆
bars = lnglats.map((lnglat) => {
  return threeScene.toProgressiveCircle(lnglat, getMaterial(), OPTIONS);
});

toProgressiveHex(lnglat, options, material) ​

  • 渐进的蜂窝
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 默认 100 单位米
      • {number} options.speed : 播放的速度 默认 10
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： ProgressvieHex
js
const OPTIONS = {
  radius: 100,
  speed: 30,
  height: 100,
};

const material = getMaterial();
// 渐进的蜂窝
bars = lnglats.map((lnglat) => {
  return threeScene.toProgressiveHex(lnglat, material, OPTIONS);
});

toProgressiveSphere(lnglat, options, material) ​

  • 渐进的球
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 默认 100 单位米
      • {number} options.speed : 播放的速度 默认 10
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： ProgressiveSphere
js
const OPTIONS = {
  radius: 100,
  height: 0,
  speed: 30,
};

// 渐进的球
bars = lnglats.map((lnglat) => {
  return threeScene.toProgressiveSphere(lnglat, getMaterial(), OPTIONS);
});

toProgressiveBar(lnglat, options, material) ​

  • 渐进的柱子
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 默认 10 单位米
      • {number} options.height : 垂直的高度 默认 400 单位米
      • {number} options.speed : 播放的速度 默认 100
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： ProgressiveBar
js
const OPTIONS = {
  radius: 30,
  h: 1000, //垂直高度
  speed: 100,
};

//构造渐进的柱子
bars = lnglats.map((lnglat) => {
  return threeScene.toProgressiveBar(lnglat, getMaterial(), OPTIONS);
});

toThumbtack(lnglat, options, material) ​

  • 图钉标志
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.sphereRadius : 球的半径 默认 20 单位米
      • {number} options.cylinderRadius : 圆柱的半径 默认 5 单位米
      • {number} options.cylinderHeight : 圆柱的高度 默认 50 单位米
      • {number} options.speed : 播放的速度 默认 100
      • {Blooean} options.animation : 是否动画 默认 false
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： Thumbtack
js
const DEFAULTOPTIONS = {
  sphereRadius: 20,
  cylinderRadius: 5,
  cylinderHeight: 500,
  speed: 60,
  animation: true,
  height: 0,
};
// 图钉,主要用于标注
thumbtacks = lnglats.map((lnglat) => {
  return threeScene.toThumbtack(
    lnglat,
    getMaterial(),
    YY.Util.extend({}, DEFAULTOPTIONS, {
      cylinderHeight: Math.random() * 500,
    })
  );
});

toCircle(lnglat, options, material) ​

  • 圆
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 默认 100 单位米
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： Circle
js
// 构造圆
const circle = threeScene.toCircle([lng, lat], material, {
  radius: 100,
  height: 200 * Math.random(),
});

toBillboard(lnglat, options, material) ​

  • 广告牌
  • 参数
    • {YY.LngLat | Array} lnglat : 经纬度
    • {Object} options : 额外的配置信息
      • {number} options.height : 垂直高度 默认 200 单位米
      • {number} options.offset : 点和柱子之间的间隔 默认 0 单位米
      • {boolean} options.cylinder : 是否显示柱子 默认 false
      • {boolean} options.animation : 是否动画 默认 false
      • {number} options.speed : 波动的速度 默认 10
      • {number} options.scale : 点图标的放大倍数 默认 100，也支持 array ,如 [100,80]
      • {number} options.cylinderRadius : 柱子的半径 默认 2
      • {string} options.cylinderColor : 柱子的颜色 默认 white
      • {boolean} options.notScale : 是否不要缩放，即地图任何缩放比例下大小一样， 默认 false
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： Billboard
js
// 构造广告牌
const billboard = threeScene.toBillboard([lng, lat], material, {
  h: 500 + Math.random() * 500,
  scale: 1500,
  speed: 60,
  offset: 10,
  cylinder: true,
  cylinderRadius: 5,
  cylinderColor: "white",
  animation: true, //动画
  height: 0,
});
billboards.push(billboard);

toHexGrid(bbox, options, material) ​

  • 网格线，网格的格子
  • 参数
    • {Array} bbox : 经纬度范围 例如 [120.66480645187107, 31.300467846011458, 120.71473297736304, 31.336792938894206];
    • {Object} options : 额外的配置信息
      • {number} options.cellSize : 格子的大小 默认 200 单位米
      • {number} options.lineWidth : 线的宽度 默认 1 单位像素
      • {string } options.color : 线的颜色 默认 white
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： HexGrid
js
// 边界
const bbox = [
  120.66480645187107, 31.300467846011458, 120.71473297736304, 31.336792938894206,
];
// 构造网格，一般用于网格化管理
hexGrid = threeScene.toHexGrid(bbox, {
  cellSize: 300,
  lineWidth: 3,
  height: 200,
  delay: 5000,
});

toCruisingDevice(lnglat, options) ​

  • 飞行器底座，一般和无人机模型联合使用
  • 参数
    • {YY.LngLat | Array} lnglat :经纬度
    • {Object} options : 额外的配置信息
      • {number} options.speed : 动画的速度 默认 6
      • {string } options.color : 线的颜色 默认 white
      • {number} options.height : 垂直高度 默认 50 单位米
      • {number} options.radius : 半径 默认 130 单位米
      • {number} options.pointNumbers : 线的个数 默认 300
      • {number} options.scale : 放大的倍数 默认 1
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { [THREE.Material](https://threejs.org/docs/i
  • 返回值： CruisingDevice
js
const OPTIONS = {
  height: 250,
  speed: 6,
  color: "#55FF08",
  h: 50, //垂直高度
  radius: 130,
  pointNumbers: 300,
  scale: 1,
};
cruisingDevice = threeScene.toCruisingDevice(
  map.getCenter(),
  YY.Util.extend({}, OPTIONS)
);
// 将无人机加载到飞行器
cruisingDevice.add(drone);
const pointLight = getPointLight();
// 将点光源加载到飞行器
cruisingDevice.add(pointLight);

toEffectWave(lnglat, options) ​

  • 闪烁的光环
  • 参数
    • {YY.LngLat | Array} lnglat :经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 默认 400 单位米
      • {number} options.speed : 动画的速度 默认 80
      • {string } options.color : 颜色 默认 white
      • {number} options.intensity : 灯光的强度 默认 10
      • {number} options.intensityRadius : 灯光的辐射半径 默认 200
      • {number} options.pointNumbers : 点光源的个数 默认 30
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： EffectWave
js
const location = [120.66218943510626, 31.3092163677492];
// 相关参数配置
const OPTIONS = {
  radius: 3000,
  speed: 100,
  height: 100,
  color: "white",
  intensity: 15, //光的强度
  intensityRadius: 500, //光的半径
};
//环形的光
effectWave = threeScene.toEffectWave(location, OPTIONS);

toLogoImage(lnglat, options) ​

  • logo 图片标志物 例如 KFC, 各种银行，商业广场的 logo
  • 参数
    • {YY.LngLat | Array} lnglat :经纬度
    • {Object} options : 额外的配置信息
      • {number} options.width : 图片的宽度 单位米 默认 30
      • {number} options.height : 图片的高度 单位米 默认 30
      • {string} options.image : 图片的地址 默认 null，这个为必须参数
      • {number} options.rotation : 旋转的弧度 默认 0 范围为[-Math.PI,Math.PI]
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： LogoImage
js
const options = {
  w: 50,
  h: 50,
  height: 10,
  image: PATH + "images/星巴克logo.png",
  rotation: 0,
  delay: 5000,
};
const logoImages = data.map((element) => {
  const { rotation, height, image, size } = element;
  logoImage = threeScene.toLogoImage(
    element.lnglat,
    YY.Util.extend({}, options, {
      rotation,
      height,
      image,
      w: size,
      h: size,
    })
  );
  return logoImage;
});

toRingParticle(lnglat, options) ​

  • 环形粒子
  • 参数
    • {YY.LngLat | Array} lnglat :经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 单位米 默认 1000
      • {number} options.rings : 环的个数 默认 3
      • {number} options.offset : 环和环之间的间隔 单位米 默认 100
      • {number} options.size : 粒子点的大小 单位像素 默认 5
      • {string} options.color : 粒子点颜色 默认 white
      • {boolean} options.gradation : 粒子是否渐变 默认 false
      • {number} options.pointNumbers : 每个环的粒子数目 默认 100
      • {number} options.speed : 动画的速度 默认 1
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： RingParticle
js
const DEFAULTOPTIONS = {
  height: 200,
  radius: 3000,
  rings: 10,
  offset: 200,
  size: 6,
  color: "white",
  gradation: true,
  pointNumbers: 200,
  speed: 1,
  delay: 4000,
};
const lnglat = [120.69278108253127, 31.313930282720406];
//环形的粒子
ringparticle = threeScene.toRingParticle(lnglat, DEFAULTOPTIONS);

toRedar(lnglat, options) ​

  • 雷达粒子
  • 参数
    • {YY.LngLat | Array} lnglat :经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 单位米 默认 1000
      • {number} options.rings : 环的个数 默认 3
      • {number} options.offset : 环和环之间的间隔 单位米 默认 100
      • {number} options.size : 粒子点的大小 单位像素 默认 5
      • {string} options.color : 粒子点颜色 默认 white
      • {string} options.bgColor : 背景粒子颜色 默认 white
      • {boolean} options.gradation : 粒子是否渐变 默认 false
      • {number} options.pointNumbers : 每个环的粒子数目 默认 100
      • {number} options.speed : 动画的速度 默认 1
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： Redar
js
const DEFAULTOPTIONS = {
  height: 300,
  radius: 600, //半径
  offset: 50, //间隔
  size: 5, //点的大小
  color: "red",
  bgColor: "white",
  gradation: true,
  speed: 1,
  pointNumbers: 100,
  delay: 3000, //延迟动画时间
};
const lnglat = [120.6767716784359, 31.316849224423578];
// 雷达粒子
redar = threeScene.toRedar(lnglat, DEFAULTOPTIONS);

toCloudParticle(lnglat, options) ​

  • 粒子云
  • 参数
    • {YY.LngLat | Array} lnglat :经纬度
    • {Object} options : 额外的配置信息
      • {number} options.scale : 放大的倍数 默认 10
      • {string} options.color : 粒子点颜色 默认 white
      • {number} options.pointNumbers : 粒子数目 默认 200
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： CloudParticle
js
// 构造粒子云
const cloudparticle = threeScene.toCloudParticle([lng, lat], {
  height: 600 * Math.random(),
  color: YY.randomColor(),
  scale: 50, //放大的倍数
});

toEffectLight(lnglat, options) ​

  • 闪烁的灯光
  • 参数
    • {YY.LngLat | Array} lnglat :经纬度
    • {Object} options : 额外的配置信息
      • {number} options.radius : 半径 单位米 默认 200
      • {string} options.color : 颜色 默认 white
      • {number} options.intensity : 光照的强度 默认 10
      • {number} options.speed : 动画的速度 默认 30
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： EffectLight
js
const effectlights = [];
lnglats.forEach((d) => {
  //EffectLight
  const effectlight = threeScene.toEffectLight(d, {
    color: YY.randomColor(), //颜色
    radius: 200, //半径
    intensity: 100, //灯光强度
    speed: 50,
    height: 100,
  });
  effectlights.push(effectlight);
});

toUpElevator(lnglat, options, material) ​

  • 升降梯
  • 参数
    • {YY.LngLat | Array} lnglat :经纬度
    • {Object} options : 额外的配置信息
      • {number} options.height : 垂直高度 单位米 默认 500
      • {number} options.speed : 动画的速度 默认 10
      • {number} options.offset : 环之间的间隔 单位米 默认 100
      • {number} options.lineWidth : 环的宽度 单位米 默认 10
      • {number} options.rotation : 旋转的弧度 默认 0
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • {THREE.Material} material :材质
  • 返回值： UpElevator)
js
const OPTIONS = {
  h: 500,
  speed: 10,
  offset: 40,
  radius: 100,
  lineWidth: 5,
};
ups = lnglats.map((lnglat) => {
  const material = getMaterial(YY.randomColor());
  // 升降梯，用于对某个物体进行保护等
  return threeScene.toUpElevator(
    lnglat,
    material,
    YY.Util.extend({}, OPTIONS, {})
  );
});

toText(lnglat, options) ​

  • 文字标注
  • 参数
    • {YY.LngLat | Array} lnglat :经纬度
    • {Object} options : 额外的配置信息
      • {number} options.size :字体的大小 默认 50
      • {number} options.height : 字体的高度 默认 1
      • {Font} options.font : 字体库 默认 null，例如微软雅黑
      • {string} options.color : 字体的颜色 默认 white
      • {string} options.name : 字体名字 默认 GEOV-GL
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： Text
js
const fontLoader = new THREE.FontLoader();
// 字体加载器
fontLoader.load(
  PATH + "font/helvetiker_regular.typeface.json",
  function (font) {
    const OPTIONS = {
      font: font,
      name: "SuZhou",
      size: 50,
      h: 1,
      height: 200,
    };
    lnglats.forEach((lnglat) => {
      // 构造文字
      const text = threeScene.toText(lnglat, OPTIONS);
      text.bindTooltip("SuZhou");
      texts.push(text);
    });
    threeScene.add(texts);
  }
);

toRotateLight(lnglat, options, material) ​

  • 旋转的吊塔灯
  • 参数
    • {YY.LngLat | Array} lnglat :
    • {Object} options : 额外的配置信息
      • {number} options.coneRadius : 圆锥的半径 单位米 默认 50
      • {number} options.coneHeight : 圆锥的高度 单位米 默认 30
      • {number} options.sphereRadius : 球形的半径 单位米 默认 10
      • {number} options.cylinderRadius : 圆柱的半径 单位米 默认 5
      • {number} options.cylinderHeight : 圆柱的高度 默认 300
      • {number} options.intensity : 灯光强度 默认 10
      • {number} options.intensityRadius : 灯光辐射半径 默认 200
      • {number} options.speed : 旋转的动画时间 默认 0.1
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
    • { THREE.Material} material :材质
  • 返回值： RotateLight
js
const DEFAULTOPTIONS = {
  coneRadius: 20, //圆锥的半径
  coneHeight: 200, //圆锥的高度
  sphereRadius: 10, //球的半径
  cylinderRadius: 5, //圆柱的半径
  cylinderHeight: 200, //圆柱的高度
  speed: 0.07,
  color: "yellow",
  intensityRadius: 500, //光照的半径
  intensity: 50, //光照的强度
};

//旋转的灯光，吊灯
rotatelights = lnglats.map((lnglat) => {
  return threeScene.toRotateLight(
    lnglat,
    getMaterial(),
    YY.Util.extend({}, DEFAULTOPTIONS, {
      color: YY.randomColor(),
    })
  );
});

toMergeMesh(geometry, material, options) ​

  • 合并的 geoemtry，不推荐使用了
  • 参数
    • { BufferGeometry} geometry :合并后的 BufferGeometry，支持多个 BufferGeometry,内部会自动合并
    • { THREE.Material} material :材质
    • {Object} options : 额外的配置信息
      • {String} toptions.opColor :顶部颜色，默认 null
      • {String} options.bottomColor :底部颜色 默认 '#2d2f61',
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： MergeMesh

toSimpleText(lnglat, options) ​

  • 简单的文本组件
  • 参数
    • { YY.LngLat | Array} lnglat :经纬度
    • {Object} options : 额外的配置信息
      • {String} options.name : 内容名字
      • {String} options.color : 颜色 default '#fff'
      • {Number} options.fontSize : 字体大小 像素 default 12
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： SimpleText

toLabel(lnglat, options) ​

  • label 标签

  • 参数

    • { YY.LngLat | Array} lnglat :经纬度
    • {Object} options : 额外的配置信息
      • {string} options.className : className 默认空
      • {string} options.cssText : cssText css 文本 默认空
      • {string} options.content : content 内容 默认 GEOV-GL
      • {number} options.offsetX :水平偏移量 默认 0
      • {number} options.w :宽度 默认 80
      • {number} options.h :高度 默认 30
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30

  • 返回值： Label

js
const lnglats = [
  [120.67381792020717, 31.319279803106355, 400, "东方之门"],
  [120.69803209093459, 31.323653893953548, 50, "文化艺术中心"],
  [120.70219553855804, 31.32587826581326, 50, "博览中心"],
];
const labels = [];
lnglats.forEach((lnglat) => {
  const height = lnglat.slice(2, 3);
  const label = threeScene.toLabel(lnglat.slice(0, 2), {
    height,
    offsetX: -100,
    w: 250,
    h: 64,
    className: "label",
    cssText: `color:white`,
    content: lnglat.slice(3, 4),
  });
  labels.push(label);
});
threeScene.add(labels);

toDom(lnglat, domElement, options) ​

  • html 元素
  • 参数
    • { YY.LngLat | Array} lnglat :经纬度
    • {HTMLElement} domElement :dom 节点
    • {Object} options : 额外的配置信息
      • {number} options.scale :缩放因子，默认 0.1
      • {number} options.alitude : 海拔
      • {boolean} options.interactive : 是否可以交互 默认值 true
      • {number} options.minZoom : 最小 zoom 默认 0
      • {number} options.maxZoom : 最大 zoom 默认 30
  • 返回值： Dom
js
// dom元素插入到场景中
const lnglat = [120.67586423597459, 31.319049643052466];
const divDom = document.createElement("div");
divDom.style.width = "500px";
divDom.style.height = "500px";
divDom.style.border = "1px solid white";
divDom.style.backgroundColor = "rgba(0,0,0,0.5)";
// divDom.style.backgroundColor = 'white';
domObject = threeScene.toDom(lnglat, divDom, {
  scale: 0.004,
  height: 100,
});
threeScene.add(domObject);
domObject.rotation.x = Math.PI / 2;
domObject.rotation.y = -1.7242848078381912;

This document is generated by vitepress and Edit by deyihu

Email:mehudeyi@163.com