1

13693261870

2023-06-26 a43f84f7a44558805f65bc04f69d0f0d04902937

1

 ExportMap/UE.html

@@ -27,21 +27,293 @@
      height: 100%;
      position: absolute;
    }

    #container {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 5px;
      border-radius: 4px;
      border: 1px solid rgba(128, 128, 128, 0.5);
      color: #ffffff;
    }

    button {
      background: transparent;
      border: 1px solid #d0ffb8;
      color: white;
      border-radius: 2px;
      margin: 3px;
      cursor: pointer;
    }
  </style>
  <script>
    $(function () {
      window.map = new TUMap({
        id: 'map', // div的id
        //url: 'http://192.168.20.39:91', // UE服务地址
        url: 'http://103.85.165.99:91',
        url: 'http://192.168.20.39:91', // UE服务地址
        //url: 'http://103.85.165.99:91',
        onInit: function () { // 初始化完成事件
          console.log("初始化完成");
        }
      })
    });

    // 转为WGS84坐标
    function toWGS84() {
      var trans = new TUTransForm({ x: 117.038112825, y: 39.382696649 });
      trans.transformWGS84ToLocal();
      trans.transformLocalToWGS84();
    }

    // 转为UE坐标
    function toUECoord() {

    }

    // 获取镜头信息
    function getCamera() {
      var location = map.camera.location; // 位置信息
      var rotation = map.camera.rotation; // 角度信息
      var distance = map.camera.distance; // 距离信息
      console.log(location, rotation, distance);
    }

    // 飞行
    function flyTo() {
      map.flyTo(x, y, z, roll, pitch, yaw, distance, callBack, time);
    }

    // 切换镜头
    function setView() {
      map.setView(x, y, z, roll, pitch, yaw, distance);
    }

    // 天气特效：sun-晴天 ,rain-雨天,snow-雪天
    function setWeather() {
      map.setWeather("snow");
    }

    // 时间特效：morning-早晨,noon-中午,evening-傍晚,night-夜晚,darkWorld-暗色场景
    function setTime() {
      map.setTime("night");
    }

    // 文字标签
    function createLabel() {
      var options = {
        id: 1, //唯一标识，不可重复 可不填
        x: 1000, //x轴ue4坐标
        y: 1000, //y轴ue4坐标
        z: 0,//z轴ue4坐标
        vectorType: "WGS84",//坐标类型 2.1.5版本后可设置
        size: { width: 480, height: 180 },//label的大小
        text: '测试文字',//显示的文字
        scale: 1,//缩放
        type: 'Type1',//类型 Default,Type1,Type2
        backgroundColor: "#ffffff",//背景色 支持rgba TUColor
        fillColor: "#00ff00",//文字颜色 
        visibility: true//默认是否显示
      };

      var lbl = map.createLabel(options);
      lbl.show(true); // 显示

      // lbl.show(false); // 隐藏
      // lbl.removeFromMap(); //  移除
      // map.removeLabel(lbl.id); //  移除
    }

    // POI点
    function createBillboard() {
      var param = {
        x: 1000, // x轴ue4坐标
        y: 1000, // y轴ue4坐标
        z: 0, // z轴ue4坐标
        image: "http://www.terra-it.cn/images/tubiao/indexLogo.png", // 图片地址
        scale: 0.5,//缩放
        clickedScale: 0.7,
        visibility: true, // 默认是否显示
        alertWindow: { // 可选，点击弹窗
          url: "http://localhost/testAlertWindow.html", // 弹窗地址
          size: new Vector2(180, 90), // 弹窗大小
          offset: new Vector2(50, -100) // 弹窗位置，右：x正，下：y正
        }
      }

      var poi = map.createBillboard(param);
      poi.show(true); // 显示

      var enable = true; // 是/否开启回调
      poi.EnableBillboardCallBack(enable, function (data) {
        console.info(data);
      });

      // poi.show(false); // 隐藏
      // poi.removeFromMap(); //  移除
    }

    // 3DPOI点
    function create3DBillboard() {
      var param = {
        x: 1000, // x轴ue4坐标
        y: 1000, // y轴ue4坐标
        z: 0, // z轴ue4坐标
        image: "http://www.terra-it.cn/images/tubiao/indexLogo.png", // 图片地址
        scale: 0.5,//缩放
        clickedScale: 0.7,
        visibility: true, // 默认是否显示
        alertWindow: {//可选，点击弹窗
          url: "http://localhost/testAlertWindow.html", // 弹窗地址
          size: new Vector2(180, 90), // 弹窗大小
          offset: new Vector2(50, -100) // 弹窗位置，右：x正，下：y正
        }
      }

      var poi = map.create3DBillboard(param);
      poi.show(true); // 显示

      var enable = true; // 是/否开启回调
      poi.Enable3DBillboardCallBack(enable, function (data) {
        console.info(data);
      });

      // poi.show(false); // 隐藏
      // poi.removeFromMap(); //  移除
    }

    // 添加线路
    function createPolyline() {
      var obj = map.createPolyline({
        pathWidth: 1000, // 路径宽度 
        pathColor: "#00FF00", // 路径颜色
        type: 1, // 线路类型: 0高亮 1三角 2箭头
        data: [ // 路径点位数组，ue4坐标
            new TUVector3(-129.99, -7.41, 0),
            new TUVector3(-131.00, -134.96, 0),
            new TUVector3(113.83, -128.26, 0),
            new TUVector3(123.84, -550.99, 0)
        ]
      });
    }

    // 添加区域
    function createAreaData() {
      var obj = map.createAreaData({
        id: "fdfdfdfdfd",
        data: [
          new TUVector3(0, 0, 0),
          new TUVector3(10000, 0, 0),
          new TUVector3(10000, 10000, 0),
          new TUVector3(0, 10000, 0)
        ]
      });
    }

    // 光圈
    function createCircleArea() {
      var param = {
        location: new TUVector3(0, 0, 0), // 中心点
        radius: 15000,
        type: 2, //0上浮横格，1实色，2箭头，3三角
        color: "#ff0000",
        height: 15000,  //默认5000
        brightness: 10 //默认10
      }
      var circle = map.createCircleArea(param);
      // circle.removeFromMap(); // 移除
    }

    // 围栏
    function createAreaBoundary() {
      var param = {
        type: 0, // 0上浮横格，1实色，2箭头，3三角
        height: 5000, // 默认5000
        color: "#ff0000", // 默认白色
        brightness: 10, // 默认10
        data: [ // 围栏点位数组 
            new TUVector3(-129.99, -7.41, 0),
            new TUVector3(-131.00, -134.96, 0),
            new TUVector3(113.83, -128.26, 0),
            new TUVector3(123.84, -550.99, 0)
        ]
      }
      var bound = map.createAreaBoundary(param);
      // bound.removeFromMap(); // 移除
    }

    // 高度量测
    function getMeasureHeight() {
      var obj = map.getMeasureHeight(function (e) { // 回调
        alert(JSON.stringify(e));
        obj.deleteObject(); // 移除
      });
    }

    // 折线距离量测
    function getDistanceHorizontal() {
      var obj = map.getDistanceHorizontal(function (e) { // 回调
        alert(JSON.stringify(e));
        obj.deleteObject(); // 移除
      });
    }

    // 平面面积量测
    function getPlaneArea() {
      var obj = map.getPlaneArea(function (e) { // 回调
        alert(JSON.stringify(e));
        obj.deleteObject(); // 移除
      });
    }

    // 拾取坐标
    function pickPosition() {
      map.pickPosition(function (e) {
        alert(JSON.stringify(e)); // e.objectName-内部编号，e.location-点位的ue4坐标
        map.endPick(); // 取消拾取
      });
    }

    // 拾取对象
    function pickObject() {
      map.execute("factory", "callEvent", { eventName: "ClickObjectCallBack", param: "1" }, function (e) {
        console.log(e);
        map.execute("factory", "callEvent", { eventName: "ClickObjectCallBack", param: "0" }, null); // 取消拾取
      });
    }

    // 清除
    function clear() {
      map.resetWeather(); // 移除天气特效
      map.resetTime(); // 移除时间特效
      map.clearAllCovering(); // 清除所有覆盖物
    }
  </script>
</head>
<body>
  <div id="map"></div>

  <div id="container">
    <button onclick="toWGS84();">转为WGS84坐标</button>
    <button onclick="toUECoord();">转为UE坐标</button>
    <button onclick="getCamera();">获取镜头信息</button>
    <button onclick="flyTo();">飞行</button>
    <button onclick="setView();">切换镜头</button>
    <button onclick="setWeather();">天气特效</button>
    <button onclick="setTime();">时间特效</button>
    <button onclick="createLabel();">文字标签</button>
    <button onclick="createBillboard();">POI点</button>
    <button onclick="create3DBillboard();">3DPOI点</button>
    <button onclick="createPolyline();">添加线路</button>
    <button onclick="createAreaData();">添加区域</button>
    <button onclick="createCircleArea();">光圈</button>
    <button onclick="createAreaBoundary();">围栏</button>
    <button onclick="getMeasureHeight();">高度量测</button>
    <button onclick="getDistanceHorizontal();">折线距离量测</button>
    <button onclick="getPlaneArea();">平面面积量测</button>
    <button onclick="pickPosition();">拾取坐标</button>
    <button onclick="pickObject();">拾取对象</button>
    <button onclick="clear();">清除</button>
  </div>
</body>
</html>