factory_web/src/views/bigScreen/cesiumtest0.vue

<template>
   <div id="mars3dContainer" class="mars3d-container"></div> 
</template>
 
<script>
// import * as mars3d from "mars3d";
const Cesium = mars3d.Cesium;
const point1 = [117.083458,31.655321,42]
const point2 = [116.027392, 36.413562, 42]
const point3 = mars3d.PointUtil.getOnLinePointByLen(
	mars3d.LngLatPoint.toCartesian(point1),
	mars3d.LngLatPoint.toCartesian(point2),
	40
)
export default {
  name: 'cesium',
  data() {
    return {
      viewer: null
    }
  },
  created() {
		const scriptInfo = document.createElement("script");
		scriptInfo.setAttribute("data-callType", "callScript");
		scriptInfo.src = "http://mars3d.cn/lib/Cesium/Cesium.js";
		document.head.appendChild(scriptInfo);
	},
  mounted() {
    const map = new mars3d.Map("mars3dContainer", {
      scene: {
        center: { lat: 30.054604, lng: 108.885436, alt: 100, heading: 316, pitch: 10},
      },
    })
    map.fixedLight = true // 固定光照，避免gltf模型随时间存在亮度不一致。
    let tilesetLayer = new mars3d.layer.TilesetLayer({
        type: "3dtiles",
        name:'超低排放',
        url: "/3dtiles/tileset.json",
        popup: "all",
        scale: 1,
        // rotation: {x:0, y:1,z: 0 }, // 模型的旋转角度，这里以Z轴为例，表示沿Z轴旋转45度
        highlight: { type: "click", color: "#00ffff" },
        flyTo: true, //视角切换到模型所在位置
        heading: 0, // 航向角，围绕Z轴旋转
        pitch: -5, // 俯仰角，向上调整
        roll: 10 // 翻滚角，围绕Y轴旋转
    });
    map.addLayer(tilesetLayer);
    map.on(mars3d.EventType.click, function (event) {
      let feature = event.pickedObject;
      //下面只是演示解释底层实现，在平台中直接通过event.graphic.attr可以获取属性
      console.log("feature", feature);
      console.log("Cesium.Cesium3DTileFeature", Cesium.Cesium3DTileFeature);
      console.log(feature instanceof Cesium.Cesium3DTileFeature)
      if (feature instanceof Cesium.Cesium3DTileFeature) {
        // let propertyNames = feature.getPropertyNames();
        // let length = propertyNames.length;
        // for (var i = 0; i < length; ++i) {
        //   let propertyName = propertyNames[i];
        //   console.log(propertyName + ': ' + feature.getProperty(propertyName));
        // }
      }
    })
    // 创建图层
    let  GraphicLayer = new mars3d.layer.GraphicLayer({
        name: "墙",
        show: true,
        // 属性
        strokestyle: "#3388ff",
        strokewidth: 2,
        fill: true,
        fillcolor: "#00ffff",
        opacity: 0.5,
        // 样式
        style: {
          // 可见范围
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
          // 高度 
      },
        semicolon: true
    })
    map.addLayer(GraphicLayer);
    // 矢量对象
    let wallGraphic = new mars3d.graphic.WallEntity({
        positions: [point1, point2],
        // @param [options.allowDrillPick] - 是否允许鼠标穿透拾取
        allowDrillPick: true,
        style: {
          // 可见范围
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 20000),
          // 文字墙高度
          diffHeight:15 ,
          materialType: mars3d.MaterialType.Text,
          materialOptions: {
            text: "显示文本",
            font_family: "楷体",
            color: "#00ffff"
          }
      },
        flyTo:true,
        attr: { remark: "test" }
    })
    GraphicLayer.addGraphic(wallGraphic);
    // 创建标注图片的图形对象[获取设备，并将设备id放入attr中，点击图标时，可获得设备id，根据设备id查询设备相关信息]
    const graphic = new mars3d.graphic.FontBillboardEntity({
    position: new mars3d.LngLatPoint(117.084699, 31.65172, 6),
    style: {
      image: "img/enp_blue/ball.png",
      color: "#00ffff",
      cale: 0.5,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      label: {
        text: "设备名称",
        font_size: 20,
        color: "#ff0000",
        pixelOffsetY: -120,
        distanceDisplayCondition: true,
        distanceDisplayCondition_far: 50000,
        distanceDisplayCondition_near: 0
      }
    },
    attr: { remark: "设备id" }
    })
    // 绑定Popup
    // const inthtml = `<table style="width: auto;">
    //   <tr>
    //     <th scope="col" colspan="2" style="text-align:center;font-size:15px;">我是graphic上绑定的Popup </th>
    //   </tr>
    //   <tr>
    //     <td>提示：</td>
    //     <td>这只是测试信息，可以任意html</td>
    //   </tr>
    // </table>`
    // graphic.bindPopup(inthtml).openPopup()
    GraphicLayer.addGraphic(graphic);
    // GraphicLayer.on(mars3d.EventType.click, function (event) {
    //   console.log("监听layer，单击了矢量对象", event)
    // })
    function bindLayerPopup() {
      GraphicLayer.bindPopup(function (event) {
        console.log("监听layer，绑定popup", event)
        const attr = event.graphic.attr || {}
        attr["类型"] = event.graphic.type
        attr["来源"] = "我是layer上绑定的Popup"
        attr["备注"] = "我支持鼠标交互"
        return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr })
      })
    }
    bindLayerPopup();
    // const graphic2 = new mars3d.graphic.BillboardEntity({
    //   position: [117.084699, 31.65172, 6],
    //   style: {
    //     image: "img/enp_blue/ball.png",
    //      scale: 1.0,
    //       horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    //       verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    //       clampToGround: true
    //   },
    //   attr: { remark: "示例1" }
    // })
    // GraphicLayer.addGraphic(graphic2);
  },
  mothods: {
   
  },
  onUnload() {
    map.destroy()
  }
}
</script>
<style></style>