专栏首页ThingJS 3D开发ThingJS结合Web地图API开发,让数据展示更加出色!
原创

ThingJS结合Web地图API开发,让数据展示更加出色!

三维地图,是为了更好的数据可视化,以便更好地进行数据分析。ThingJS结合Web地图API开发了更多3D功能,让数据展示更加出色!

CMap 是基于 ThingJS 实现的地图组件库,我们与高德地图导航服务合作开发导航功能,用到其中的路径规划服务,这里的web服务API对所有用户开放,可以轻松开发。

按照高德的路径规划结果,使用GCJ02坐标系的谷歌影像,导航支持驾车、骑行与步行等交通方式,当然您可以自行开发更多的出行方式,记得使用API前先获取key:

https://lbs.amap.com/api/webservice/guide/api/direction

高德地图路径规划服务API是一套以HTTP形式提供的步行、公交、驾车查询及行驶距离计算接口,返回JSON 或 XML格式的查询数据,用于实现路径规划功能的开发。适用场景包括线路查询,以线路结果页面形式展现换乘方案。根据返回线路数据,自行开发线路导航。

开发示例提供起点、终点的按钮设置,根据不同交通方式来设定线路。点击起点按钮,则在地图上单击某处作为起点,终点按钮也是如此。如上图所示。

ThingJS与高德路径导航的开发示例如下:

var app = new THING.App();
// 设置app背景为黑色
app.background = [0, 0, 0];

// 高德地图key 免费版本有次数限制,此处仅供demo使用,如有需要请自行到高德地图网站申请商业版key
var amapKey = '5791cdaf02f4d44fd979a9f89739d06c';

THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'],
    function () {
        var startCoord, endCoord;
        var map = app.create({
            type: 'Map',
            attribution: 'Google'
        });
        var tileLayer1 = app.create({
            type: 'TileLayer',
            id: 'tileLayer1',
            url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'
        });
        map.addLayer(tileLayer1);

        // 创建一个图层展示起点终点的图标以及导航结果
        var thingLayer = app.create({
            type: 'ThingLayer',
            name: 'thingLayer'
        });
        map.addLayer(thingLayer);
        // 飞到地球上某一个位置
        app.camera.earthFlyTo({
            lonlat: [116.4365, 39.97479],
            height: 6000,
            complete: function () {
                createUI();
            }
        });

        // 是否点击选择起点按钮
        var selectStart = false;
        // 是否点击选择终点按钮
        var selectEnd = false;
        // 导航方式选择的UI
        var radio;

        /**
         * @param orgin 起点坐标
         * @param destination 终点坐标
         * @param transport 交通方式
         */
        function nav(origin, destination, transport) {
            // 先清除导航结果
            thingLayer.query('.GeoLine').destroy();
            // 构建查询url 不同出行方式构建url的方式不同 具体请参考高德路径规划api
            var navUrl = '?origin=' + origin + '&destination=' + destination + '&key=' + amapKey;
            var drivingUrl = 'https://restapi.amap.com/v3/direction/driving';
            var bicyclingUrl = 'https://restapi.amap.com/v4/direction/bicycling';
            var walkingUrl = 'https://restapi.amap.com/v3/direction/walking';
            if (transport === '驾车') {
                navUrl = drivingUrl + navUrl;
            }
            else if (transport === '骑行') {
                navUrl = bicyclingUrl + navUrl;
            }
            else if (transport === '步行') {
                navUrl = walkingUrl + navUrl;
            }
            // 请求高德地图导航服务
            $.ajax({
                type: 'GET',
                url: navUrl,
                dataType: 'json',
                success: function (data) {
                    // 先判断是否成功
                    if (data.status === '1' || data.errcode === 0) {
                        var path;
                        // 不同交通方式返回接口结构不同,具体请参考高德路径规划api
                        if (transport !== '骑行') {
                            path = data.route.paths[0];
                        }
                        else {
                            path = data.data.paths[0];
                        }
                        var distance = path.distance;
                        var duration = path.duration;
                        var steps = path.steps;
                        var coordinates = [];
                        for (var i = 0; i < steps.length; i++) {
                            var polyline = steps[i].polyline;
                            var coords = polyline.split(';');
                            for (var j = 0; j < coords.length; j++) {
                                var coord = coords[j].split(',');
                                coordinates.push([parseFloat(coord[0]), parseFloat(coord[1])]);
                            }
                        }
                        // 将路径规划结果创建一个GeoLine对象,并添加到图层
                        var road = app.create({
                            type: 'GeoLine',
                            name: 'road' + i,
                            coordinates: coordinates,
                            renderer: {
                                type: 'image',
                                lineType: 'Plane',
                                color: [255, 0, 0],
                                imageUrl: 'https://www.thingjs.com/uearth/uGeo/path.png',
                                // numPass: 6,
                                width: 6,
                                effect: true,
                                speed: 0.1
                            }
                        });
                        thingLayer.add(road);
                        // 飞到GeoLine对象
                        app.camera.earthFlyTo({
                            object: road
                        });
                    }
                }
            });
        }

        // 给地图添加点击事件,点击地图时选择起点或终点,并在地图上添加一个GeoPoint
        map.on('click', function (e) {
            if (selectStart) {
                startCoord = e.coordinates.toString();
                selectStart = false;
                document.body.style.cursor = 'default';
                var geoPoint = app.create({
                    type: 'GeoPoint',
                    name: 'startPoint',
                    coordinates: e.coordinates,
                    renderer: {
                        type: 'image',
                        url: 'https://www.thingjs.com/uearth/uGeo/start.png',
                        size: 3
                    }
                });
                thingLayer.add(geoPoint);
            }
            if (selectEnd) {
                endCoord = e.coordinates.toString();
                selectEnd = false;
                document.body.style.cursor = 'default';
                var geoPoint = app.create({
                    type: 'GeoPoint',
                    name: 'endPoint',
                    coordinates: e.coordinates,
                    renderer: {
                        type: 'image',
                        url: 'https://www.thingjs.com/uearth/uGeo/end.png',
                        size: 3
                    }
                });
                thingLayer.add(geoPoint);
                if (startCoord !== undefined && endCoord !== undefined) {
                    // 获取当前radio选中的值
                    var transport = radio.getValue();
                    nav(startCoord, endCoord, transport);
                }
            }
        });

        // 创建UI界面
        function createUI() {
            // 创建选择起点按钮
            new THING.widget.Button('选择起点', function () {
                selectStart = true;
                document.body.style.cursor = 'pointer';
                thingLayer.query('.GeoPoint').destroy();
                thingLayer.query('.GeoLine').destroy();
            });
            // 创建选择终点按钮
            new THING.widget.Button('选择终点', function () {
                if (selectStart) {
                    return;
                }
                selectEnd = true;
                document.body.style.cursor = 'pointer';
            });
            // 创建一个配置界面组件
            var panel = new THING.widget.Panel({
                titleText: '交通方式',
                hasTitle: true,
                width: 150

            });
            panel.positionOrigin = 'TR';// top-right
            panel.position = ['100%', 0];
            // 添加 单选框 组件
            radio = panel.addRadio({ 'radio': '驾车' }, 'radio', ['驾车', '骑行', '步行']);
            // 监听单选框选项改变的事件
            radio.on('change', function (ev) {
                nav(startCoord, endCoord, ev)
            })
        }
    });

