文档章节

天地图-第七篇-按轨迹运动

o
 osc_fmg49rzg
发布于 2019/03/20 13:57
字数 361
阅读 32
收藏 0

精选30+云产品,助力企业轻松上云!>>>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>天地图</title>
    <style>
        /*设置地图显示大小*/
        #mapDiv{
            width: 600px;
            height: 400px;
        }
    </style>
    </head>
    <body onLoad="onLoad()"> 
        <!--地图容器-->
        <div id="mapDiv"></div>
        <div> 
            <input type="button" value="开始" onClick="_CarTrack.start();"/>
            <input type="button" value="暂停" onClick="_CarTrack.pause();"/>
            <input type="button" value="结束" onClick="_CarTrack.stop();"/>
        </div>
    </body>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>
    <script src="http://lbs.tianditu.gov.cn/js/lib/jquery/jquery-1.7.2.min.js"></script>
    <script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
    <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
    <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js"></script>
    <script type="text/javascript">
        var map;
        var drivingRoute;
        var zoom = 13;
        var _CarTrack;
        var startIcon = "http://lbs.tianditu.gov.cn/images/bus/start.png";    //起点图标
        var endIcon = "http://lbs.tianditu.gov.cn/images/bus/end.png";        //终点图标
        function onLoad() {
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(116.40069, 39.89945), zoom);
            map.addControl(TMAP_HYBRID_MAP);
            var config = {
                policy: 0,    //驾车策略
                onSearchComplete: searchResult    //检索完成后的回调函数
            };
            drivingRoute = new T.DrivingRoute(map, config);
            searchDrivingRoute()
        }

        function searchDrivingRoute() {
            map.clearOverLays();
            var startLngLat = new T.LngLat(116.354060,39.905650);
            var endLngLat = new T.LngLat(116.428130,39.903550);
            //驾车路线搜索
            drivingRoute.search(startLngLat, endLngLat);
        }

        function createRoute(lnglats, lineColor) {
            _CarTrack = new T.CarTrack(map, {
                interval: 20,
                speed: 10,
                dynamicLine: true,
                Datas: lnglats,
                polylinestyle: {color: "#2C64A7", width: 5, opacity: 0.9}
            })
        }

        //添加起始点
        function createStartMarker(result) {
            var startMarker = new T.Marker(result.getStart(), {
                icon: new T.Icon({
                    iconUrl: startIcon,
                    iconSize: new T.Point(44, 34),
                    iconAnchor: new T.Point(12, 31)
                })
            });
            map.addOverLay(startMarker);
            var endMarker = new T.Marker(result.getEnd(), {
                icon: new T.Icon({
                    iconUrl: endIcon,
                    iconSize: new T.Point(44, 34),
                    iconAnchor: new T.Point(12, 31)
                })
            });
            map.addOverLay(endMarker);
        }
        
        function searchResult(result) {
            //添加起始点
            createStartMarker(result);
            obj = result;
            //获取方案个数
            var routes = result.getNumPlans();
            for (var i = 0; i < routes; i++) {
                //获得单条驾车方案结果对象
                var plan = result.getPlan(i);
                createRoute(plan.getPath());

            }
        }
    </script>
</html>

效果如图

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
v-SLAM技术简述

定义: “Simultaneous Localization And Mapping” 同步定位与建图,表示在未知环境中定位自身位姿(pose)并同时构建环境地图(mapping)。 原理: 假设机器人在未知环境中运动,感知传感器为摄...

hairuiJY
03/31
0
0
基于Tablestore实现海量运动轨迹数据存储

前言 现在越来越多的人都开始关心自己的运动数据,比如每日的计步、跑步里程、骑行里程等。运动APP与运动类的穿戴设备借助传感器、地图、GPS定位等技术,收集好运动数据以后,通过与互联网社...

伯箫
2019/05/15
0
0
Android GPS定位轨迹抽稀之道格拉斯-普克(Douglas-Peuker)算法详解

1、抽稀 通俗点讲,直接举个栗子吧:我们知道运动轨迹实际上是由很多个经纬度坐标连接而成。那么我们是否需要将所有运动时记录下来的经纬度坐标都用来绘制轨迹呢?其实是没必要的,很多数据其...

boonya
2019/04/19
220
0
北京大学查红彬:基于数据流处理的SLAM技术

本文作者:HelloDeveloper 嗨,大家好。这里是学术报告专栏,读芯术小编不定期挑选并亲自跑会,为大家奉献科技领域最优秀的学术报告,为同学们记录报告干货,并想方设法搞到一手的PPT和现场视...

百度开发者中心
2019/09/24
0
0
北京大学查红彬:基于数据流处理的SLAM技术

本文作者:HelloDeveloper 嗨,大家好。这里是学术报告专栏,读芯术小编不定期挑选并亲自跑会,为大家奉献科技领域最优秀的学术报告,为同学们记录报告干货,并想方设法搞到一手的PPT和现场视...

百度开发者中心
2019/09/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux下java环境搭建

1、jdk下载: 官方地址:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 如下图所示,我这边选择的是红框中的版本 2、压缩包上传至服务器 将下载的压缩包上传...

wc_飞豆
45分钟前
17
0
面试题:Java对象不再使用时,为什么要赋值为null?

前言 许多Java开发者都曾听说过“不使用的对象应手动赋值为null“这句话,而且好多开发者一直信奉着这句话;问其原因,大都是回答“有利于GC更早回收内存,减少内存占用”,但再往深入问就回...

码农突围
47分钟前
22
0
设计模式(5) 原型模式

原型模式 原型模式的适用场景 浅拷贝 深拷贝 用Initialize方法修改初始化状态 原型模式与之前学习的各种工厂方法、单例模式、建造者模式最大、最直观的区别在于,它是从一个既有的对象“克隆...

zhixin9001
47分钟前
7
0
获取免费的pycharm激活码网站

http://www.lookdiv.com/

云烟成雨forever
47分钟前
27
0
用Helm部署Kubernetes应用,支持多环境部署与版本回滚

1 前言 Helm是优秀的基于Kubernetes的包管理器。利用Helm,可以快速安装常用的Kubernetes应用,可以针对同一个应用快速部署多套环境,还可以实现运维人员与开发人员的职责分离。现在让我们安...

南瓜慢说
49分钟前
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部