仿高德地图 JS SDK 仓库地址
image.png
程序目录
.
├── README.md #说明文档
├── dist
│├── bscroll.js #better-scroll库
├── gy-subway-data.json #地铁线路图数据
├── gy-subway-demo.html #启动页
├── sdk
│└── gy-subway-sdk.js #核心逻辑
接入方式
<script src="sdk/gy-subway-sdk.js"></script>
<script type="text/javascript">
var map = new GYSubwayMap("wrapper", "tipView", { adcode: "1100", focusMiddleSite: true });
map.onEvent("siteSelected", function (siteObj) {//站点选中
selectedSiteObj = siteObj;
});
map.onEvent("loaded", function (dataList) {
// console.log("获取到所有线路数据dataList:" + dataList.length);
for (var i = dataList.length - 1; i >= 0; i--) {
var metroName = dataList[i].metroName;
var metroBranch = dataList[i].metroBranch;
console.log("获取到线路名 : " + metroName + (metroBranch ? " 分支 :" + metroBranch : ""));
}
});
map.onEvent("routerStart", function (startSite, endSite) {//站点选中
console.log("开始寻路:" + startSite.n + " -> " + endSite.n);
//显示加载中
});
map.onEvent("routerSuccess", function (startSite, endSite) {//站点选中
console.log("寻路成功:" + startSite.n + " -> " + endSite.n);
//隐藏加载中
});
map.onEvent("routerFail", function () {//站点选中
alert("寻路失败");
//隐藏加载中
});
</script>
数据解析
通过高德地铁API接口，获取对应城市的地铁线路数据，结构如下:
{
"o": "1070,531",//地图尺寸
"l": [{//地图线路
"lo": "0",//是否环线
"li": "900000065767|900000065856",//表示归属于哪条线，整个线包含多段线路，线路id用|分离
"ls": "900000065767",//线路id
"c": ["0 205", "55 205"],//绘制连线的点
"cl": "008FA5",//线路颜色
"lp": ["796 131"],//地铁名坐标
"st": [{//站点列表
"sl": "120.007201,30.285632",//站点经纬度
"sid": "900000065767004",//站点id
"n": "良睦路",//站点名
"poiid": "BV10780758",//路径搜索时候使用标志
"t": "0",//是否换乘站
"lg": "0",//方向
"p": "0 205",//站点坐标
"rs": "0 205"//站点坐标范围，部分站坐标存在多个
}],
}],
}
获取到地铁线路数据后，对原始数据进行解析，将页面分成多个层分别进行绘制，分为tips层、交互层、站点层、绘制线路层、背景层等。
实现流程
- 数据加载完成后初始化所有的层容器，确定叠放次序
- 获取地图站点位置数据，添加每个站点的交互热区
- 绘制站点线路、连接点、换乘站、站点文本、线路信息
- 点击交互区域，设置起点、终点站点
- 搜索路径点信息，绘制路径规划结果视图
添加每个站点的交互热区、站点文本
//添加交互区域提供点击功能
_initTouchContainer: function (dataArray, touchContainer, canTouch) {
touchContainer.innerHTML = "";//先清空掉
var radius = 3 * ml;
var touchWidth = 32 * ml;
for (var i = dataArray.length - 1; i >= 0; i--) {
var dataObj = dataArray[i];
// var pointArray = dataObj.c;//绘制连线的点
var siteArray = dataObj.st;//站点信息
var metroPointArr = dataObj.lp;
var metroColor = "#" + dataObj.cl;
var metroName = dataObj.ln;
if (metroPointArr && metroName) {
for (var j = metroPointArr.length - 1; j >= 0; j--) {
var metroPointObj = metroPointArr[j];
var metroPointObjArr = metroPointObj.split(" ");
var metroPointX = parseInt(metroPointObjArr[0]) * ml + leftpadding;
var metroPointY = parseInt(metroPointObjArr[1]) * ml + toppadding;
var label = document.createElement('text'); //1、创建元素
label.innerHTML = metroName;
label.style.fontFamily = "黑体";
label.style.fontSize = (12 * ml) + "px";
label.style.position = "absolute";
label.style.webkitUserSelect = "none";
label.style.color = "#FFFFFF";
label.style.paddingLeft = label.style.paddingRight = 5 * ml + "px";
label.style.backgroundColor = metroColor;
label.style.textAlign = "center";
label.style.borderRadius = radius + "px";
touchContainer.appendChild(label);//插入到最左边
var textWidth = label.offsetWidth;//text.getBoundingClientRect().width;
var textHeight = label.offsetHeight;//text.getBoundingClientRect().height;
label.style.left = metroPointX + "px";
label.style.top = (metroPointY - textHeight / 2. - 5 * ml) + "px";
}
}
for (var j = siteArray.length - 1; j >= 0; j--) {
var siteObj = siteArray[j];
var pointObj = siteObj.p;
var pointObjArr = pointObj.split(" ");
var pointX = parseInt(pointObjArr[0]) * ml + leftpadding;
var pointY = parseInt(pointObjArr[1]) * ml + toppadding;
var siteName = siteObj.n;
var span = document.createElement('span'); //1、创建元素
span.style.position = "absolute";
span.style.width = touchWidth + "px";
span.style.height = touchWidth + "px";
span.style.left = (pointX - touchWidth / 2.) + "px";
span.style.top = (pointY - touchWidth / 2.) + "px";
// span.style.backgroundColor = "yellow";
span.siteObj = siteObj;
touchContainer.appendChild(span);//插入到最左边
if (siteObj.t == "1") {//换乘站
var image = document.createElement('img'); //1、创建元素
showTransferImage(image);
image.style.width = image.style.height = (20 * ml) + "px";
image.style.position = "absolute";
image.style.margin = "auto";
image.style.top = image.style.left = image.style.bottom = image.style.right = "0px";
span.appendChild(image);
}
var text = document.createElement('text'); //1、创建元素
text.innerHTML = siteName;
text.style.fontFamily = "黑体";
text.style.fontSize = (12 * ml) + "px";
text.style.position = "absolute";
text.style.webkitUserSelect = "none";
// text.style.backgroundColor = "yellow";
text.siteObj = siteObj;
touchContainer.appendChild(text);//插入到最左边
var textWidth = text.offsetWidth;//text.getBoundingClientRect().width;
var textHeight = text.offsetHeight;//text.getBoundingClientRect().height;
var tp = getTextPoint(pointX, pointY, textWidth, textHeight, siteObj.lg);
text.style.left = tp.x + "px";
text.style.top = tp.y + "px";
if (canTouch) {
if (isPC()) {
span.addEventListener('click', this._elementTouchHandler.bind(this), false);
text.addEventListener('click', this._elementTouchHandler.bind(this), false);
} else {
span.addTapEvent(this._elementTouchHandler.bind(this), true);
text.addTapEvent(this._elementTouchHandler.bind(this), true);
}
}
}
}
},
视图层线路、连接点、换乘站
_refillMap: function (dataArray, svgContainer) {
svgContainer.innerHTML = "";//清理掉原有数据
for (var i = dataArray.length - 1; i >= 0; i--) {
var dataObj = dataArray[i];
var pointArray = dataObj.c;//绘制连线的点
var siteArray = dataObj.st;//站点信息
var metroColor = "#" + dataObj.cl;
for (var j = pointArray.length - 2; j >= 0; j--) {
var prePointObj = pointArray[j + 1];
var nowPointObj = pointArray[j];
var prePointObjArr = prePointObj.split(" ");
var nowPointObjArr = nowPointObj.split(" ");
var prePointX = parseInt(prePointObjArr[0]) * ml + leftpadding;
var prePointY = parseInt(prePointObjArr[1]) * ml + toppadding;
var nowPointX = parseInt(nowPointObjArr[0]) * ml + leftpadding;
var nowPointY = parseInt(nowPointObjArr[1]) * ml + toppadding;
svgContainer.innerHTML += "<line x1=" + prePointX + " y1=" + prePointY + " x2=" + nowPointX + " y2=" + nowPointY + " stroke-linecap='round' style='stroke:" + metroColor + ";stroke-width:" + metroLineWidth + "'/>"
}
for (var j = siteArray.length - 1; j >= 0; j--) {
var siteObj = siteArray[j];
var pointObj = siteObj.p;
var pointObjArr = pointObj.split(" ");
var pointX = parseInt(pointObjArr[0]) * ml + leftpadding;
var pointY = parseInt(pointObjArr[1]) * ml + toppadding;
if (siteObj.t != "1") {//换乘站
svgContainer.innerHTML += "<circle cx=" + pointX + " cy=" + pointY + " r=" + (7 * ml) + " fill='#FFFFFF' stroke=" + metroColor + " stroke-width=" + nodeLineWidth + " />"
}
}
}
},
