thingjs.js 12.0 KB
var app = new THING.App();
// 引用地图组件脚本
THING.Utils.dynamicLoad(["https://www.thingjs.com/uearth/uearth.min.js"], function () {
    var map = app.create({
        type: "Map",
        // 设置app背景为黑色
        backgroundColor: [0, 0, 0],
        url: "https://www.thingjs.com/citybuilder_console/mapProject/config/T0RVd01qRT1DaXR5QnVpbGRlckAyMDE5",
        complete: function (event) {
            console.log(event.object.userLayers.length);

        }
    });
    // 创建一个 ThingLayer
    var thingLayer = app.create({
        type: "ThingLayer",
        name: "thingLayer01"
    });
    // 将ThingLayer添加到地图中
    map.addLayer(thingLayer);

    //流动速度
    let line_spped = 1;

    //郑州坐标经纬
    var startPos = [113.84857177734375, 34.52692430140103];
    var icn = [126.44439697265624,37.45741810262938];
    var cgn = [7.126007080078125,50.875311142200765];
    var anc = [210.00915527343747,61.16841084497744];
    var zaz = [-1.0074806213378906, 41.664448551062456];
    var hkg = [113.91448974609375,22.314507734511825];
    var lux = [6.217231750488281,49.63517499335973];
    var lgg = [5.443210601806641,50.63901028125873];
    var tbs = [44.962921142578125,41.66778269875833];

    let city_points = [
        {
            "name": "CGO",
            "point": [113.84857177734375, 34.52692430140103]
        },
        {
            name: "ICN",
            point: [126.44439697265624,37.45741810262938]
        },
        {
            name: "CGN",
            point: [7.126007080078125,50.875311142200765]
        },
        {
            name: "ANC",
            point: [210.00915527343747,61.16841084497744]
        },
        {
            name: "ZAZ",
            point: [-1.0074806213378906, 41.664448551062456]
        },
        {
            name: "HKG",
            point: [113.91448974609375,22.314507734511825]
        },
        {
            name: "LUX",
            point: [6.217231750488281,49.63517499335973]
        },
        {
            name: "LGG",
            point: [5.443210601806641,50.63901028125873]
        },
        {
            name: "TBS",
            point: [44.962921142578125,41.66778269875833]
        }
    ];

    city_points.forEach(function (obj) {
        var airport = obj[name];
        var airport_point = obj[point];

        //渲染航线
        let airgeoODLine = app.create({
            type: 'GeoFlyLine',
            name: airport,
            coordinates: [
                airport_point,
                startPos
            ],
            renderer: {
                type: 'image', // 代表贴图渲染
                lineType: 'Plane',
                imageUrl: '/guide/image/uGeo/path.png',
                width: 5, // 设置线宽 单位像素
                numPass: 5,
                speed: line_spped, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
                effect: true // 线发光效果 默认为 false 不开启
            }
        });

        //渲染机场坐标
        let geoPoint = app.create({
            type: 'GeoPoint',
            name: airport,
            coordinates: airport_point,
            offsetHeight: 2,    //离地高度 单位:米
            userData: { 'cityName': '郑州' },
            pivot:[0.5,1], //指定轴心点位置为图片x方向中点y方向最下
            label: {
                text: '{{cityName}}', //使用cityName字段的值进行标注
                offset: [0, 30],
                fontColor: [255, 0, 0],
                fontSize: 20
            },
            infoWindow:
                {
                    'title': '标题',
                    'displayMode': 'clickShow', //点击弹出
                    'type': 'standard',         //标准模式
                    'style': 'default',         //默认样式
                    'fieldData': [
                        {
                            'field': 'cityName',
                            'alias': '名称'
                        }]
                },
            renderer: {
                type: "image", //type有'image','model','vector'三种
                //url: 'image/uGeo/pop.png',//针对image和model 代表资源的路径
                url: 'https://www.thingjs.com/citybuilder_console/upload/mapIcons/systemIcons/27.png',
                size: 2,// 对于image,vector 是一个数字 代表缩放倍数 对于model 是一个数组 代表xyz轴向的缩放比例
            }
        });

    });

    var geoODLine = thingLayer.query('片状线带贴图')[0];
    if (!geoODLine) {
        geoODLine = app.create({
            type: 'GeoFlyLine',
            name: 'CGO-ZAZ',
            coordinates: [
                zaz,
                startPos
            ],
            renderer: {
                type: 'image', // 代表贴图渲染
                lineType: 'Plane',
                imageUrl: '/guide/image/uGeo/path.png',
                width: 5, // 设置线宽 单位像素
                numPass: 5,
                speed: line_spped, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
                effect: true // 线发光效果 默认为 false 不开启
            }
        });
    }
    else {
        geoODLine.visible = !geoODLine.visible;
    }

    let line_ANCCGO = app.create({
        type: 'GeoFlyLine',
        name: 'CGO-ANC',
        coordinates: [
            anc,
            startPos
        ],
        renderer: {
            type: 'image', // 代表贴图渲染
            lineType: 'Plane',
            imageUrl: '/guide/image/uGeo/path.png',
            width: 5, // 设置线宽 单位像素
            numPass: 5,
            speed: line_spped, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
            effect: true // 线发光效果 默认为 false 不开启
        }
    });

    let line_LGGCGO = app.create({
        type: 'GeoFlyLine',
        name: 'CGO-LGG',
        coordinates: [
            lgg,
            startPos
        ],
        renderer: {
            type: 'image', // 代表贴图渲染
            lineType: 'Plane',
            imageUrl: '/guide/image/uGeo/path.png',
            width: 5, // 设置线宽 单位像素
            numPass: 5,
            speed: line_spped, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
            effect: true // 线发光效果 默认为 false 不开启
        }
    });

    let line_CGNCGO = app.create({
        type: 'GeoFlyLine',
        name: 'CGO-CGN',
        coordinates: [
            cgn,
            startPos
        ],
        renderer: {
            type: 'image', // 代表贴图渲染
            lineType: 'Plane',
            imageUrl: '/guide/image/uGeo/path.png',
            width: 5, // 设置线宽 单位像素
            numPass: 5,
            speed: line_spped, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
            effect: true // 线发光效果 默认为 false 不开启
        }
    });

    let line_ICNCGO = app.create({
        type: 'GeoFlyLine',
        name: 'CGO-ICN',
        coordinates: [
            icn,
            startPos
        ],
        renderer: {
            type: 'image', // 代表贴图渲染
            lineType: 'Plane',
            imageUrl: '/guide/image/uGeo/path.png',
            width: 5, // 设置线宽 单位像素
            numPass: 5,
            speed: line_spped, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
            effect: true // 线发光效果 默认为 false 不开启
        }
    });

    let line_LUXCGO = app.create({
        type: 'GeoFlyLine',
        name: 'CGO-LUX',
        coordinates: [
            lux,
            startPos
        ],
        renderer: {
            type: 'image', // 代表贴图渲染
            lineType: 'Plane',
            imageUrl: '/guide/image/uGeo/path.png',
            width: 5, // 设置线宽 单位像素
            numPass: 5,
            speed: line_spped, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
            effect: true // 线发光效果 默认为 false 不开启
        }
    });

    let line_HKGCGO = app.create({
        type: 'GeoFlyLine',
        name: 'CGO-HKG',
        coordinates: [
            hkg,
            startPos
        ],
        renderer: {
            type: 'image', // 代表贴图渲染
            lineType: 'Plane',
            imageUrl: '/guide/image/uGeo/path.png',
            width: 5, // 设置线宽 单位像素
            numPass: 5,
            speed: line_spped, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
            effect: true // 线发光效果 默认为 false 不开启
        }
    });

    let line_TBSCGO = app.create({
        type: 'GeoFlyLine',
        name: 'CGO-TBS',
        coordinates: [
            tbs,
            startPos
        ],
        renderer: {
            type: 'image', // 代表贴图渲染
            lineType: 'Plane',
            imageUrl: '/guide/image/uGeo/path.png',
            width: 5, // 设置线宽 单位像素
            numPass: 5,
            speed: line_spped, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
            effect: true // 线发光效果 默认为 false 不开启
        }
    });


    let geoPoint = app.create({
        type: 'GeoPoint',
        name: 'cgopoint',
        coordinates: startPos,
        offsetHeight: 5,    //离地高度 单位:米
        userData: { 'cityName': '郑州' },
        pivot:[0.5,1], //指定轴心点位置为图片x方向中点y方向最下
        label: {
            text: '{{cityName}}', //使用cityName字段的值进行标注
            offset: [0, 30],
            fontColor: [255, 0, 0],
            fontSize: 20
        },
        infoWindow:
            {
                'title': '标题',
                'displayMode': 'clickShow', //点击弹出
                'type': 'standard',         //标准模式
                'style': 'default',         //默认样式
                'fieldData': [
                    {
                        'field': 'cityName',
                        'alias': '名称'
                    }]
            },
        renderer: {
            type: "image", //type有'image','model','vector'三种
            url: 'image/uGeo/pop.png',//针对image和model 代表资源的路径
            //url: 'https://www.thingjs.com/citybuilder_console/upload/mapIcons/systemIcons/27.png',
            size: 5,// 对于image,vector 是一个数字 代表缩放倍数 对于model 是一个数组 代表xyz轴向的缩放比例
        }
    });

    let tbsPoint = app.create({
        type: 'GeoPoint',
        name: 'tbspoint',
        coordinates: tbs,
        offsetHeight: 2,    //离地高度 单位:米
        userData: { 'cityName': 'TBS' },
        pivot:[0.5,1], //指定轴心点位置为图片x方向中点y方向最下
        label: {
            text: '{{cityName}}', //使用cityName字段的值进行标注
            offset: [0, 30],
            fontColor: [255, 0, 0],
            fontSize: 20
        },
        infoWindow:
            {
                'title': '标题',
                'displayMode': 'clickShow', //点击弹出
                'type': 'standard',         //标准模式
                'style': 'default',         //默认样式
                'fieldData': [
                    {
                        'field': 'cityName',
                        'alias': '名称'
                    }]
            },
        renderer: {
            type: "image", //type有'image','model','vector'三种
            //url: 'image/uGeo/pop.png',//针对image和model 代表资源的路径
            url: 'https://www.thingjs.com/citybuilder_console/upload/mapIcons/systemIcons/27.png',
            size: 2,// 对于image,vector 是一个数字 代表缩放倍数 对于model 是一个数组 代表xyz轴向的缩放比例
        }
    });

    thingLayer.add(geoODLine);

});