WebGIS管线在线编辑器(电力、水力、燃气、热力、热能管线)

        随着GIS等信息技术的发展，地下管线管理也从二维平面向三维立体管理迈进。传统管线信息管理系统将管线及其附属设施抽象成二维平面内的点、要素，并使用各类点符号、不同颜色线段进行表达。虽能一定程度上满足城市智慧运行的需要，但不能很直观的表现出管线的形状、大小以及管线之间的叠加、包围关系，而使用三维计算机技术对管点管线设备进行空间建模和渲染，不仅直观逼真，并能正确展示竖直管段等二维图形中不便于表示的部件，能够更清楚的识别管线与管点设备之间的连接情况。

        水、电、燃气、热量、信息都在通过各种管线一刻不停地流向城市的每一个角落，那些深埋在地下的管线就是城市的“生命线”。在看不见的城市地下世界，管线运行维护，城市工程规划、设计、施工和管理，城市应急指挥和抢险，能够获取完整、准确、现势的地下管线信息。

        基于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，欢迎一起交流！