master

分支 (1)

管理

管理

master

cesium-draw-tools
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>53-Cesium绘图工具.html</title>
  <!--引入js开发包资源-->
  <script src="./Cesium/Cesium.js"></script>
  <style>
    @import url("./Cesium/Widgets/widgets.css");
    *,
    body,
    html {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    html,
    body,
    #viewerContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .buttonGroup {
      position: absolute;
      top: 50px;
      left: 50px;
      z-index: 1;
    }
    .buttonGroup:nth-child(2){
      top: 90px;
    }

    .buttonGroup button {
      padding: 5px 8px;
      height: 35px;
      border: 1px solid skyblue;
      background-color: skyblue;
      outline: none;
    }
  </style>
</head>

<body>
  <div id="viewerContainer">
    <div class="buttonGroup">
      <button id='edit_mode'>编辑模式</button>
      <button id='draw_mode'>结束编辑</button>
    </div>
    <div class="buttonGroup">
      <button id='btn_point'>绘制Point</button>
      <button id='btn_label'>绘制Label</button>
      <button id='btn_polyline'>绘制Polyline</button>
      <button id='btn_rectangle'>绘制Rectangle</button>
      <button id='btn_polygon'>绘制Polygon</button>
    </div>
  </div>
</body>
<script src="./draw/Graphic.js"></script>
<script src="./draw/GraphicFactory.js"></script>
<script>
  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2VlZjI5MC0xMDZhLTRhMGQtOGM3NS0yZTczYWYxNzk0N2UiLCJpZCI6NTIzNzQsImlhdCI6MTYxODU2NTAwMn0.hSaADqKUhy3azmrauo9-9OHEEhg2Cplm4x8aFzEpO4Q";
  //初始化三维场景
  var viewer = new Cesium.Viewer("viewerContainer", {});
  //图形工厂类
  const graphicBuilder = new GraphicFactory(viewer);

  //绑定点击事件
  const btn_point = document.getElementById("btn_point");
  const btn_label = document.getElementById("btn_label");
  const btn_polyline = document.getElementById("btn_polyline");
  const btn_rectangle = document.getElementById("btn_rectangle");
  const btn_polygon = document.getElementById("btn_polygon");

  const btn_edit = document.getElementById("edit_mode");
  const btn_draw = document.getElementById("draw_mode");
  //绑定事件
  //绘制点
  btn_point.addEventListener("click", function () {
    console.warn("绘制点")
    graphicBuilder.drawPoint();
  });
  //绘制线
  btn_polyline.addEventListener("click", function () {
    console.warn("绘制线")
    graphicBuilder.drawPolyline();
  })
  //绘制多边形
  btn_polygon.addEventListener("click", function () {
    console.warn("绘制多边形")
    graphicBuilder.drawPolygon();
  })
  //绘制标签
  btn_label.addEventListener("click", function () {
    console.warn("绘制标签")
    graphicBuilder.drawLabel("text文本");
  })
  //绘制矩形
  btn_rectangle.addEventListener("click", function () {
    console.warn("绘制矩形")
    graphicBuilder.drawRectangle();
  });
  //开启编辑模式
  btn_edit.addEventListener("click", function () {
    console.warn(`编辑模式`);
    graphicBuilder.switchEditMode(true);
  });
  //关闭编辑模式
  btn_draw.addEventListener("click",function(){
    console.warn(`绘图模式`);
    graphicBuilder.switchEditMode(false);
  })

</script>

</html>