前言
JavaScript API GL是百度地图开放平台提供给开发者在自己的网站中构建功能丰富、交互性强的地图应用。简单的实现官网有详细的案例，官网：https://lbsyun.baidu.com/index.php?title=jspopularGL
本文记录一下如何动态生成多条大地路线，并模拟火车不同时间段所走路线，效果图如下：
话不多说，上代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="86400">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {
width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的AK"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>大地线路书</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMapGL.Map("allmap");
var point = new BMapGL.Point(67.770934,42.467634);
// 设置地图中心点及缩放比例
map.centerAndZoom(point, 5);
map.enableScrollWheelZoom();
// 获取线路id、条数
var ids = [];
$.ajax({
async: false,
url: "/business/city/getLineIds",
type: "GET",
contentType: "application/json",
dataType: "json",
data: {
},
success: function (res) {
if(res.code == 200){
ids = res.data;
}
}
})
// 获取最近在运行的id
var standBookIds = [];
$.ajax({
async: false,
url: "/business/simulation/getAllStandingBookIds",
type: "GET",
contentType: "application/json",
dataType: "json",
data: {
},
success: function (res) {
if(res.code == 200){
standBookIds = res.data;
}
}
})
// 定义计数器
var count = 0
// 定义路书
var lushus = {
};
if(standBookIds.length > 0){
for (let i=0;i<standBookIds.length;i++){
var lushuname = "lushu_"+standBookIds[i];
lushus[lushuname] = {
};
}
}
function startLushu() {
var fly = '火车图片';
Object.keys(sonpolylines).forEach((key) => {
Object.keys(lushus).forEach((key_in) => {
if(key.substring(12) == key_in.substring(6)){
// 获取信息窗口数据
$.ajax({
async: false,
url: "/business/book/getIconById",
type: "GET",
contentType: "application/json",
dataType: "json",
data: {
id: key.substring(12)},
success: function (res) {
if(res.code == 200){
var start = res.data.startPoint;
if(start == null || start == '' || start == undefined){
start = res.data.startPointCountry
}
var arrive = res.data.arriveAt;
if(arrive == null || arrive == '' || arrive == undefined){
arrive = res.data.arriveAtCountry;
}
var goods = res.data.goodsCategory;
var teu = res.data.teuNum;
var imgUrl;
switch (goods) {
case '板材':
imgUrl = '板材.png';
break;
case '日用百货':
imgUrl = '日用百货.png';
break;
case '零件及百货':
imgUrl = '零件及百货.png';
break;
case '木材':
imgUrl = '木材.png';
break;
case '钢结构':
imgUrl = '钢结构.png';
break;
case '车轮':
imgUrl = '车轮.png';
break;
case '汽车配件':
imgUrl = '汽车配件.png';
break;
case '牛卡纸':
imgUrl = '牛卡纸.png';
break;
case '自行车':
imgUrl = '自行车.png';
break;
case '金精粉':
imgUrl = '金精粉.png';
break;
case '瓷器及百货':
imgUrl = '瓷器及百货.png';
break;
case '原木':
imgUrl = '原木.png';
break;
case '大麦':
imgUrl = '大麦.png';
break;
}
var Icon = new BMapGL.Icon(fly, new BMapGL.Size(99, 99), {
anchor: new BMapGL.Size(20, 40) });
console.log(sonpolylines[key])
lushus[key_in]=new BMapGLLib.LuShu(map, sonpolylines[key].getPath(),{
geodesic: true,
autoCenter: false,
defaultContent: `<div style="display: flex;margin-top: 6px;">
<div>
<img src="`+imgUrl+`" style="height: 60px;width: 60px;"/>
</div>
<div style="margin-left: 6px;">
<div style="display: flex;">
<span style="font-size: smaller;font-weight: bold;">`+goods+`-</span>
<span style="font-size: smaller;font-weight: bold;">`+teu+`TEU</span>
</div>
<div style="display: flex;margin-top: 3px;">
<span style="font-size: small;font-weight: bold;">起点：</span>
<span style="font-size: smaller;">`+start+`</span>
</div>
<div style="display: flex;margin-top: 3px;">
<span style="font-size: small;font-weight: bold;">到站：</span>
<span style="font-size: smaller;">`+arrive+`</span>
</div>
</div>
</div>`,
icon: Icon,
speed: 10000,
enableRotation: true
});
lushus[key_in].start();
}
}
})
}
count++;
})
})
}
// 定义线路
var paths = {
};
if(ids.length > 0){
for (let i=0;i<ids.length;i++){
var pathname = "path_"+ids[i];
paths[pathname] = [];
}
}
// 标记点
var marks = [{
longitude: '',
latitude: '',
color: '',
station_name: ''
}];
$.ajax({
async: false,
url: "/business/city/getCityMsgByLineIds",
type: "POST",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(ids),
success: function (res) {
console.log(res);
if(res.code == 200){
if(res.data.length > 0){
marks = [];
for(let i = 0; i < ids.length; i++){
for(let j = 0; j < res.data.length; j++){
if(ids[i] == res.data[j].lineId){
Object.keys(paths).forEach((key) => {
if(key.substring(5) == ids[i]){
paths[key].push(new BMapGL.Point(res.data[j].longitude,res.data[j].latitude))
}
})
}
if(res.data[j].isMaker == "1"){
marks.push({
longitude: res.data[j].longitude,
latitude: res.data[j].latitude,
color: res.data[j].markerColor,
station_name: res.data[j].stationName,
})
}
}
}
}
}
}
})
if(marks.length > 0){
for (let i = 0; i < marks.length; i++){
// 创建位置点
var point = new BMapGL.Point(marks[i].longitude, marks[i].latitude);
var size = 15;
if(marks[i].color != '#000000'){
size = 20;
}
// 创建带高度的点
var marker3d = new BMapGL.Marker3D(point, 8000, {
size: size,
shape: 1,
fillColor: marks[i].color,
fillOpacity: 0.8
});
// 创建文本标注
var content = marks[i].station_name;
var label = new BMapGL.Label(content, {
// 创建文本标注
position: point,
offset: new BMapGL.Size(10, 0)
})
label.setStyle({
// 设置label的样式
color: '#FFF',
backgroundColor: '#4a90e2',
fontSize: '0.3px',
border: '1px solid #1E90FF'
})
// 将点添加到地图上
map.addOverlay(marker3d);
// 将标注添加到地图中
map.addOverlay(label);
}
}
// 定义线条
var polylines = {
};
if(ids.length > 0){
for (let i=0;i<ids.length;i++){
var polylinename = "polyline_"+ids[i];
polylines[polylinename] = {
};
}
}
// 定义线条
var copypolylines = {
};
if(ids.length > 0){
for (let i=0;i<ids.length;i++){
var polylinename = "polyline_"+ids[i];
copypolylines[polylinename] = {
};
}
}
// 获取线条颜色
var lineColor = '';
Object.keys(paths).forEach((key) => {
Object.keys(polylines).forEach((key_in) => {
if(key.substring(5) == key_in.substring(9)){
// 查询线路颜色
$.ajax({
async: false,
url: "/business/config/getLineById",
type: "GET",
contentType: "application/json",
dataType: "json",
data: {
id: key.substring(5)},
success: function (res) {
if(res.code == 200){
lineColor = res.data[0].lineColor
}
}
})
polylines[key_in]=new BMapGL.Polyline(paths[key], {
clip: false,
geodesic: true,
strokeColor: lineColor,
strokeWeight: 6,
strokeOpacity: 1,
strokeStyle: "solid"
});
}
})
})
// 实现轨道样式
var copylineColor = '#FFFFFF';
Object.keys(paths).forEach((key) => {
Object.keys(copypolylines).forEach((key_in) => {
if(key.substring(5) == key_in.substring(9)){
copypolylines[key_in]=new BMapGL.Polyline(paths[key], {
clip: false,
geodesic: true,
strokeColor: copylineColor,
strokeWeight: 6,
strokeOpacity: 0.6,
strokeStyle: "dashed"
});
}
})
})
Object.keys(polylines).forEach((key) => {
map.addOverlay(polylines[key]);
})
Object.keys(copypolylines).forEach((key) => {
map.addOverlay(copypolylines[key]);
})
// 获取子线路相关数据进行火车模拟
// 根据台账id获取所有点
// 定义线路
var sonpaths = {
};
if(standBookIds.length > 0){
for (let i=0;i<standBookIds.length;i++){
var pathname = "sonpath_"+standBookIds[i];
sonpaths[pathname] = [];
}
}
// 标记点
var marks = [{
longitude: '',
latitude: '',
color: '',
station_name: ''
}];
$.ajax({
async: false,
url: "/business/simulation/getAllSonMarks",
type: "POST",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(standBookIds),
success: function (res) {
if(res.code == 200){
if(res.data.length > 0){
marks = [];
for(let i = 0; i < standBookIds.length; i++){
for(let j = 0; j < res.data.length; j++){
if(standBookIds[i] == res.data[j].standingBookId){
Object.keys(sonpaths).forEach((key) => {
if(key.substring(8) == standBookIds[i]){
sonpaths[key].push(new BMapGL.Point(res.data[j].longitude,res.data[j].latitude))
}
})
}
}
}
}
}
}
})
// 定义子线路线条
var sonpolylines = {
};
if(standBookIds.length > 0){
for (let i=0;i<standBookIds.length;i++){
var sonpolylinename = "sonpolyline_"+standBookIds[i];
sonpolylines[sonpolylinename] = {
};
}
}
Object.keys(sonpaths).forEach((key) => {
Object.keys(sonpolylines).forEach((key_in) => {
if(key.substring(8) == key_in.substring(12)){
sonpolylines[key_in]=new BMapGL.Polyline(sonpaths[key], {
clip: false,
geodesic: true,
strokeWeight: 6,
strokeColor: '#000000',
});
}
})
})
Object.keys(sonpolylines).forEach((key) => {
map.addOverlay(sonpolylines[key]);
})
// 应用自定义地图样式
map.setMapStyleV2({
styleId: '你的styleId'
});
startLushu();
</script>