多段线实体
PolylinesEntity 是由 实体Entity 和 PolylinesModule 模块组合而成的新的实体。
PolylinesEntity = Entity + PolylinesModule
常用方法
PolylinesEntity 是由 实体Entity 派生而来。具体 Entity 的所有属性和方法。同时也具有PolylinesModule 的相关方法。
| 方法 | 描述 |
|---|---|
| getPolylines | 获取线对象 |
| getVertexSymbol | 获取顶点对象 |
| isShowVertex | 是否显示顶点 |
| getVertexData | 获取顶点数据 |
| setShowVertex | 设置是否显示顶点 |
| updateStyle | 设置样式，必传 LineMaterialParameters。⚠️ 内部逐键 material[k] = v; material[k].needsUpdate = true：值为原始类型（opacity: 0.5、transparent: true、数字/字符串 color）时严格模式下抛 TypeError（该键已写入、后续键被跳过）；只传对象值（如 color: new THREE.Color(...)），或直接改 getPolylines().material 再设 needsUpdate = true |
| updateHightStyle | 设置高亮样式，必传材质参数（官方拼写 Hight）。同样有原始值抛错问题；且它把参数记进了 style（覆盖普通样式记录）而非 highlightStyle |
| setData | 修改数据 |
| getData | 获取数据 |
| getItemDataByFaceIndex | 通过faceIndex获取数据 |
| refreshHighlight | 刷新高亮数据 |
| setItemHighlight | 设置某项高亮与否。⚠️ setItemHighlight(id, false) 只删记录、不重绘，需随后调 refreshHighlight()（或用 clearHighlight()） |
| isItemHighlight | 获取某项高亮与否 |
| clearHighlight | 清除所有高亮 |
使用示例
创建PolylinesEntity
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",
lineWidth: 3,
dashScale: 2,
dashOffset: 0,
dashSize: 3,
gapSize: 3,
dashed: true
})
let polylines = new vjmap3d.PolylinesEntity({ //PolygonsEntity
data: data
})
polylines.addTo(app)
线宽单位：实体级
style.worldUnits默认false，此时数据项的lineWidth（默认 1）是屏幕像素宽度，不随缩放变化；构造时传style: { worldUnits: true }则lineWidth按世界单位计算（近大远小）。高亮线宽 = 数据项lineWidth+highlightStyle.linewidth（默认 3，是叠加值而非绝对值）。
增加事件
polylines.pointerEvents = true; // 允许事件交互
polylines.on("mouseover", e => {
if (e?.intersection?.faceIndex !== undefined) {
let itemData = polylines.getItemDataByFaceIndex(e?.intersection?.faceIndex);
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",
lineWidth: 3,
dashScale: 2,
dashOffset: 0,
dashSize: 3,
gapSize: 3,
dashed: true
})
//
let polylines = new vjmap3d.PolylinesEntity({ //PolygonsEntity
data: data,
})
polylines.addTo(app)
//
polylines.pointerEvents = true; // 允许事件交互
polylines.on("mouseover", e => {
if (e?.intersection?.faceIndex !== undefined) {
let itemData = polylines.getItemDataByFaceIndex(e?.intersection?.faceIndex);
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()],
lineWidth: 3
})
polylines.setData(data)
}
}
]
cfg.forEach(c => ui.appendChild(c));