当前位置：网站首页>Gaode draws lines according to the track
Gaode draws lines according to the track
2022-07-02 11:12:00 【Congzi】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title> Draw line </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: " Microsoft YaHei ";
}
#allmap {
height: 100%;
width: 100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= own ak">
</script>
<!-- ak It means Baidu map key value -->
</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]); // Screen center coordinates
// Initialize Baidu map API function
// establish Map example , And set the minimum allowed by the map / Big class ( Optional )
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)
});
// Set the name and size of the reference icon , And set the position of the picture relative to the added point
map.centerAndZoom(point_local, 16); // Initialize map , Set the coordinates of the center point ( longitude , latitude ) And map zoom level
map.enableScrollWheelZoom(true); // Turn on mouse wheel zoom
map.addOverlay(new BMap.Marker(point_local, {
icon: localhost_Icon
}));
drawRouteLine(routeLine); // Trace the route
// Trace the route
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
}); // Create polylines
// map.addOverlay(polyline);
var linePoint = polyline.getPath(); // The coordinate string of lines
var length = 2; // Pipe radius
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]); // The coordinates are converted to the coordinates of the visible area
pixelEnd = map.pointToPixel(linePoint[i]);
} else {
pixelStart = map.pointToPixel(linePoint[i - 1]);
pixelEnd = map.pointToPixel(linePoint[i]);
}
// console.log(pixelStart, pixelEnd, length)
// Calculate the coordinates of the deviation point
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) {
// The first point needs to be exchanged
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; // Pipe radius
var delta = 0; // The slope of the main line , There's no slope when it's vertical
var param = 0; // Consider the simplicity of the code
var pixelXa, pixelYa, pixelXb, pixelYb;
// Calculate the coordinates of the deviation point
if (pixelEnd.x - pixelStart.x == 0) {
// When the slope doesn't exist
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 {
// When the slope exists
delta = (pixelEnd.y - pixelStart.y) / (pixelEnd.x - pixelStart.x); // Slope
param = Math.sqrt(delta * delta + 1);
// The coordinates of two points and one of the angles of a right triangle are known , Another point coordinate algorithm
if (pixelEnd.x > pixelStart.x) {
// First of all 、 Four quadrant
pixelXa = pixelEnd.x - r * delta / param;
pixelYa = pixelEnd.y + r / param;
pixelXb = pixelEnd.x + r * delta / param;
pixelYb = pixelEnd.y - r / param;
} else {
// second 、 Three quadrants
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>
边栏推荐
- 二叉树专题--AcWing 1589. 构建二叉搜索树
- QT learning diary 7 - qmainwindow
- 如何用list组件实现tabbar标题栏
- Binary tree topic -- p1030 [noip2001 popularization group] find the first order
- Leetcode 182 Find duplicate email (2022.07.01)
- Luogu p5536 [xr-3] core city (greed + tree DP looking for the center of the tree)
- [ark UI] implementation of the startup page of harmonios ETS
- 三.芯片启动和时钟系统
- 【深入浅出玩转FPGA学习4----漫谈状态机设计】
- K-d tree and octree of PCL
猜你喜欢
【快应用】text组件里的文字很多，旁边的div样式会被拉伸如何解决
flink二開，實現了個 batch lookup join（附源碼）
How does the whole network display IP ownership?
PKG package manager usage instance in FreeBSD
[quick application] there are many words in the text component. How to solve the problem that the div style next to it will be stretched
How to use ide to automatically sign and debug Hongmeng application
Nodejs+express+mysql simple blog building
Why does LabVIEW lose precision in floating point numbers
TIPC messaging3
Huawei game failed to initialize init with error code 907135000
随机推荐
使用华为性能管理服务，按需配置采样率
二叉树专题--AcWing 3384. 二叉树遍历（已知先序遍历 边建树 边输出中序遍历）
QT learning diary 7 - qmainwindow
TIPC Service and Topology Tracking4
How to transfer event objects and user-defined parameters simultaneously in Huawei express applications
华为游戏初始化init失败，返回错误码907135000
[play with FPGA learning 2 in simple terms ----- design skills (basic grammar)]
如何使用IDE自动签名调试鸿蒙应用
Use Huawei performance management service to configure the sampling rate on demand
Hdu1234 door opener and door closer (water question)
Use of vscode tool
Special topic of binary tree -- acwing 1497 Traversal of the tree (use post and mid order traversal to build a binary tree)
Mongodb learning and sorting (condition operator, $type operator, limit() method, skip() method and sort() method)
One trick to quickly realize custom application titlebar
洛谷 P4281 [AHOI2008]紧急集合 / 聚会（树上倍增 LCA）
Special topic of binary tree -- Logu p1229 traversal problem (the number of traversals in the middle order is calculated when the pre and post order traversals of the multiplication principle are know
华为快应用中如何实现同时传递事件对象和自定义参数
[quick application] win7 system cannot run and debug projects using Huawei ide
sqlite 修改列类型
Xiao Sha's pain (double pointer