目录

cesium案例三维钢铁厂园区开发平台附源码下载

目录

cesium案例:三维钢铁厂园区开发平台(附源码下载)

基于cesium的三维钢铁厂园区开发平台案例,覆盖功能点包括图展示、图层管理控制、图层在线编辑(增删改查)、poi兴趣点管理、三维模型单体化以及交互点击高亮弹窗展示、地图点查查询、量算工具等等,适合学习cesium与前端框架结合开发3D可视化项目。

demo源码运行环境以及配置

1.jdk1.8环境配置,geoserver集成在tomcat运行需要
2.geoserver,发布地图服务
3.demo项目工程html+js+css
4.demo里面提供tomcat,里面集成geoserver以及三维模型数据,建议直接用

技术栈

cesium版本相对低
html5
js

示例效果
https://i-blog.csdnimg.cn/direct/dcce39de49af475fa3333d605f95fc7c.png#pic_center

var viewer;
var tilesets = [];
if (!viewer) viewer = initViewer();
window.viewer = viewer;
window.isClickQuery = true;
function initViewer() {
  var image_Source = new Cesium.UrlTemplateImageryProvider({
    //url: 'http://mt0.google.cn/vt/lyrs=t,r&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',
    url:
      "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    //url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
    credit: "",
  });
  viewer = new Cesium.Viewer("map", {
    // terrainProvider: new Cesium.CesiumTerrainProvider({
    //   url: "http://data.marsgis.cn/terrain",
    //   enablePickFeatures: false,
    // }),
    selectionIndicator: false,
    infoBox: false,
    sceneModePicker: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    timeline: false,
    animation: false,
    geocoder: false, //地名查找,默认true
    homeButton: false, //主页按钮,默认true
    navigationHelpButton: false, //导航帮助说明,默认true
    navigationInstructionsInitiallyVisible: false,
    //关闭地球光环
    skyAtmosphere: false,
    imageryProvider: image_Source,
  });
  var utc=Cesium.JulianDate.fromDate(new Date("2019/08/04 06:00:00"));//UTC
  viewer.clock.currentTime = Cesium.JulianDate.addHours(utc,8,new Cesium.JulianDate());//北京时间=UTC+8=GMT+8
  
  viewer._cesiumWidget._creditContainer.style.display = "none";
  //地图范围跳转
  var cartographicWS = [
    MapConfig.mapInitParams.extent.xmin,
    MapConfig.mapInitParams.extent.ymin,
  ];
  var cartographicEN = [
    MapConfig.mapInitParams.extent.xmax,
    MapConfig.mapInitParams.extent.ymax,
  ];
  var destination = Cesium.Rectangle.fromDegrees(
    cartographicWS[0],
    cartographicWS[1],
    cartographicEN[0],
    cartographicEN[1]
  );
  viewer.camera.setView({
    // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州
    destination: new Cesium.Cartesian3(-9572992.58727217, 26560459.994496826, 16289675.895258622),
  },
    {
      duration: 5,
    });
  // viewer.camera.flyTo({
  //   destination: destination,
  // },{
  //   duration: 5,
  //   offset: new Cesium.HeadingPitchRange(
  //     0.0,
  //     Cesium.Math.toRadians(-20.0),
  //     24056907
  //   )
  // });
  //创建地图导航控件
  viewer.extend(Cesium.viewerCesiumNavigationMixin, {
    defaultResetView: destination,
  });
  //显示地图当前坐标
  show3DCoordinates();
  // 禁用默认的实体双击动作。
  viewer.screenSpaceEventHandler.removeInputAction(
    Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
  );
  //临时测试加载tif的tms瓦片服务
  /*var layers = viewer.scene.imageryLayers;
  layers.addImageryProvider(
    // new Cesium.UrlTemplateImageryProvider({
    //   url: MapConfig.tmsdomURL
    // })
    new Cesium.TileMapServiceImageryProvider({
      url: MapConfig.tmsdomURL,
      fileExtension: 'png'
    })
  );*/
  //3dtiles单体化模型加载
  /*var tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      url: MapConfig.Tiles3D.url,
      modelMatrix: Cesium.Matrix4.fromArray([
        0.1869180209750189,
        -0.8523144464483328,
        0.4884892402195312,
        0,
        0.2987505001302249,
        0.5230194918510269,
        0.7982472986586509,
        0,
        -0.9358470986794386,
        -0.0032704004901111805,
        0.352391135492809,
        0,
        -23040.115059180185,
        -69.02736813761294,
        -15930.330225577112,
        1,
      ]),
    })
  );
  // var temp = {};
  // temp[MapConfig.Tiles3D.url] = tileset;
  tilesets.push(tileset);
  viewer.flyTo(tileset, {
    duration: 5,
    offset: new Cesium.HeadingPitchRange(
      0.0,
      Cesium.Math.toRadians(-20.0),
      700
    ),
  });*/
  clickQuery.activate();
  return viewer;
}
/*
 * 显示地图当前坐标
 */
