管道基础大数据平台系统开发-【CS】-ExportMap
13693261870
2024-09-03 3cfb6aa02516135fb174ab1b30620f2007924663
ExportMap/UE.html
@@ -61,10 +61,14 @@
    // 坐标转化
    function transform() {
      var coordinate = { x: 117.038112825, y: 39.382696649 }
      var coordinate = {
        "x": 117.04046434254622,
        "y": 39.722702758997606,
        "z": 0
      }
      var Wgs84ToLocal = map.transformWGS84ToLocal(coordinate.x, coordinate.y)
      console.log('Wgs84ToLocal', Wgs84ToLocal)
      var LocalToWGS84 = map.transformLocalToWGS84(Wgs84ToLocal.x, coordinate.y)
      var LocalToWGS84 = map.transformLocalToWGS84(Wgs84ToLocal.x, Wgs84ToLocal.y)
      console.log('LocalToWGS84', LocalToWGS84)
    }
@@ -78,256 +82,244 @@
    // 飞行
    function flyTo() {
      var x = 117.038112825, y = 39.382696649, z = 5000;
      var v = {
        z: 0,
        pitch: -8.675049781799316,
        roll: 0,
        yaw: 60.92010498046875,
        distance: 120112.3671875,
        time: 3
      };
      var x = 116.48915493897739; y = 39.81061022857503; z = 5000;
      var LocalToWGS84 = transToWGS84ToLocal(x, y)
      var roll = 0, pitch = 0, yaw = 0, distance = 1000;
      var callBack = function () { console.log("flyTo"); }
      var time = 3; // 3s
      map.flyTo(x, y, z, roll, pitch, yaw, distance, callBack, time);
      map.flyTo(LocalToWGS84.x, LocalToWGS84.y, v.z, v.roll, v.pitch, v.yaw, v.distance, callBack, time);
    }
    function transToWGS84ToLocal(x, y) {
      return map.transformWGS84ToLocal(x, y)
    }
    // 切换镜头
    function setView() {
      var x = 117.038112825, y = 39.382696649, z = 5000;
      var roll = 0, pitch = 0, yaw = 0, distance = 1000;
      map.setView(x, y, z, roll, pitch, yaw, distance);
    }
    // 天气特效
    function setWeather() {
      // sun-晴天 ,rain-雨天,snow-雪天
      map.setWeather('rain') // 晴天
      var v = {
        x: -567870.625,
        y: -964962.4375,
        z: 0,
        pitch: -8.675049781799316,
        roll: 0,
        yaw: 120.92010498046875,
        distance: 120112.3671875,
        time: 3
      };
      map.setView(v.x, v.y, v.z, v.roll, v.pitch, v.yaw, v.distance);
    }
    // 时间特效
    var timeFlag = true;
    function setTime() {
      // morning-早晨,noon-中午,evening-傍晚,night-夜晚,darkWorld-暗色场景
      map.setTime("evening");
      // morning-早晨,noon-中午,evening-傍晚,night-夜晚,darkWorld-暗色场景,12
      if (timeFlag) {
        map.setTime("evening");
      } else {
        map.setTime("noon");
      }
      timeFlag = !timeFlag
    }
    // 文字标签
    var labelFlag = true;
    var label_val = null;
    function createLabel() {
      var options = {
        id: 1, // 唯一标识,不可重复,可不填
        x: 1000, // x轴ue4坐标
        y: 1000, // y轴ue4坐标
        z: 0, // z轴ue4坐标
        size: { width: 480, height: 180 }, // label的大小
        text: '测试文字', // 显示的文字
        scale: 1, // 缩放
        type: 'Type1', // 类型 Default,Type1,Type2
        backgroundColor: "#ffffff", // 背景色支持rgba
        fillColor: "#00ff00", // 文字颜色
        visibility: true // 默认是否显示
      };
      var x = 116.48915493897739; y = 39.81061022857503; z = 5000;
      var LocalToWGS84 = transToWGS84ToLocal(x, y)
      if (labelFlag) {
        var options = {
          id: 1, // 唯一标识,不可重复,可不填
          x: LocalToWGS84.x, // x轴ue4坐标
          y: LocalToWGS84.y, // y轴ue4坐标
          z: 0, // z轴ue4坐标
          size: { width: 100, height: 100 }, // label的大小
          text: '测试文字', // 显示的文字
          scale: 0.5, // 缩放
          type: 'Type1', // 类型 Default,Type1,Type2
          backgroundColor: "#ffffff", // 背景色支持rgba
          fillColor: "#00ff00", // 文字颜色
          visibility: true // 默认是否显示
        };
      var lbl = map.createLabel(options);
      // lbl.show(true); // 显示
        label_val = map.createLabel(options);
      } else {
        label_val.removeFromMap();
        label_val = null;
      }
      labelFlag = !labelFlag;
    }
    // POI点
    var poiFlag = true;
    var poi_val = null;
    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://192.168.20.89:12306/popupThree.html", // 弹窗地址
          size: new TUVector2(180, 90), // 弹窗大小
          offset: new TUVector2(50, -100) // 弹窗位置,右:x正,下:y正
      var x = 116.48815493897739; y = 39.81061022857503; z = 5000;
      var LocalToWGS84 = transToWGS84ToLocal(x, y)
      if (poiFlag) {
        var param = {
          x: LocalToWGS84.x, // x轴ue4坐标
          y: LocalToWGS84.y, // y轴ue4坐标
          z: 0, // z轴ue4坐标
          image: "123.png", // 图片地址
          scale: 0.5, // 缩放比例
          clickedScale: 0.7, // 点击后比例
          visibility: true, // 默认是否显示
          alertWindow: { // 可选,点击弹窗
            url: "http://192.168.20.89:12306/popupThree.html", // 弹窗地址
            size: new TUVector2(180, 90), // 弹窗大小
            offset: new TUVector2(-45, -110) // 弹窗位置,右:x正,下:y正
          }
        }
        poi_val = map.createBillboard(param);
        poi_val.show(true); // 显示
      } else {
        poi_val.removeFromMap();
        poi_val = null;
      }
      poiFlag = !poiFlag;
      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点
    var thPoiFlag = true;
    var poi_3d_val = null
    function create3DBillboard() {
      var testPoints = [{ "x": 10000, "y": 10000, "z": 4000 }];
      var points = []
      testPoints.forEach(function (item) {
        points.push({
          x: item.x,
          y: item.y,
          z: item.z,
          image: "http://www.terra-it.cn/images/tubiao/indexLogo.png",
          text: "",
          scale: 20,
          clickedScale: 1,
          flash: false,
          canClick: true,
      if (thPoiFlag) {
        var testPoints = [{ x: 116.49255493897739, y: 39.81451022857503, z: 4000 }];
        var points = [];
        testPoints.forEach(function (item) {
          var LocalToWGS84 = transToWGS84ToLocal(item.x, item.y)
          points.push({
            x: LocalToWGS84.x,
            y: LocalToWGS84.y,
            z: item.z,
            image: "123.png",
            text: "",
            scale: 80,
            clickedScale: 1,
            flash: false,
            canClick: true
          });
        });
        poi_3d_val = map.create3DBillboard(points);
        poi_3d_val.forEach(function (poi) {
          poi.show(true);
        });
      });
      poi = map.create3DBillboard(points)
      poi.forEach(function (b) {
        b.show(true)
      })
      var enable = true; // 是/否开启回调
      obj = obj.concat(poi);
      // poi.show(false); // 隐藏
      // poi.removeFromMap(); //  移除
    }
    function creat() {
      map.Enable3DBillboardCallBack(true, function (e) {
        console.log(e, "11111111111")
      })
    }
    // 添加线路
    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)
      //   ]
      // });
      var testPoints = [
        new TUVector3(77053.6953125, 150984.859375, 0),
        new TUVector3(16167.91015625, 151470.453125, 0),
        new TUVector3(14827.0908203125, 100942.328125, 0),
        new TUVector3(71444.015625, 104834.4375, 0),
        new TUVector3(67891.890625, 57269.85546875, 0),
        new TUVector3(13084.04296875, 56401.7734375, 0),
        new TUVector3(11550.640625, -13705.76953125, 0),
        new TUVector3(7773.74560546875, -103738.140625, 0),
      ];
      testPointArray = []
      //绘制路径
      pathObj = map.createPolyline({
        data: testPoints,
        pathWidth: 3000,
        type: 0,//0高亮线 1三角 2箭头
        pathColor: "cyan",
      });
      var roll = 0, pitch = -45, yaw = 0, distance = 1000;
      var callBack = function () { console.log("flyTo"); }
      var time = 3; // 3s
      map.flyTo(116.51446997, 39.772785555, 1000, roll, pitch, yaw, distance, callBack, time);
    }
    // 添加区域
    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
      } else {
        poi_3d_val.forEach(function (poi) {
          poi.removeFromMap();
        });
        poi_3d_val = null
      }
      var circle = map.createCircleArea(param);
      // circle.removeFromMap(); // 移除
      thPoiFlag = !thPoiFlag;
    }
    // 添加区域\
    var areaFlag = true;
    var area_val = null;
    function createAreaData() {
      if (areaFlag) {
        var val = [
          { x: 116.48855493897739, y: 39.81251022857503, z: 4000 },
          { x: 116.48505493897739, y: 39.81651022857503, z: 4000 },
          { x: 116.48905493897739, y: 39.81851022857503, z: 4000 },
          { x: 116.49255493897739, y: 39.81451022857503, z: 4000 },
          { x: 116.48855493897739, y: 39.81251022857503, z: 4000 },
        ]
        var data = [];
        for (var i in val) {
          var item = transToWGS84ToLocal(val[i].x, val[i].y)
          data.push(
            new TUVector3(item.x, item.y, 0)
          )
        }
        area_val = map.createAreaData({
          id: "fdfdfdfdfd",
          data: data
        });
      } else {
        area_val.removeFromMap();
        area_val = null;
      }
      areaFlag = !areaFlag;
    }
    // 围栏
    var boundflag = true;
    var bound_val = null
    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)
      if (boundflag) {
        var val = [
          { x: 116.48855493897739, y: 39.81251022857503, z: 4000 },
          { x: 116.48505493897739, y: 39.81651022857503, z: 4000 },
          { x: 116.48905493897739, y: 39.81851022857503, z: 4000 },
          { x: 116.49255493897739, y: 39.81451022857503, z: 4000 },
          { x: 116.48855493897739, y: 39.81251022857503, z: 4000 },
        ]
        var data = [];
        for (var i in val) {
          var item = transToWGS84ToLocal(val[i].x, val[i].y)
          data.push(
            new TUVector3(item.x, item.y, 0)
          )
        }
        var param = {
          type: 0, // 0上浮横格,1实色,2箭头,3三角
          height: 5000, // 默认5000
          color: "#ff0000", // 默认白色
          brightness: 10, // 默认10
          data: data
        };
        bound_val = map.createAreaBoundary(param);
      } else {
        bound_val.removeFromMap();
        bound_val = null;
      }
      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(); // 移除
      });
      boundflag = !boundflag;
    }
    // 拾取坐标
    function pickPosition() {
      // map.pickPosition(function (e) {
      //   alert(JSON.stringify(e)); // e.objectName-内部编号,e.location-点位的ue4坐标
      //   map.endPick(); // 取消拾取
      // });
      var vla = map.transformLocalToWGS84(map.camera.location.x, map.camera.location.y);
      alert(JSON.stringify(vla))
      var obj = map.transformLocalToWGS84(map.camera.location.x, map.camera.location.y);
      alert(JSON.stringify(obj));
    }
    // 拾取对象
    function pickObject() {
      map.pickPosition(function (e) {
        if (e) {
          alert(JSON.stringify(e))
        }
        alert(JSON.stringify(e))
      });
      // map.execute("factory", "callEvent", { eventName: "ClickObjectCallBack", param: "1" }, function (e) {
      //   console.log(e);
      //   map.execute("factory", "callEvent", { eventName: "ClickObjectCallBack", param: "0" }, null); // 取消拾取
      // });
    }
    // 清除
    function objclear() {
      map.clearAllCovering();
      map.setTime("noon");
      boundflag = true;
      bound_val = null
      areaFlag = true;
      area_val = null;
      thPoiFlag = true;
      poi_3d_val = null;
      poiFlag = true;
      poi_val = null;
    }
  </script>
@@ -341,22 +333,16 @@
    <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="objclear();">清除</button>
  </div>
</body>
</html>
</html>