当前位置：网站首页>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>
边栏推荐
- Win11 arm system configuration Net core environment variable
- 最详细MySql安装教程
- Special topic of binary tree -- acwing 3384 Binary tree traversal (known preorder traversal, while building a tree, while outputting middle order traversal)
- 【深入浅出玩转FPGA学习2----设计技巧（基本语法）】
- How does the whole network display IP ownership?
- How to use ide to automatically sign and debug Hongmeng application
- PCL point cloud to depth image
- Special topic of binary tree -- acwing 18 Rebuild the binary tree (construct the binary tree by traversing the front and middle order)
- Hdu1234 door opener and door closer (water question)
- JVM garbage collector
猜你喜欢
![[AI application] Hikvision ivms-4200 software installation](/img/4e/1640e3cafac13ce4d39520195c3217.png)
[AI application] Hikvision ivms-4200 software installation
Nodejs+express+mysql simple blog building
Huawei game failed to initialize init with error code 907135000
![二叉树专题--洛谷 P3884 [JLOI2009]二叉树问题（dfs求二叉树深度 bfs求二叉树宽度 dijkstra求最短路）](/img/c2/bb85b681af0f78b380b1d179c7ea49.png)
二叉树专题--洛谷 P3884 [JLOI2009]二叉树问题（dfs求二叉树深度 bfs求二叉树宽度 dijkstra求最短路）
二叉树专题--AcWing 3384. 二叉树遍历（已知先序遍历 边建树 边输出中序遍历）
MTK full dump抓取
![[AGC] build service 3 - authentication service example](/img/89/63f367270e806e89c4ff92360dc3c5.png)
[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)
The first white paper on agile practice in Chinese enterprises was released | complete download is attached
Thanos Receiver
随机推荐
如何用list组件实现tabbar标题栏
【深入浅出玩转FPGA学习2----设计技巧（基本语法）】
TIPC messaging3
【快应用】Win7系统使用华为IDE无法运行和调试项目
快应用中实现自定义抽屉组件
[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
III Chip startup and clock system
TIPC Getting Started6
【AI应用】海康威视iVMS-4200软件安装
JVM garbage collector
Leetcode 182 Find duplicate email (2022.07.01)
Hdu1236 ranking (structure Sorting)
Complement (Mathematical Simulation
Logu p3398 hamster looks for sugar (double LCA on the tree to judge whether the two paths in the tree intersect)
QT学习日记7——QMainWindow
The first white paper on agile practice in Chinese enterprises was released | complete download is attached
TIPC messaging3
V2X-Sim数据集（上海交大＆纽约大学）
Verilog 和VHDL有符号数和无符号数相关运算
Binary tree topic -- Luogu p3884 [jloi2009] binary tree problem (DFS for binary tree depth BFS for binary tree width Dijkstra for shortest path)