【天地图】HTML页面实现车辆轨迹、起始点标记和轨迹打点的完整功能
目录
一、功能演示
运行以后完整的效果如下：
点击开始，小车会沿着轨迹进行移动，点击轨迹点会显示经纬度和时间：
二、完整代码
废话不多说，直接给完整代码，替换成自己的KEY，就可以直接看到完整效果了。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="天地图"/>
<title>天地图－地图API－范例－车辆轨迹</title>
<script src=" http://api.tianditu.gov.cn/api?v=4.0&tk=申请的KEY替换" type="text/javascript"></script>
<script src="http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.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 src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/data/point.js"></script>
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#mapDiv{height:400px;width:100%;}
p,input { margin-top: 10px; margin-left: 5px; font-size: 14px; }
</style>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" ></div>
<p>本例演示车辆轨迹</p>
<div >
<input type="button" value="开始" onClick="_CarTrack.start();"/>
<input type="button" value="暂停" onClick="_CarTrack.pause();"/>
<input type="button" value="结束" onClick="_CarTrack.stop();"/>
</div>
<script>
//起点经纬度
var startPosition = {
time: '2023-12-19 10:28:10',
lon: 121.1342347,
lat: 32.0551446
};
//终点经纬度
var endPosition = {
time: '2023-12-19 10:31:10',
lon: 121.1835337,
lat: 32.0486566
}
//轨迹点列表
var pointList = [
{
time: '2023-12-19 10:28:10',
lon: 121.1342347,
lat: 32.0551446
},
{
time: '2023-12-19 10:28:30',
lon: 121.1406307,
lat: 32.0553588
},
{
time: '2023-12-19 10:29:10',
lon: 121.1475297,
lat: 32.0555119
},
{
time: '2023-12-19 10:29:30',
lon: 121.1579859,
lat: 32.0558791
},
{
time: '2023-12-19 10:29:50',
lon: 121.1679751,
lat: 32.0563687
},
{
time: '2023-12-19 10:30:10',
lon: 121.1820965,
lat: 32.0571032
},
{
time: '2023-12-19 10:30:20',
lon: 121.1866958,
lat: 32.0572256
},
{
time: '2023-12-19 10:30:30',
lon: 121.1869832,
lat: 32.0557261
},
{
time: '2023-12-19 10:30:40',
lon: 121.1869473,
lat: 32.0534614
},
{
time: '2023-12-19 10:31:10',
lon: 121.1835337,
lat: 32.0486566
}
];
var tile = new T.TileLayer("http://t4.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=申请的KEY替换");
var map = new T.Map("mapDiv", {layers: [tile]});
map.centerAndZoom(new T.LngLat(121.1342347,32.0551446), 14);
var startIcon = "http://lbs.tianditu.gov.cn/images/bus/start.png";//起点图标
var endIcon = "http://lbs.tianditu.gov.cn/images/bus/end.png";//终点图标
var circle;
var _CarTrack = new T.CarTrack(map, {
interval: 5,
speed: 10,
dynamicLine: true,
polylinestyle: {color: "#2C64A7", weight: 5, opacity: 0.9},
Datas: pointList.map(function (obj, i) {var lonLat = new T.LngLat(obj.lon,obj.lat);return lonLat;})
})
function onLoad() {
this.createStartMarker();
this.createPointList();
this.createEndMarker();
}
//添加起点
function createStartMarker() {
var lonLat = new T.LngLat(this.startPosition.lon,this.startPosition.lat)
var startMarker = new T.Marker(lonLat, {
icon: new T.Icon({
iconUrl: startIcon,
iconSize: new T.Point(44, 34),
iconAnchor: new T.Point(12, 31)
})
});
map.addOverLay(startMarker);
};
//添加终点
function createEndMarker() {
var lonLat = new T.LngLat(this.endPosition.lon,this.endPosition.lat)
var endMarker = new T.Marker(lonLat, {
icon: new T.Icon({
iconUrl: endIcon,
iconSize: new T.Point(44, 34),
iconAnchor: new T.Point(12, 31)
})
});
map.addOverLay(endMarker);
}
function createPointList(){
for(var i = 0 ; i < this.pointList.length ; i++){
var point = this.pointList[i];
circle = new T.Circle(new T.LngLat(point.lon, point.lat), 50,{color:"orange",weight:5,opacity:0.5,fillColor:"#db1f1f",fillOpacity:0.5,lineStyle:"solid"});
map.addOverLay(circle);
var content = "经度：" + point.lon + "<br>" +
"纬度：" + point.lat + "<br>" +
"时间：" + point.time;
addClickHandler(content)
}
};
function addClickHandler(content){
circle.addEventListener("click",function(e){
openInfo(content,e)}
);
};
function openInfo(content,e){
var point = e.lnglat;
circle = new T.Marker(point);// 创建标注
var markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-30)}); // 创建信息窗口对象
map.openInfoWindow(markerInfoWin,point); //开启信息窗口
}
</script>
</body>
</html>
可以自行修改代码逻辑，把轨迹点都动态替换一下，从后端接口获取就行了。
三、参考文档
这也只是天地图的一部分功能，更多完整的可以参考官方文档：天地图API
原文地址：https://blog.csdn.net/HJW_233/article/details/144141255
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！