5+api绘制高德彩色轨迹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ImageLayer</title>
<meta id="viewport" name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />
<style>
html{
font-size: 24px;
}
*{
padding: 0;
margin: 0;
//禁止移动端长按复制文本
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
body{
background: beige;
font-family:-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
.map-container{
margin-top: -60px;
width: 100%;
height: 500px;
/* height: calc(100% - 9rem); */
position: absolute;
min-width: 300px;
background-color: #033447;
background: #033447;
}
.info-box{
position: absolute;
top: 13rem;
right: 0.5rem;
background: rgba(0,0,0,0.3);
height: 2.2rem;
border-radius: 1.1rem;
line-height: 1.4;
padding-left: 0.4rem;
z-index: 999;
transition: margin 0.4s;
-webkit-transition: margin 0.4s;
}
.avatar{
width: 2rem;
height: 2rem;
float: right;
border: 0.1rem solid #fff;
border-radius: 50%;
}
.name{
padding-right: 2.5rem;
white-space: nowrap;
text-align: right;
color: #fff;
font-size: 0.7rem;
margin-top: 0.3rem;
}
.time{
padding-right: 2.5rem;
white-space: nowrap;
text-align: right;
font-size: 0.5rem;
color: rgba(255,255,255,0.8);
}
.distance{
margin-top: 0.3rem;
font-size: 0.5rem;
}
p{
padding-right: 2.5rem;
white-space: nowrap;
text-align: right;
}
</style>
</head>
<body>
<div class="container">
<div class="info-box">
<img class="avatar" src="./img/applogo.png" alt="">
<p class="name">蓝色力量</p>
<p class="time" id="time">09月10日</p>
<p id="distance" class="distance"></p>
</div>
<div id="map-container" class="map-container"></div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"></script>
<script>
var pointsList = [];
function getNowFormatDate() {
var date = new Date();
var seperator1 = "月";
var month = date.getMonth() + 1;//月
var strDate = date.getDate(); //日
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = month + seperator1 + strDate + '日';
document.getElementById("time").innerHTML = currentdate
}
getNowFormatDate();
var reg = new RegExp("(^|&)"+ 'userid' +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
var url = '请求的数据轨迹接口?userid='+unescape(r[2]);
// 高德猎鹰
// var reg2 = new RegExp("(^|&)"+ 'tid' +"=([^&]*)(&|$)");
// var r2 = window.location.search.substr(1).match(reg2);
// var url = '请求的轨迹数据接口?trid='+unescape(r[2])+'&tid='+unescape(r2[2]);
console.log("调用"+url);
// 请球数据
function getData(url){
var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', url, true);
httpRequest.send();
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var json = httpRequest.responseText;//获取到json字符串，还需解析
// console.log(json)
// 原先逻辑
pointsList = JSON.parse(json).data;
// 高德-猎鹰
// pointsList = JSON.parse(json).data.latitudeLongitude;
console.log('获取经纬度参数');
// console.log(JSON.stringify(pointsList));
preProcessList();
setCustomLayer();
}
};
}
getData(url);
var mapZooms = [3, 18]
var map = new AMap.Map('map-container', {
mapStyle: 'https://amap://styles/blue',
resizeEnable: true, //是否监控地图容器尺寸变化
// dragEnable: false, //地图是否可通过鼠标拖拽平移，
// doubleClickZoom: false, //地图是否可通过双击鼠标放大地图
// keyboardEnable: false, // 地图是否可通过键盘控制,默认为true方向键控制地图平移，
// scrollWheel: false, // 地图是否可通过鼠标滚轮缩放浏览
// touchZoom: false, // 地图在移动终端上是否可通过多点触控缩放浏览地图
zooms: mapZooms
});
map.setFeatures(['bg','road']); // 多个种类要素显示
// 监听容器变化
// 获取经纬度（这里处理数据）--start
/*
* 添加Canvas图层
*/
var polylineArr = [];
var colorSteps = 10; // 颜色等级
var maxSpeed = 0;
var minSpeed = 0;
var averageSpeed = 0; // 平均速度
var totalSpeed = 0;
// setAvgSpeed();
var speedTopStep = 0;
var speedBellowStep = 0;
function setPoints(){
var markersArg = [{
icon: 'http://file.tiananborui.com/5f6060b005aab0e4ee6ecf27.png',
position: [pointsList[0].longitude, pointsList[0].latitude]
}, {
icon: 'http://file.tiananborui.com/5f6060c505aab0e4ef6ecf27.png',
position: [pointsList[pointsList.length-1].longitude, pointsList[pointsList.length-1].latitude]
}];
markersArg.forEach(function(marker) {
var maker = new AMap.Marker({
map: map,
position: [marker.position[0], marker.position[1]],
icon: new AMap.Icon({
size: new AMap.Size(20, 20), //图标大小
image: marker.icon,
imageSize: new AMap.Size(20,20)
}),
offset: new AMap.Pixel(-10, -10)
});
});
}
function preProcessList() {
for (var i = 0; i < pointsList.length; i++) {
var tmp = [];
var speed = pointsList[i].speed;
tmp[0] = pointsList[i].longitude;
tmp[1] = pointsList[i].latitude;
// 数组累加求平均data.reduce((totalPrice, item) => totalPrice + item.price, 0);
totalSpeed += speed
polylineArr.push(tmp);
// 获取最高速度和最低速度
if (speed > -1 && speed > maxSpeed) {
maxSpeed = speed;
}
if (speed > -1 && speed < minSpeed) {
minSpeed = speed;
}
}
averageSpeed = totalSpeed/pointsList.length;
// console.log('平均速度'+averageSpeed)
speedTopStep = (maxSpeed - averageSpeed) / colorSteps;
speedBellowStep = (averageSpeed - minSpeed) / colorSteps;
// console.log('最大速度颜色等级'+speedTopStep)
// console.log('最小速度颜色等级'+speedBellowStep)
/** 使用高德地图自带的覆盖方法, 自动定位并缩放, 但不显示-start **/
var polyline = new AMap.Polyline({
path: polylineArr,
strokeColor: "#FF33FF", // //线颜色
strokeOpacity: 0,
strokeWeight: 0,
zIndex:0
});
polyline.setMap(map);
// 绘制开始点和结束点
setPoints(); // 绘制标记点--每1公里标记一下
map.setFitView(); //屏幕自适应-// 自动适配到合适视野范围// 无参数，默认包括所有覆盖物的情况
// console.log('结束定位和自适应屏幕')
}
var bellowColors = ["#ffff00", "#fff500", "#ffe800", "#ffd900", "#ffc700", "#ffb400", "#ffa000", "#ff8a00", "#ff6000", "#ff2700", "#ff0000"];
var topColors = ["#ffff00", "#eeff00", "#d7ff00", "#bcff00", "#9fff00", "#7fff00", "#5fff00", "#41ff00", "#27ff00", "#10ff00", "#00ff00"];
// var topColors = ["#00ff00", "#10ff00", "#27ff00", "#41ff00", "#5fff00", "#7fff00", "#9fff00", "#bcff00", "#d7ff00","#eeff00", "#ffff00"];
function getColor(speed) {
if(speed < 0 ){
return '#ffff00';
}
var subSpeed = speed - averageSpeed;
if (subSpeed > 0) {
if(speedTopStep===0){
return topColors[10];
}
var level = parseInt(subSpeed / speedTopStep);
// console.log('等级'+level)
return bellowColors[level];
} else {
if(speedBellowStep===0){
return topColors[10];
}
var level = parseInt(Math.abs(subSpeed) / speedBellowStep);
return topColors[level];
}
}
// 初始化canvas
var canvas = '';
function setCustomLayer() {
// console.log('初始化canvas')
map.plugin(['AMap.CustomLayer'], function () {
canvas = document.createElement('canvas');
var customLayer = new AMap.CustomLayer(canvas, {
zIndex: 99,
zooms: mapZooms
});
customLayer.setMap(map);
customLayer.render = drawLine;
});
}
// 绘制
function drawLine() {
// console.log('开始绘制轨迹');
var context = canvas.getContext('2d');
canvas.width = map.getSize().width;
canvas.height = map.getSize().height;
context.globalAlpha=1; // 这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。
context.clearRect(0, 0, canvas.width, canvas.height); //(x, y, widh, height)清除指定的矩形区域，然后这块区域会变的完全透明。 再绘制每一帧动画之前，需要清空所有。清空所有最简单的做法就是clearRect()方法
context.lineWidth = 3; // 线宽。只能是正值。默认是1.0。
context.lineCap = 'round'; // 线条末端样式。（butt：线段末端以方形结束；round：线段末端以圆形结束；square：线段末端以方形结束，）
// 遍历所有的点
var startColor = '';
var endColor = '';
// 第一个点
pointsList[0].containerPos = map.lngLatToContainer([pointsList[0].longitude, pointsList[0].latitude]);
for (var j = 1, pointLen = pointsList.length; j < pointLen; j++) {
pointsList[j].containerPos = map.lngLatToContainer([pointsList[j].longitude, pointsList[j].latitude]); // 转换为地图识别的格式
var startX = pointsList[j - 1].containerPos.x; //开始点的x坐标
var startY = pointsList[j - 1].containerPos.y; //开始点的y坐标
var endX = pointsList[j].containerPos.x; //结束点的x坐标
var endY = pointsList[j].containerPos.y; //结束点的y坐标
context.beginPath(); // 新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
context.moveTo(startX, startY); // 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
context.lineTo(endX, endY); // //绘制一条从当前位置到指定坐标(200, 50)的直线.
context.strokeStyle = getColor(pointsList[j].speed); //根据速度来获取颜色---设置图形轮廓的颜色
context.stroke(); // 通过线条来绘制图形轮廓
//设置渐变
startColor = getColor(pointsList[j-1].speed);
endColor = getColor(pointsList[j].speed);
var grd = context.createLinearGradient(startX, startY, endX, endY); // 创建线性的渐变对象
grd.addColorStop(0, startColor);
grd.addColorStop(1, endColor);
context.strokeStyle = grd;
context.stroke();
}
}
/* end */
</script>
</body>
</html>
浙公网安备 33010602011771号