function show3DCoordinates() {
  //地图底部工具栏显示地图坐标信息
  var elementbottom = document.createElement("div");
  $(".cesium-viewer").append(elementbottom);
  elementbottom.style.width = "100%";
  elementbottom.style.height = "30px";
  elementbottom.style.background = "rgba(0,0,0,0.5)";
  elementbottom.style.position = "absolute";
  elementbottom.style.bottom = "0px";
  elementbottom.style.cursor = "default";
  var coordinatesDiv = document.getElementById("map_coordinates");
  if (coordinatesDiv) {
    coordinatesDiv.style.display = "block";
  } else {
    coordinatesDiv = document.createElement("div");
    coordinatesDiv.id = "map_coordinates";
    //coordinatesDiv.style.zIndex = "50";
    coordinatesDiv.style.bottom = "1px";
    coordinatesDiv.style.height = "29px";
    coordinatesDiv.style.position = "absolute";
    coordinatesDiv.style.overflow = "hidden";
    coordinatesDiv.style.textAlign = "center";
    coordinatesDiv.style.left = "70px";
    coordinatesDiv.style.lineHeight = "29px";
    coordinatesDiv.innerHTML =
      "<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#edffff;'>暂无坐标信息</span>";
    $(".cesium-viewer").append(coordinatesDiv);
    var handler3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler3D.setInputAction(function (movement) {
      var pick = new Cesium.Cartesian2(
        movement.endPosition.x,
        movement.endPosition.y
      );
      if (pick) {
        var cartesian = viewer.scene.globe.pick(
          viewer.camera.getPickRay(pick),
          viewer.scene
        );
        if (cartesian) {
          //世界坐标转地理坐标(弧度)
          var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(
            cartesian
          );
          if (cartographic) {
            //海拔
            var height = viewer.scene.globe.getHeight(cartographic);
            //视角海拔高度
            var he = Math.sqrt(
              viewer.scene.camera.positionWC.x *
              viewer.scene.camera.positionWC.x +
              viewer.scene.camera.positionWC.y *
              viewer.scene.camera.positionWC.y +
              viewer.scene.camera.positionWC.z *
              viewer.scene.camera.positionWC.z
            );
            var he2 = Math.sqrt(
              cartesian.x * cartesian.x +
              cartesian.y * cartesian.y +
              cartesian.z * cartesian.z
            );
            //地理坐标(弧度)转经纬度坐标
            var point = [
              (cartographic.longitude / Math.PI) * 180,
              (cartographic.latitude / Math.PI) * 180,
            ];
            if (!height) {
              height = 0;
            }
            if (!he) {
              he = 0;
            }
            if (!he2) {
              he2 = 0;
            }
            if (!point) {
              point = [0, 0];
            }
            coordinatesDiv.innerHTML =
              "<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#edffff;'>视角高度:" +
              (he - he2).toFixed(2) +
              "米&nbsp;&nbsp;&nbsp;&nbsp;海拔高度:" +
              height.toFixed(2) +
              "米&nbsp;&nbsp;&nbsp;&nbsp;经度:" +
              point[0].toFixed(6) +
              "&nbsp;&nbsp;纬度:" +
              point[1].toFixed(6) +
              "</span>";
          }
        }
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  }
}
function initOverlay() {
  
}
function hideOverlay() {
  overlay.close();
}
function changeModelStyle(pickedFeature, color) {
  if (!Cesium.defined(pickedFeature)) {
    var primitives = viewer.scene._primitives._primitives;
    if(primitives.length > 0){
      for (var i = 0; i < primitives.length; i++) {
        console.log("ddddddddddddddd")
        if(primitives[i] instanceof Cesium.Cesium3DTileset){
          primitives[i].style = new Cesium.Cesium3DTileStyle();
        }
      }
    }
    // for (var i = 0; i < tilesets.length; i++) {
    //   tilesets[i].style = new Cesium.Cesium3DTileStyle();
    // }
    return;
  }
  var selectbuilding = pickedFeature.getProperty('id');
  var selectcontent = "${id} === \'" + selectbuilding + "\'";
  var transparentStyle = new Cesium.Cesium3DTileStyle({
    color: {
      conditions: [
        [selectcontent, color],
        ["true", "color('#FFFFFF')"]//true表示剩余的显示的对象
      ]
    },
  });
  pickedFeature.tileset.style = transparentStyle;
}
function addModelStyle(selected, moved) {
  var transparentStyle = new Cesium.Cesium3DTileStyle({
    color: {
      conditions: [
        ["${id} === \'" + selected.getProperty('id') + "\'", "color('#ff0000')"],
        ["${id} === \'" + moved.getProperty('id') + "\'", "color('#ff0')"],
        ["true", "color('#FFFFFF')"]//true表示剩余的显示的对象
      ]
    },
  });
  selected.tileset.style = transparentStyle;
}