随着GIS等信息技术的发展，地下管线管理也从二维平面向三维立体管理迈进。传统管线信息管理系统将管线及其附属设施抽象成二维平面内的点、要素，并使用各类点符号、不同颜色线段进行表达。虽能一定程度上满足城市智慧运行的需要，但不能很直观的表现出管线的形状、大小以及管线之间的叠加、包围关系，而使用三维计算机技术对管点管线设备进行空间建模和渲染，不仅直观逼真，并能正确展示竖直管段等二维图形中不便于表示的部件，能够更清楚的识别管线与管点设备之间的连接情况。
水、电、燃气、热量、信息都在通过各种管线一刻不停地流向城市的每一个角落，那些深埋在地下的管线就是城市的“生命线”。在看不见的城市地下世界，管线运行维护，城市工程规划、设计、施工和管理，城市应急指挥和抢险，能够获取完整、准确、现势的地下管线信息。
gis管线编辑器
WebGIS管线在线编辑器
基于WebGIS的城市电力、水力、燃气、热力、热能管线管理系统需要满足行业对城市地下管线的存储、显示、管理、分析等功能，具体需求如下：
(1) 提供方便、灵活的地图操作。支撑Web 矢量图形及栅格图形的发布和Web 地图操作，包括地地图的缩放、漫游、鹰眼，地图局部显示，地理定位，线路盘算等功能。提供符合行业规范的管线设施符号系统。
(2) 提供管线设备管理，包括配电设施、管线的台账管理以及有关设备的相关图片和施工附件管理功能、设备的分层控制、配电设备一次接线图等资料，工作人员可以快
速查询所需资料。
(3 ) 提供地图数据和属性数据的一体化管理，通过属性资料可以在地图上查询其位置，同时可由地图数据查询出相应的属性资料，方便工作人员查询。
(4) 提供城市地下管线的分析模块、配电线路的单线图绘制与编辑功能、空间定位分析、管网拓扑等功能。
(5) 提供地下管道工井剖面图编辑和维护功能，实现管线与管道的关联操作，将电缆与管道的孔位关联功能，实现工井内电缆关系的可视化。
编辑器GIS引擎加载
const viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false,
selectionIndicator: false,
});
const scene = viewer.scene;
const downHandler = new Cesium.ScreenSpaceEventHandler(
viewer.scene.canvas
);
downHandler.setInputAction(function (movement) {
const pickedObject = scene.pick(movement.position);
if (
Cesium.defined(pickedObject) &&
Cesium.defined(pickedObject.id) &&
Cesium.defined(pickedObject.id.plane)
) {
selectedPlane = pickedObject.id.plane;
selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.05);
selectedPlane.outlineColor = Cesium.Color.WHITE;
scene.screenSpaceCameraController.enableInputs = false;
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
// Release plane on mouse up
const upHandler = new Cesium.ScreenSpaceEventHandler(
viewer.scene.canvas
);
点、线编辑
function addBillboard() {
Sandcastle.declare(addBillboard);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: "../images/Cesium_Logo_overlay.png",
},
});
}
function setBillboardProperties() {
Sandcastle.declare(setBillboardProperties);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: "../images/Cesium_Logo_overlay.png", // default: undefined
show: true, // default
pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
scale: 2.0, // default: 1.0
color: Cesium.Color.LIME, // default: WHITE
rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
alignedAxis: Cesium.Cartesian3.ZERO, // default
width: 100, // default: undefined
height: 25, // default: undefined
},
});
}
const czml = [
{
id: "document",
name: "CZML Geometries: Polygon",
version: "1.0",
},
{
id: "redPolygon",
name: "Red polygon on surface",
polygon: {
positions: {
cartographicDegrees: [
-115.0,
37.0,
0,
-115.0,
32.0,
0,
-107.0,
33.0,
0,
-102.0,
31.0,
0,
-102.0,
35.0,
0,
],
},
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 255],
},
},
},
},
},
{
id: "checkerboardPolygon",
name: "Checkerboard polygon on surface",
polygon: {
positions: {
cartographicDegrees: [
-94.0,
37.0,
0,
-95.0,
32.0,
0,
-87.0,
33.0,
0,
],
},
material: {
checkerboard: {
evenColor: {
rgba: [255, 0, 0, 255],
},
oddColor: {
rgba: [0, 128, 128, 255],
},
},
},
},
},
{
id: "greenPolygon",
name: "Green extruded polygon",
polygon: {
positions: {
cartographicDegrees: [
-108.0,
42.0,
0,
-100.0,
42.0,
0,
-104.0,
40.0,
0,
],
},
material: {
solidColor: {
color: {
rgba: [0, 255, 0, 255],
},
},
},
extrudedHeight: 500000.0,
closeTop: false,
closeBottom: false,
},
},
{
id: "orangePolygon",
name: "Orange polygon with per-position heights and outline",
polygon: {
positions: {
cartographicDegrees: [
-108.0,
25.0,
100000,
-100.0,
25.0,
100000,
-100.0,
30.0,
100000,
-108.0,
30.0,
300000,
],
},
material: {
solidColor: {
color: {
rgba: [255, 100, 0, 100],
},
},
},
extrudedHeight: 0,
perPositionHeight: true,
outline: true,
outlineColor: {
rgba: [0, 0, 0, 255],
},
},
},
{
id: "bluePolygonWithHoles",
name: "Blue polygon with holes",
polygon: {
positions: {
cartographicDegrees: [
-82.0,
40.8,
0,
-83.0,
36.5,
0,
-76.0,
35.6,
0,
-73.5,
43.6,
0,
],
},
holes: {
cartographicDegrees: [
[
-81.0,
40.0,
0,
-81.0,
38.2,
0,
-79.0,
38.2,
0,
-78.0,
40.8,
0,
],
[-77.5, 36.7, 0, -78.5, 37.0, 0, -76.5, 39.6, 0],
],
},
material: {
solidColor: {
color: {
rgba: [0, 0, 255, 255],
},
},
},
},
},
];
const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
感兴趣的可以留言或发邮件1985692469@qq.com，欢迎一起交流！
