当前位置：网站首页>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>
边栏推荐
- [AI application] Hikvision ivms-4200 software installation
- Win11 arm system configuration Net core environment variable
- flink二開，實現了個 batch lookup join（附源碼）
- [paid promotion] collection of frequently asked questions, recommended list FAQ
- [play with FPGA learning 2 in simple terms ----- design skills (basic grammar)]
- Special topic of binary tree -- acwing 3384 Binary tree traversal (known preorder traversal, while building a tree, while outputting middle order traversal)
- 二叉树专题--AcWing 1497. 树的遍历（利用后、中序遍历，构建二叉树）
- K-d tree and octree of PCL
- 每月1号开始计算当月工作日
- 【AGC】如何解决事件分析数据本地和AGC面板中显示不一致的问题？
猜你喜欢
华为AppLinking中统一链接的创建和使用
ImportError: cannot import name ‘Digraph‘ from ‘graphviz‘
Creation and use of unified links in Huawei applinking
二.Stm32f407芯片GPIO编程，寄存器操作，库函数操作和位段操作
【AppLinking实战案例】通过AppLinking分享应用内图片
二叉树专题--AcWing 3540. 二叉搜索树建树（实用板子 构建二叉搜索树 并输出前、中、后序遍历）
What are the software product management systems? Inventory of 12 best product management tools
TIPC Service and Topology Tracking4
PKG package manager usage instance in FreeBSD
TIPC addressing 2
随机推荐
Jenkins安装
Iii. Système de démarrage et d'horloge à puce
力扣（LeetCode）182. 查找重复的电子邮箱（2022.07.01）
Hdu1236 ranking (structure Sorting)
flink二開，實現了個 batch lookup join（附源碼）
Use of vscode tool
Approximate sum count (approximate
TIPC Service and Topology Tracking4
STM32单片机编程学习
tqdm的多行显示与单行显示
二叉树专题--P1030 [NOIP2001 普及组] 求先序排列
Luogu p4281 [ahoi2008] emergency gathering / gathering (tree doubling LCA)
Special topic of binary tree -- acwing 18 Rebuild the binary tree (construct the binary tree by traversing the front and middle order)
PCL extracts a subset from a point cloud
TIPC Getting Started6
2022爱分析· 国央企数字化厂商全景报告
One trick to quickly realize custom application titlebar
【深入浅出玩转FPGA学习4----漫谈状态机设计】
III Chip startup and clock system
[play with FPGA learning 5 in simple terms ----- reset design]