当前位置：网站首页>高德根据轨迹画线
高德根据轨迹画线
2022-07-02 07:43:00 【聰籽】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>画线</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#allmap {
height: 100%;
width: 100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己ak">
</script>
<!-- ak表示的是百度地图的key值 -->
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var dataArr = [
[
[113.28419, 23.118494],
[113.284041, 23.118498],
[113.284045, 23.118537],
[113.28418, 23.119271],
[113.28418, 23.119271],
[113.284319, 23.119336],
[113.284371, 23.119362],
[113.284905, 23.119627],
[113.285052, 23.119701],
[113.285547, 23.119974],
[113.285868, 23.12013],
[113.285938, 23.12023],
[113.285964, 23.120473],
[113.286007, 23.120716],
[113.28605, 23.121011],
[113.286128, 23.121398],
[113.286168, 23.121671],
[113.286128, 23.121936],
[113.286128, 23.121936],
[113.285595, 23.121944],
[113.285391, 23.121931],
[113.284905, 23.121853],
[113.28477, 23.121823],
[113.284006, 23.121697],
[113.283837, 23.121693],
[113.283702, 23.121701],
[113.28362, 23.121727],
[113.283199, 23.121832],
[113.283199, 23.121832],
[113.283251, 23.122361],
[113.283268, 23.122674],
[113.283268, 23.123021],
[113.283273, 23.123329],
[113.283273, 23.123438],
[113.283281, 23.124366],
[113.28329, 23.124744],
[113.283294, 23.125247],
[113.283299, 23.125456],
[113.283299, 23.125573],
[113.283312, 23.12622],
[113.283312, 23.126233],
[113.283303, 23.12658],
[113.283312, 23.126957],
[113.283312, 23.126957],
[113.28362, 23.126957],
[113.284245, 23.126949],
[113.284475, 23.126923],
[113.284896, 23.126832],
[113.285247, 23.126732],
[113.28628, 23.126458],
[113.286901, 23.12625],
[113.286992, 23.12622],
[113.287778, 23.125929],
[113.287778, 23.125929],
[113.288225, 23.125751],
[113.289006, 23.125425],
[113.289505, 23.125226],
[113.289644, 23.125178],
[113.290065, 23.125061],
[113.290347, 23.124996],
[113.290933, 23.124857],
[113.291011, 23.124835],
[113.291484, 23.124727],
[113.291484, 23.124727],
[113.291502, 23.124722],
[113.291562, 23.124701],
[113.291892, 23.124618],
[113.292227, 23.12454],
[113.292708, 23.124414],
[113.293225, 23.124262],
[113.293299, 23.124245],
[113.293941, 23.124119],
[113.294201, 23.124093],
[113.294201, 23.124093],
[113.294262, 23.124002],
[113.294258, 23.12395],
[113.294097, 23.123806],
[113.294097, 23.123806],
[113.294002, 23.123776],
[113.293702, 23.123694],
[113.293277, 23.123572],
[113.292934, 23.123472],
[113.292721, 23.123398],
[113.292435, 23.123294],
[113.292222, 23.123207],
[113.291962, 23.123086],
[113.291523, 23.122834],
[113.291011, 23.122539],
[113.290907, 23.122474],
[113.2901, 23.12197],
[113.289974, 23.121888],
[113.289701, 23.121719],
[113.289663, 23.121772]
]
]
var routeLine =[]
dataArr.map((item)=>{
console.log(item)
// item = changBMap()
item.map((item2)=>{
let lnglat =changBMap(item2[0],item2[1])
routeLine.push(lnglat.lng+','+lnglat.lat)
})
})
function changBMap(lng, lat){
let x_pi = (3.14159265358979324 * 3000.0) / 180.0
let x = lng
let y = lat
let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
let lngs = z * Math.cos(theta) + 0.0065
let lats = z * Math.sin(theta) + 0.006
return {
lng: lngs,
lat: lats,
}
}
console.log(routeLine)
// var routeLine = [
// "114.402781,30.498467", "114.402759,30.498304",
// "114.402723,30.498086", "114.402683,30.497872",
// "114.402647,30.497627", "114.402543,30.49751",
// "114.402341,30.497569", "114.402265,30.497592",
// "114.401367,30.497751", "114.400917,30.497806",
// "114.400792,30.497829", "114.400644,30.497849",
// "114.400446,30.497872", "114.400194,30.497915",
// "114.400096,30.497934", "114.400028,30.497771",
// "114.40001,30.497569", "114.400001,30.497456",
// "114.400006,30.49725", "114.399988,30.497106",
// "114.399925,30.496946", "114.399898,30.49688",
// "114.399884,30.496849", "114.399875,30.496818",
// ];
console.log(routeLine[0])
let langlat = routeLine[0].split(',')
var point_local = new BMap.Point(langlat[0],langlat[1]); //屏幕中心点坐标
// 初始化百度地图API功能
// 创建Map实例,并设置地图允许的最小/大级别(可选)
var map = new BMap.Map("allmap");
var localhost_Icon = new BMap.Icon("images/Point_local.png",
new BMap.Size(32, 49), {
anchor: new BMap.Size(16, 48)
});
//设置引用图标的名字以及大小，并设置图片相对于所加的点的位置
map.centerAndZoom(point_local, 16); // 初始化地图,设置中心点坐标(经度，纬度)和地图缩放级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.addOverlay(new BMap.Marker(point_local, {
icon: localhost_Icon
}));
drawRouteLine(routeLine); // 描绘轨迹线路
// 描绘轨迹线路
function drawRouteLine(routeLine) {
if (routeLine.length < 2) return;
var routeLineArray = [];
for (var i = 0; i < routeLine.length; i++) {
var x = routeLine[i].split(",")[0];
var y = routeLine[i].split(",")[1];
routeLineArray[i] = new BMap.Point(x, y);
}
var polyline = new BMap.Polyline(routeLineArray, {
strokeColor: "red",
strokeWeight: 2,
strokeOpacity: 0.5
}); //创建折线
// map.addOverlay(polyline);
var linePoint = polyline.getPath(); //线的坐标串
var length = 2; //管子半径
var LinePointUp = new Array(),
LinePointDown = new Array();
for (var i = 0; i < linePoint.length; i++) {
console.log(linePoint[i + 1])
var pixelStart;
var pixelEnd;
var PixelArr;
if (i == 0) {
pixelStart = map.pointToPixel(linePoint[i + 1]); //坐标转换为可视区域坐标
pixelEnd = map.pointToPixel(linePoint[i]);
} else {
pixelStart = map.pointToPixel(linePoint[i - 1]);
pixelEnd = map.pointToPixel(linePoint[i]);
}
// console.log(pixelStart, pixelEnd, length)
//计算偏差点坐标
PixelArr = getPixel(pixelStart, pixelEnd, length);
var pixelPointa = map.pixelToPoint(new BMap.Pixel(PixelArr[0], PixelArr[1]));
var pixelPointb = map.pixelToPoint(new BMap.Pixel(PixelArr[2], PixelArr[3]));
if (i == 0) {
//第一个点需要交换处理
var pixelPointTem = pixelPointa;
pixelPointa = pixelPointb;
pixelPointb = pixelPointTem;
}
LinePointUp[i] = pixelPointa;
LinePointDown[i] = pixelPointb;
}
var PixelLine1a = new BMap.Polyline(
LinePointUp, {
strokeColor: "green",
strokeWeight: 2,
strokeOpacity: 0.5
});
map.addOverlay(PixelLine1a);
var PixelLine2b = new BMap.Polyline(
LinePointDown, {
strokeColor: "green",
strokeWeight: 2,
strokeOpacity: 0.5
});
map.addOverlay(PixelLine2b);
}
function getPixel(pixelStart, pixelEnd, length) {
var r = length; //管子半径
var delta = 0; //主线斜率，垂直时无斜率
var param = 0; //代码简洁考虑
var pixelXa, pixelYa, pixelXb, pixelYb;
//计算偏差点坐标
if (pixelEnd.x - pixelStart.x == 0) {
//斜率不存在是时
if (pixelEnd.y > pixelStart.y) {
pixelXa = pixelEnd.x - r;
pixelXb = pixelEnd.x + r;
} else {
pixelXa = pixelEnd.x + r;
pixelXb = pixelEnd.x - r;
}
pixelYa = pixelEnd.y;
pixelYb = pixelEnd.y;
} else {
//斜率存在时
delta = (pixelEnd.y - pixelStart.y) / (pixelEnd.x - pixelStart.x); //斜率
param = Math.sqrt(delta * delta + 1);
//已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
if (pixelEnd.x > pixelStart.x) {
//第一、四象限
pixelXa = pixelEnd.x - r * delta / param;
pixelYa = pixelEnd.y + r / param;
pixelXb = pixelEnd.x + r * delta / param;
pixelYb = pixelEnd.y - r / param;
} else {
//第二、三象限
pixelXa = pixelEnd.x + r * delta / param;
pixelYa = pixelEnd.y - r / param;
pixelXb = pixelEnd.x - r * delta / param;
pixelYb = pixelEnd.y + r / param;
}
}
return [pixelXa, pixelYa, pixelXb, pixelYb];
}
</script>
边栏推荐
- MySQL environment configuration
- Resources读取2d纹理 转换为png格式
- P1055 [NOIP2008 普及组] ISBN 号码
- 2022 love analysis · panoramic report of digital manufacturers of state-owned enterprises
- Open the encrypted SQLite method with sqlcipher
- Oracle notes
- TIPC 寻址2
- [AGC] build service 3 - authentication service example
- Special topic of binary tree -- acwing 3384 Binary tree traversal (known preorder traversal, while building a tree, while outputting middle order traversal)
- 【AGC】如何解决事件分析数据本地和AGC面板中显示不一致的问题？
猜你喜欢
Implement custom drawer component in quick application
最详细MySql安装教程
三.芯片启动和时钟系统
flink二開，實現了個 batch lookup join（附源碼）
【深入浅出玩转FPGA学习3-----基本语法】
Uncover the secrets of Huawei application market application statistics
Flick two open, realized a batch lookup join (with source code)
【深入浅出玩转FPGA学习5-----复位设计】
OpenMLDB Meetup No.4 会议纪要
Special topic of binary tree -- acwing 47 Path with a certain value in binary tree (preorder traversal)
随机推荐
华为游戏初始化init失败，返回错误码907135000
【付费推广】常见问题合集，推荐榜单FAQ
二叉树专题--P1030 [NOIP2001 普及组] 求先序排列
The first white paper on agile practice in Chinese enterprises was released | complete download is attached
Is the account above changtou school safe?
Oracle notes
Logu p3398 hamster looks for sugar (double LCA on the tree to judge whether the two paths in the tree intersect)
MySQL keyword
【快应用】text组件里的文字很多，旁边的div样式会被拉伸如何解决
Creation and use of unified links in Huawei applinking
TIPC 寻址2
二叉树专题--AcWing 1589. 构建二叉搜索树
Convert yv12 to rgb565 image conversion, with YUV to RGB test
Primary key policy problem
Special topic of binary tree -- acwing 18 Rebuild the binary tree (construct the binary tree by traversing the front and middle order)
[play with FPGA learning 4 in simple terms ----- talk about state machine design]
One trick to quickly realize custom application titlebar
flink二开，实现了个 batch lookup join（附源码）
[AGC] build service 3 - authentication service example
Nodejs+express+mysql simple blog building