Gl多段线实体
GlLinesEntity 是由 实体Entity 和 GlLinesModule 模块组合而成的新的实体。
GlLinesEntity = Entity + GlLinesModule
GlLinesEntity 与 PolylinesEntity 的区别是，他不能设置线宽，但性能更好。
常用方法
GlLinesEntity 是由 实体Entity 派生而来。具体 Entity 的所有属性和方法。同时也具有GlLinesModule 的相关方法。
| 方法 | 描述 |
|---|---|
| getGlLines | 获取线对象 |
| getVertexSymbol | 获取顶点对象 |
| isShowVertex | 是否显示顶点 |
| getVertexData | 获取顶点数据 |
| setShowVertex | 设置是否显示顶点 |
| updateStyle | 设置样式，必传 LineDashedMaterialParameters | LineBasicMaterialParameters。⚠️ 内部逐键执行 material[k] = v; material[k].needsUpdate = true：值为原始类型（opacity: 0.5、transparent: true、数字/字符串 color）时严格模式下抛 TypeError（该键已写入、后续键被跳过）；只传对象值（如 color: new THREE.Color(...)），或直接改 getGlLines().material 再设 material.needsUpdate = true |
| updateHightStyle | 设置高亮样式，必传材质参数（官方拼写 Hight）。同样有原始值抛错问题；且它把参数记进了 style（覆盖普通样式记录）而非 highlightStyle |
| setData | 修改数据 |
| getData | 获取数据 |
| getItemDataByIndex | 通过线段序号获取数据（射线命中的 intersection.index 是顶点序号，需 Math.floor(index / 2) 再传入） |
| refreshHighlight | 刷新高亮数据 |
| setItemHighlight | 设置某项高亮与否。⚠️ setItemHighlight(id, false) 只删记录、不重绘，需随后调 refreshHighlight()（或用 clearHighlight()） |
| isItemHighlight | 获取某项高亮与否 |
| clearHighlight | 清除所有高亮 |
使用示例
创建GlLinesEntity
let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
container: "map", // 容器id
scene: {
gridHelper: { visible: true } // 是否显示坐标网格
},
camera: { // 相机设置
viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
}
})
let data = [];
data.push({
coordinates: [[7, 0, 3],[-4, 0, -2],[-5, 0, 3]],
color: "#00ff00"
})
data.push({
coordinates: [[7, 0, -8],[-1, 2, -1],[-8, 1, -9],[7, 0, -8]],
color: "#ffff00"
})
let polylines = new vjmap3d.GlLinesEntity({ //PolygonsEntity
data: data,
// dashed: true // 实体级选项（非数据项字段）；⚠️ 运行时未计算 lineDistances，开了仍是实线
})
polylines.addTo(app)
注意：
GlLineItemData的数据项字段只有id、coordinates、color（可数组，逐顶点渐变）、showVertex、hidden。GL 线宽恒为 1 像素，lineWidth/dashSize/gapSize/dashScale/dashOffset/dashed写在数据项里不会生效。实体构造的dashed: true虽会换成LineDashedMaterial，但源码中computeLineDistances()被注释掉、几何没有lineDistance属性，仍渲染为实线——GlLinesEntity实际画不出虚线。要虚线或按条设置线宽请改用 PolylinesEntity（其数据项dashed/dashSize/gapSize有效）。
增加事件
polylines.pointerEvents = true; // 允许事件交互
polylines.on("mouseover", e => {
if (e?.intersection?.index !== undefined) {
// LineSegments 命中的 index 是线段起点的顶点序号(0,2,4...)，除以 2 才是线段序号
let itemData = polylines.getItemDataByIndex(Math.floor(e.intersection.index / 2));
if (itemData && itemData.id) polylines.setItemHighlight(itemData.id, true)
}
})
polylines.on("mouseout", e => {
polylines.clearHighlight()
})
修改、新增、删除
调用 setData 来对数据进行增删改
// 如新增一条
data.push({
coordinates: [[10, 0, 0], [20, 0, 0]],
color: vjmap3d.randColor()
})
polylines.setData(data)
渐变色
如果color属性为数组时，并且颜色值不一样时，将绘制成渐变色
// 如新增渐变色
data.push({
coordinates: [[10, 0, 0], [20, 0, 0]],
color: ["#f00", "#0ff"]
})
polylines.setData(data)
let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
container: "map", // 容器id
scene: {
gridHelper: { visible: true } // 是否显示坐标网格
},
stat: {
show: true,
left: "0"
},
camera: { // 相机设置
viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
}
})
let data = [];
data.push({
coordinates: [[7, 0, 3],[-4, 0, -2],[-5, 0, 3]],
color: "#00ff00"
})
data.push({
coordinates: [[7, 0, -8],[-1, 2, -1],[-8, 1, -9],[7, 0, -8]],
color: "#ffff00"
})
//
let polylines = new vjmap3d.GlLinesEntity({ //PolygonsEntity
data: data,
})
polylines.addTo(app)
//
polylines.pointerEvents = true; // 允许事件交互
polylines.on("mouseover", e => {
if (e?.intersection?.index !== undefined) {
// LineSegments 命中的 index 是线段起点的顶点序号(0,2,4...)，除以 2 才是线段序号
let itemData = polylines.getItemDataByIndex(Math.floor(e.intersection.index / 2));
if (itemData && itemData.id) polylines.setItemHighlight(itemData.id, true)
}
})
polylines.on("mouseout", e => {
polylines.clearHighlight()
})
//
const ui = await app.getConfigPane({ title: "设置", style: { width: "250px", overflow: "hidden"}});
let cfg = [
{
type: 'checkbox',
label: '显示顶点',
getValue: () => polylines.isShowVertex(),
setValue: v => {
polylines.setShowVertex(v)
}
},
{
type: 'button',
label: '增加一条线',
value: ()=> {
data.push({
coordinates: [vjmap3d.randPoint3D(),vjmap3d.randPoint3D()],
color: vjmap3d.randColor()
})
polylines.setData(data)
}
},
{
type: 'button',
label: '修改第一条线颜色',
value: ()=> {
if (data.length > 0) {
data[0].color = vjmap3d.randColor()
}
polylines.setData(data)
}
},
{
type: 'button',
label: '删除第一条线',
value: ()=> {
if (data.length == 0) {
return
}
data.splice(0, 1)
polylines.setData(data)
}
},{
type: 'button',
label: '增加一条渐变色',
value: ()=> {
data.push({
coordinates: [vjmap3d.randPoint3D(),vjmap3d.randPoint3D(),vjmap3d.randPoint3D()],
// 当颜色为数组为，将绘制成渐变色
color: [vjmap3d.randColor(), vjmap3d.randColor(), vjmap3d.randColor()]
})
polylines.setData(data)
}
}
]
cfg.forEach(c => ui.appendChild(c));