基于高德地图轨迹描绘
由于项目需求，需要用到定位和轨迹描绘，在此记录下学习心得。
应用技术
- SpringBoot
- 高德地图web端JS API
- AJAX
废话不多说，直接上干货
相关链接
高德地图web端JS API地址https://lbs.amap.com/api/javascript-api/summary
申请高德地图key
进高德开放平台，有引导，一步一步申请即可
高德开放平台
项目结构
-
Position
public class Postition {
//经度
private float x;
//纬度
private float y;
public float getX() {
return x;
}
public void setX(float x) {
this.x = x;
}
public float getY() {
return y;
}
public void setY(float y) {
this.y = y;
}
@Override
public String toString() {
return "Postition{" +
"x=" + x +
", y=" + y +
'}';
}
public Postition(float x, float y) {
this.x = x;
this.y = y;
}
public Postition() {
}
}TestController
/**
* Copyright (C), 2015-2018, XXX有限公司
* FileName: TestController
* Author: LJQ
* Date: 2018/8/16 19:43
* Description: 测试数据
* History:
* <author> <time> <version> <desc>
* 作者姓名 修改时间 版本号 描述
*/
package com.ambow.run.controller;
import com.ambow.run.pojo.Postition;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
/**
* 〈一句话功能简述〉<br>
* 〈测试数据〉
*
* @author LJQ
* @create 2018/8/16
* @since 1.0.0
*/
@RestController
@RequestMapping("/test")
public class TestController {
/**
* 将后台的位置坐标传到前台
* @return
*/
@RequestMapping("/getPos")
public List<Postition> getPos(){
List<Postition> list = new ArrayList<Postition>();
for(int i=0;i<12;i++){
Postition pos = new Postition(116.405289f+i,39.904987f+i);
list.add(pos);
}
Postition pos1 = new Postition(55,55);
list.add(pos1);
return list;
}
}
rode.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>简单数据附加</title>
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.9&key=在高德地图申请的key值'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
$(document).ready(function () {
//获取后台坐标
$.ajax({
type: "POST",
url: "/test/getPos",
data: {},
success: function(result){
var data = result;
data = dataToPath(data);
draw(data);
var dis = distance(data);
debugger;
}
});
});
//将json数据转弯LngLat类型数据
function dataToPath(data) {
var path = new Array()
$.each(data,function (i,n) {
path.push(new AMap.LngLat(this.x,this.y));
});
return path;
}
//轨迹描绘
function draw(data) {
//创建地图
var map = new AMap.Map('container', {
zoom: 4
});
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas！');
return;
}
//启动页面
initPage(PathSimplifier);
});
function initPage(PathSimplifier){
var pathSimplifierIns = new PathSimplifier({
zIndex: 100,
map: map, //所属的地图实例
getPath: function(pathData, pathIndex) {
//返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
return pathData.path;
},
renderOptions: {
//轨迹线的样式
pathLineStyle: {
strokeStyle: 'red',
lineWidth: 6,
dirArrowStyle: true
}
}
});
pathSimplifierIns.setData([{
name: '轨迹0',
path: data //后台传来经过转换的数据
}]);
//选中路线0
pathSimplifierIns.setSelectedPathIndex(0);
}
}
//总距离转为公里
function distance(data) {
var dis = 0.00;
for(var i=0;i<data.length-1;i++){
dis = dis + AMap.GeometryUtil.distance(data[i],data[i+1]);
}
return dis;
}
</script>
</body>
</html>