~admin/JDUE.git

<!DOCTYPE >
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>经济运行对接页</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
            font-size: 13px;
            font-family: 微软雅黑;
        }
 
        #map {
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>
    <script src="UE/jquery.min.js"></script>
    <script src="UE/tumap.js"></script>
    <script>
        var UE = {
            arr: [],
 
            id: null,
 
            map: null,
 
            isLocal: false,
 
            lastIndex: null,
 
            poiHeight: 3000, // POI的高度
 
            winXOffset: 12000, // 弹出窗口的X偏移量
 
            data: { key: 'TerraIT', industry_name: null, build_id: null }, // UE.test()，UE.locateLY(287)，UE.queryLY("新一代信息技术产业", 287)
 
            xOffset: -0.0042650793719939,
 
            yOffset: 0.0278651231623049,
 
            ueUrl: 'http://103.85.165.98:22306/',
 
            jdApi: 'http://ldjsc-test.bda.gov.cn/', // 'http://ldjsc.bda.gov.cn/',
 
            // 2 经济-大屏-产业楼宇列表
            lyUrl:
              'sql/data/api/v2/execute/customResult/SA2022060121192008197605/data',
 
            // 3 企业的列表
            qyUrl:
              'sql/data/api/v2/execute/customResult/SA2022060121220407301036/data',
 
            // 5-楼宇的详情
            lvUrl:
              'sql/data/api/v2/execute/customResult/SA2022060121220407301036/data',
 
            mainUrl: location.href.substring(0, location.href.lastIndexOf('/') + 1),
 
            json: [{ "industry_name": "新一代信息技术产业", "lng": 116.50690307, "create_time": 1654879065000, "development_unit": "大族环球科技股份有限公司", "statistical_time": "2021年", "industrial_output": -1, "land_usage": "科研用地", "enterprise_num": 28, "mode_of_operation": "-1", "update_time": 1654879065000, "vacancy_rate": 0.3, "name": "大族互联网+创新园", "id": 264, "same_compared_lift": -1, "key_enterprise_num": 28, "build_industry_proportion": -1, "lat": 39.79056823 }, { "industry_name": "新一代信息技术产业", "lng": 116.49982221, "create_time": 1654879066000, "development_unit": "北京朝林实业有限公司", "statistical_time": "2021年", "industrial_output": -1, "land_usage": "商服用地", "enterprise_num": 16, "mode_of_operation": "-1", "update_time": 1654879066000, "vacancy_rate": 0.2, "name": "朝林总部经济创新园AB座", "id": 267, "same_compared_lift": -1, "key_enterprise_num": 16, "build_industry_proportion": -1, "lat": 39.79200215 }, { "industry_name": "新一代信息技术产业", "lng": 116.5018649, "create_time": 1654879066000, "development_unit": "北京亦庄投资控股有限公司", "statistical_time": "2021年", "industrial_output": -1, "land_usage": "商服用地", "enterprise_num": 2, "mode_of_operation": "-1", "update_time": 1654879066000, "vacancy_rate": 0.9, "name": "万源商务中心", "id": 269, "same_compared_lift": -1, "key_enterprise_num": 2, "build_industry_proportion": -1, "lat": 39.80021647 }, { "industry_name": "新一代信息技术产业", "lng": 116.50354913, "create_time": 1654879066000, "development_unit": "北京亦庄投资控股有限公司", "statistical_time": "2021年", "industrial_output": -1, "land_usage": "商服用地", "enterprise_num": 14, "mode_of_operation": "-1", "update_time": 1654879066000, "vacancy_rate": 0.57, "name": "亦城财富中心", "id": 271, "same_compared_lift": -1, "key_enterprise_num": 14, "build_industry_proportion": -1, "lat": 39.79355342 }, { "industry_name": "新一代信息技术产业", "lng": 116.49787834, "create_time": 1654879067000, "development_unit": "北京亦庄投资控股有限公司", "statistical_time": "2021年", "industrial_output": -1, "land_usage": "商服用地", "enterprise_num": 5, "mode_of_operation": "-1", "update_time": 1654879067000, "vacancy_rate": 0.4, "name": "亦城国际中心", "id": 273, "same_compared_lift": -1, "key_enterprise_num": 5, "build_industry_proportion": -1, "lat": 39.80096776 }, { "industry_name": "新一代信息技术产业", "lng": 116.50866087, "create_time": 1654879067000, "development_unit": "北京亦庄投资控股有限公司", "statistical_time": "2021年", "industrial_output": -1, "land_usage": "商服用地", "enterprise_num": 4, "mode_of_operation": "-1", "update_time": 1654879067000, "vacancy_rate": 0.6, "name": "亦城科技中心", "id": 275, "same_compared_lift": -1, "key_enterprise_num": 4, "build_industry_proportion": -1, "lat": 39.78493561 }, { "industry_name": "新一代信息技术产业", "lng": 116.53505584, "create_time": 1654879067000, "development_unit": "北京亦庄盛元投资开发有限公司", "statistical_time": "2021年", "industrial_output": -1, "land_usage": "商服用地", "enterprise_num": 4, "mode_of_operation": "-1", "update_time": 1654879067000, "vacancy_rate": 0.88, "name": "亦城时代广场", "id": 276, "same_compared_lift": -1, "key_enterprise_num": 4, "build_industry_proportion": -1, "lat": 39.80759966 }, { "industry_name": "新一代信息技术产业", "lng": 116.57197986, "create_time": 1654879068000, "development_unit": "北京通明湖信息城发展有限公司", "statistical_time": "2021年", "industrial_output": -1, "land_usage": "公建用地", "enterprise_num": 14, "mode_of_operation": "-1", "update_time": 1654879068000, "vacancy_rate": 0.38, "name": "信创园", "id": 278, "same_compared_lift": -1, "key_enterprise_num": 14, "build_industry_proportion": -1, "lat": 39.78532377 }, { "industry_name": "新一代信息技术产业", "lng": 116.55274278, "create_time": 1654879068000, "development_unit": "天通泰文化数码科技园有限公司", "statistical_time": "2021年", "industrial_output": -1, "land_usage": "商服用地、公建用地", "enterprise_num": 23, "mode_of_operation": "-1", "update_time": 1654879068000, "vacancy_rate": 0.3, "name": "天通泰", "id": 280, "same_compared_lift": -1, "key_enterprise_num": 23, "build_industry_proportion": -1, "lat": 39.78019126 }, { "industry_name": "新一代信息技术产业", "lng": 116.50552533, "create_time": 1654879068000, "development_unit": "国锐房地产开发有限公司", "statistical_time": "2021年", "industrial_output": -1, "land_usage": "商服用地", "enterprise_num": 7, "mode_of_operation": "-1", "update_time": 1654879068000, "vacancy_rate": 0.32, "name": "国锐金嵿AB座", "id": 281, "same_compared_lift": -1, "key_enterprise_num": 7, "build_industry_proportion": -1, "lat": 39.78887901 }, { "industry_name": "新一代信息技术产业", "lng": 116.5097154, "create_time": 1654879068000, "development_unit": "中国航空技术北京有限公司", "statistical_time": "2021年", "industrial_output": -1, "land_usage": "综合用地", "enterprise_num": 3, "mode_of_operation": "-1", "update_time": 1654879068000, "vacancy_rate": 0.54, "name": "中航国际广场", "id": 284, "same_compared_lift": -1, "key_enterprise_num": 3, "build_industry_proportion": -1, "lat": 39.78136382 }, { "industry_name": "新一代信息技术产业", "lng": 116.51088321, "create_time": 1654879068000, "development_unit": "中航技易发投资有限公司", "statistical_time": "2021年", "industrial_output": -1, "land_usage": "综合用地", "enterprise_num": 16, "mode_of_operation": "-1", "update_time": 1654879068000, "vacancy_rate": 0.3, "name": "中航技广场", "id": 287, "same_compared_lift": -1, "key_enterprise_num": 16, "build_industry_proportion": -1, "lat": 39.78033662 }],
 
            // 初始化
            init: function () {
                var that = this
                var url = window.location.href
                if (url.indexOf('#') > -1) url = url.split('#', 2)[0]
                this.mainUrl = url.substring(0, url.lastIndexOf('/') + 1)
 
                this.map = new TUMap({
                    id: 'map', // div的id
                    url: this.isLocal
                      ? 'http://127.0.0.1:96'
                      : 'http://103.25.37.69:90', // UE服务
 
                    onInit: function () {
                        that.inited() // 初始化完成
                    }
                })
            },
 
            // 初始化完成
            inited: function () {
                var that = this
                this.map.setTime(12.0) // 中午
                this.map.setWeather('sun') // 晴天
                this.setView({
                    x: -567870.625,
                    y: -964962.4375,
                    z: 0,
                    pitch: -8.675049781799316,
                    roll: 0,
                    yaw: 60.92010498046875,
                    distance: 120112.3671875
                }) // 起始位置
                // this.setView({
                //     x: -566519.6875,
                //     y: -967065.125,
                //     z: 0,
                //     roll: 0,
                //     pitch: -39.7,
                //     yaw: -127.88,
                //     distance: 91690.3
                // }) // 起始位置
 
                //this.map.Enable3DBillboardCallBack(true, function (e) {
                //    console.log("3DBillboardCallBack => ", e);
                //    if (e && e.BillboardMouseType == "Pressed" && e.JsonNews) {
                //        that.map.execute('grapi', 'ShowPOI3D', { visibility: true, id: e.JsonNews.data.id }, function () { console.log("grapi > ShowPOI3D >> "); });
                //    }
                //});
 
                window.addEventListener('message', function (e) {
                    // 监听 message 事件
                    if (e.data && e.data.build_id && e.data.key != that.data.key) {
                        console.log('接受消息 => ', e.data)
 
                        that.data.build_id = e.data.build_id
                        if (that.data.industry_name == e.data.industry_name) {
                            that.locateLY(e.data.build_id)
                        } else {
                            that.data.industry_name = e.data.industry_name
                            that.queryLY(e.data.industry_name, e.data.build_id)
                        }
                    }
                })
 
                this.map.pickPosition(function (e) {
                    if (e && e.category == 'billboard' && e.clickType == 1) {
                        // && e.clickType == 1
                        that.data.build_id = e.data.id
                        console.log('发送消息 => ', that.data)
 
                        that.locateLY(e.data.id)
                        window.parent.postMessage(that.data, '*')
                    }
                })
            },
 
            // 定位
            setView: function (v) {
                // x-UE坐标X, y-UE坐标Y, z-UE坐标Z, roll-以朝向为轴的旋转角度, pitch-以朝向正右为轴的旋转角度, yaw-以朝向正上为轴的旋转角度, distance-镜头高度
                this.map.setView(v.x, v.y, v.z, v.roll, v.pitch, v.yaw, v.distance)
            },
 
            // 查询楼宇点
            queryLY: function (industry_name, build_id) {
                this.cls()
 
                var that = this
                var data = JSON.stringify({ industry_name: industry_name })
                this.ajax(this.lyUrl, 'POST', data, 'json', null, function (data) {
                    console.log('queryLY => ', data)
 
                    if (!data || !data.length) return
                    that.loadLY(data)
                    that.locateLY(build_id)
                })
            },
 
            // 测试
            test: function () {
                this.cls(), this.loadLY(this.json), this.locateLY(264)
            },
 
            // 清空
            cls: function () {
                this.lastIndex = null
                if (!this.arr.length) return
 
                this.arr.forEach(function (b) {
                    b.removeFromMap()
                })
                this.arr.length = 0
            },
 
            // 加载楼宇-3DPoi
            load3DLY: function (data) {
                var points = []
                for (var i = 0, c = data.length; i < c; i++) {
                    var d = data[i]
                    var p = this.map.transformWGS84ToLocal(
                      d.lng + this.xOffset,
                      d.lat + this.yOffset
                    )
                    points.push({
                        id: d.id,
                        x: p.x,
                        y: p.y,
                        z: this.poiHeight,
                        image:
                          (this.isLocal ? this.mainUrl : this.ueUrl) + 'UE/img/dot1.png',
                        text: '',
                        scale: 80,
                        clickedScale: 80,
                        flash: false,
                        canClick: true,
                        data: d,
                        //distanceDisplayCondition: 1000000,
                        alertWindow: this.getAlertWin(d)
                    })
                }
                this.arr = this.map.create3DBillboard(points)
            },
 
            // 加载楼宇
            loadLY: function (data) {
                for (var i = 0, c = data.length; i < c; i++) {
                    var d = data[i]
                    if (!d.lng || !d.lat) continue
 
                    var p = this.map.transformWGS84ToLocal(
                      d.lng + this.xOffset,
                      d.lat + this.yOffset
                    )
                    var bb = this.map.createBillboard({
                        id: d.id,
                        x: p.x,
                        y: p.y,
                        z: this.poiHeight,
                        image:
                          (this.isLocal ? this.mainUrl : this.ueUrl) + 'UE/img/dot1.png',
                        scale: 0.5,
                        clickedScale: 0.5,
                        visibility: true,
                        flash: false,
                        canClick: true,
                        data: d,
                        alertWindow: this.getAlertWin(d)
                    })
                    this.arr.push(bb)
                }
            },
 
            // 获取弹出窗口
            getAlertWin: function (d) {
                var width = 374,
                  height = 256,
                  imgWidth = 68,
                  imgHeight = 60
                return {
                    url:
                      (this.isLocal ? this.mainUrl : this.ueUrl) +
                      'popupThree.html?name=' +
                      d.name +
                      '&mode=' +
                      d.mode_of_operation +
                      '&unit=' +
                      d.development_unit +
                      '&output=' +
                      d.industrial_output +
                      '&usage=' +
                      d.land_usage +
                      '&rate=' +
                      d.vacancy_rate +
                      '&num=' +
                      d.enterprise_num, // 弹窗地址
                    size: new TUVector2(width, height), // 弹窗大小
                    offset: new TUVector2(-imgWidth + 10, 5 - height / 2.3) // 弹窗位置，右：x正，下：y正
                }
            },
 
            // 定位楼宇
            locateLY: function (build_id) {
                var idx = this.findPOI(build_id)
                if (idx == -1) return
 
                var poi = this.arr[idx]
                //this.map.flyTo(poi.ue4x + this.winXOffset, poi.ue4y, 0, 0, -53, 0, 25000, null, 3);
                this.map.focusOn(
                  new TUVector3(poi.ue4x + this.winXOffset, poi.ue4y, this.poiHeight),
                  new TURotator(0, -53, 0)
                )
 
                this.changeImg(build_id)
            },
 
            // 切换图片
            changeImg: function (id) {
                var idx = this.findPOI(id)
                if (idx == -1 || this.lastIndex == idx) return
 
                if (this.lastIndex != null) {
                    this.changePOI(this.lastIndex, false)
                    this.lastIndex = null
                }
 
                this.changePOI(idx, true)
                this.map.execute(
                  'grapi',
                  'Show2dPOI',
                  { visibility: true, id: id },
                  function (e) {
                      console.log('locateLY => ', e)
                  }
                )
                this.lastIndex = idx
            },
 
            // 查找POI
            findPOI: function (id) {
                for (var i = 0, c = this.arr.length; i < c; i++) {
                    if (this.arr[i].data.id == id) {
                        return i
                    }
                }
 
                return -1
            },
 
            // 切换POI
            changePOI: function (index, flag) {
                var poi = this.arr[index],
                  d = this.arr[index].data
                var bb = this.map.createBillboard({
                    id: d.id,
                    x: poi.ue4x,
                    y: poi.ue4y,
                    z: this.poiHeight,
                    image:
                      (this.isLocal ? this.mainUrl : this.ueUrl) +
                      (flag ? 'UE/img/dot.png' : 'UE/img/dot1.png'),
                    scale: 0.5,
                    clickedScale: 0.5,
                    visibility: true,
                    flash: false,
                    canClick: true,
                    data: d,
                    alertWindow: this.getAlertWin(d)
                })
 
                poi.removeFromMap()
                this.arr.splice(index, 1, bb)
            },
 
            // 创建3D窗口 *
            create3DWindow: function (d) {
                var p = this.map.transformWGS84ToLocal(d.lng, d.lat)
                var w = this.map.creat3DWindows({
                    location: new TUVector3(p.x, p.y, this.poiHeight), // 位置
                    WindowsSize: new TUVector2(1500, 1000), // 窗口的大小
                    WebUrl:
                      (this.isLocal ? this.mainUrl : this.ueUrl) +
                      'popupThree.html?name=' +
                      d.name +
                      '&mode=' +
                      d.mode_of_operation +
                      '&unit=' +
                      d.development_unit +
                      '&output=' +
                      d.industrial_output +
                      '&usage=' +
                      d.land_usage +
                      '&rate=' +
                      d.vacancy_rate +
                      '&num=' +
                      d.enterprise_num, // 弹窗地址
                    EnableWindowsDirection: true,
                    HiddenLength: 1000000
                })
 
                this.arr.push(w)
            },
 
            // 获取Host
            getHost: function () {
                return 'easy-data/' //return this.isLocal ? 'easy-data/' : this.jdApi + 'easy-data/'
            },
 
            // Ajax
            ajax: function (url, type, data, dataType, contentType, fn) {
                $.ajax({
                    url: this.getHost() + url,
                    type: type,
                    data: data,
                    dataType: dataType || 'json', // html、json、jsonp、script、text
                    contentType: contentType || 'application/json', //"application/x-www-form-urlencoded"
                    success: function (data) {
                        fn(data)
                    },
                    error: function (e) {
                        console.error(e)
                        fn()
                    }
                })
            }
        }
 
        $(function () {
            UE.init()
        })
    </script>
</head>
 
<body>
    <div id="map"></div>
</body>
</html>