ThingJS让3D应用的开发与集成更为快捷灵活。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ThingJS 3D场景如何进入?有两种简单的查询方法

    相较于2D平面的静态显示,3D场景可以实现层级切换、进入操作,通过视角拉近和进入物体,来直观了解模型资源。ThingJS提供双击事件来查询场景内的物体,当然,开...

    森友鹿锘
  • 融入ThingJS 3D可视化方案,让城市管线更加智能、高效

    物联网数字化转型的目的之一就是为了积累数据,对设备进行智能化管理,管线深埋在地下,是非常难以管理的一种设备,引入3D可视化方案会有多大帮助呢?

    森友鹿锘
  • ThingJS官方示例(三):3D标记“Marker”跳跃、闪烁和发光动画效果

    物联网3D可视化场景中,经常用到标注元素作为线路标绘、业务区域标绘,比如定位物联网设备或危险源位置,进行安全作业或者路径导航规划,远程解决难题。

    森友鹿锘
  • 批量导出某个简书用户的所有文章列表和文章超链接

    虽然简书提供了批量下载文章的功能,但是下载到本地的文章都是markdown格式的,不包含文章的链接,这不满足我的需求。

    Jerry Wang
  • PHP var关键字相关原理及使用实例解析

    其实我经过测试,认为var就是public的别名,是用在类中定义公有属性的,只不过历史问题,现在不用var了。后来查了查php官网,果然如此。

    砸漏
  • 纯粹依靠位操作实现整数加法运算

    Jerry Wang
  • 基于 H5与WebGL 的科幻风机 3D 展示

      许多世纪以来,风力机同水力机械一样,作为动力源替代人力、畜力,对生产力的发展发挥过重要作用。近代机电动力的广泛应用以及二十世纪50年代中东油田的发现,使风机...

    HT for Web
  • 在 Silverlight 5 项目中使用 async/await

    .Net 4.5 提供了 async/await 让异步编程回归同步, 不过, async/await 不是只能在 .Net 4.5 下才能使用, 通过使用 A...

    beginor
  • 基于 HTML5 WebGL 的 3D 科幻风机

      许多世纪以来,风力机同水力机械一样,作为动力源替代人力、畜力,对生产力的发展发挥过重要作用。近代机电动力的广泛应用以及二十世纪50年代中东油田的发现,使风机...

    HT for Web
  • Nodejs进阶:Express常用中间件body-parser实现解析

    body-parser是非常常用的一个express中间件,作用是对post请求的请求体进行解析。使用非常简单,以下两行代码已经覆盖了大部分的使用场景。

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券