百度地图的一些操作

(function () {

// 自定义覆盖物
var ComplexCustomOverlay = function (params, mapFn) {
this._point = params.point;
this.params = params;
this._data = params.params.data;
this._map = mapFn.map;
this._mapFn = mapFn;
};
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function () {
var drawObj = new drawAngle(this._data).draw();
var lat = this.params.params.point.lat, lng = this.params.params.point.lng;
this._mapFn.echarts[lat + "_" + lng] = drawObj.chart;
var div = this._div = drawObj.div;
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(lat);
this._map.getPanes().labelPane.appendChild(div);
return div;
};
ComplexCustomOverlay.prototype.draw = function () {
var pixel = this._map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x + "px";
this._div.style.top = pixel.y + "px";
};


// 地图使用
var map = function (id) {
this.id = id || 'bdMap';
};

map.prototype = {
//初始化
init: function () {
// 创建地图实例
this.map = new BMap.Map(this.id);
// 创建初始化坐标点
var point = new BMap.Point(116.404, 39.915);
// 初始化地图,设置中心点坐标和地图级别
this.map.centerAndZoom(point, 5);
// 获取百度地图经纬度转换对象
this.convertor = new BMap.Convertor();
//添加地图缩放
var opts = { anchor: BMAP_ANCHOR_TOP_LEFT };
this.map.addControl(new BMap.NavigationControl(opts));
//添加滚轮缩放
this.map.enableScrollWheelZoom();
//地图测距工具
this.disTool = new BMapLib.DistanceTool(this.map);
//地图点击事件
this.map.addEventListener("click", this.onClick);
//测距打点事件
this.disTool.addEventListener("addpoint", this.addpoint.bind(this));
//删除测距线事件
this.disTool.addEventListener("removepolyline", this.removepolyline.bind(this));
//测距点存储
this.disPoints = [];
//路线点存储
this.drivingPoints = {};
// 存储已生成的坐标点
this.echarts = {};
},
//初始化工具栏
initTool: function () {
var toolContent = document.createElement('div');
toolContent.style.position = 'absolute';
toolContent.style.display = 'inline-block';
toolContent.style.top = '0px';
toolContent.style.left = '70px';
toolContent.style['z-index'] = 9999;
document.getElementById(this.id).appendChild(toolContent);
var tools = [{
'text': '标记地点',
'icon': 'glyphicon glyphicon-map-marker',
'action': 'openDistanceTool'
}, {
'text': '规划路线',
'icon': 'glyphicon glyphicon-road',
'action': 'planRoute'
}, {
'text': '清空',
'icon': 'glyphicon glyphicon-refresh',
'action': 'clearOverlays'
}];
for (var i = 0; i < tools.length; i++) {
var toolEl = document.createElement('a');
toolEl.className = 'btn btn-circle btn-icon-only btn-default';
toolEl.style = 'color: #4170cd';
toolEl.href = 'javascript:void(0);';
toolEl.title = tools[i].text;
var icon = document.createElement('i');
icon.className = tools[i].icon;
toolEl.appendChild(icon);
toolContent.appendChild(toolEl);
var actionName = tools[i].action;
if (actionName && this[actionName]) {
toolEl.addEventListener('click', this[actionName].bind(this));
}
}
},
initCluster: function () {
// 聚合数组
this.marksArray = [];
this.markerClusterer = new BMapLib.MarkerClusterer(this.map, { markers: this.marksArray });
},
//经纬度转换
convertorAddress: function (point, callback) {
this.convertor.translate(point, 1, 5, callback)
},
drawAngleMore: function (data) {
debugger;
var points = [], customerMarks = [];
for (var i = 0; i < data.length; i++) {
var params = data[i];
var point = new BMap.Point(params.point.lng, params.point.lat);
var myCompOverlay = new ComplexCustomOverlay({ point: point, params: params }, this);
myCompOverlay.getPosition = function () {
return this._point;
}
myCompOverlay.getMap = function () {
return this._map;
}
points.push(point);
customerMarks.push(myCompOverlay);
}
this.markerClusterer.addMarkers(customerMarks);

},
//描点
drawAngle: function (params) {
var point = new BMap.Point(params.point.lng, params.point.lat);
this.convertorAddress([point], function (data) {
if (data.status === 0) {
var point = data.points[0];
//this.map.centerAndZoom(point, 18);
var myCompOverlay = new ComplexCustomOverlay({ point: point, params: params }, this);
//this.map.addOverlay(myCompOverlay);
var marker = new BMap.Marker(data.points[0]);
this.map.myCompOverlay = myCompOverlay;
this.markerClusterer.addMarker(marker, myCompOverlay);
}
}.bind(this));
},
//drawPoints: function (data, color, option) {
// var points = [];
// for (var i = 0; i < data.length; i++) {
// var p = new BMap.Point(data[i].lng, data[i].lat);
// points.push(p);
// }
// var colorStr = color || '#' + Math.floor(Math.random() * 0xffffff).toString(16);
// var options = option || {
// size: BMAP_POINT_SIZE_SMALL,
// shape: BMAP_POINT_SHAPE_CIRCLE,
// color: colorStr
// }
// var pointCollection = new BMap.PointCollection(points, options);
// this.map.addOverlay(pointCollection);
// return colorStr;
//},

//画点
drawPoints: function (params) {
var points = [];
for (var i = 0; i < params.data.length; i++) {
var p = new BMap.Point(params.data[i].lng, params.data[i].lat);
points.push(p);
}
var colorStr = params.color || '#' + Math.floor(Math.random() * 0xffffff).toString(16);//颜色
var options = params.option || {//设置属性
size: BMAP_POINT_SIZE_SMALL,//大小
shape: BMAP_POINT_SHAPE_CIRCLE,//形状
color: colorStr//颜色
}
if (!params.isConvertor) {//坐标转换(批量坐标转换一次性只能转10个)
var that = this;
for (var i = 1; i <= points.length; i++) {
if (i % 10 == 0) {
var pData = points.slice(i - 10, i);
that.convertorAddress(pData, function (data) {
if (data.status === 0) {
var pointCollection = new BMap.PointCollection(data.points, options);
that.map.addOverlay(pointCollection);
}
})
}
}
//余下部分
var pData = points.slice(parseInt(points.length / 10) * 10, points.length);
that.convertorAddress(pData, function (data) {
if (data.status === 0) {
var pointCollection = new BMap.PointCollection(data.points, options);
that.map.addOverlay(pointCollection);
}
})

} else {
var pointCollection = new BMap.PointCollection(points, options);
this.map.addOverlay(pointCollection);
}
return colorStr;
},
//设置路线
drawLine: function (params) {
var start = params.start, end = params.end;
var pointArr = [start, end];
//判断是否为转换过坐标
if (params.isConvertor) {
var pointArray = [];
for (var i = 0; i < params.data.length; i++) {
pointArray.push(new BMap.Point(params.data[i].lng, params.data[i].lat));
}
var length = pointArray.length;
var start = pointArray[0];
var end = pointArray[length - 1];
pointArray.splice(length - 1, 1);
pointArray.splice(0, 1);
var wayPoints = pointArray;
var driving = new BMap.DrivingRoute(this.map, {
renderOptions: { map: this.map, autoViewport: true },
onSearchComplete: function (results) {
if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
this.onSearchComplete(results);
}
}.bind(this)
});
driving.search(start, end, { waypoints: wayPoints });
} else {
this.convertorAddress(params.data, function (data) {
var length = data.points.length;
var start = data.points[0];
var end = data.points[length - 1];
data.points.splice(length - 1, 1);
data.points.splice(0, 1);
var wayPoints = data.points;
var driving = new BMap.DrivingRoute(this.map, { renderOptions: { map: this.map, autoViewport: true } });
driving.search(start, end, { waypoints: wayPoints });
}.bind(this));
}
},
//行车路线规划搜索结果
onSearchComplete: function (results) {
var plan = results.getPlan(0);
var start = results.getStart();
var end = results.getEnd();
var wayPoints = [];
$.each(plan.dk, function () {
wayPoints.concat(this.Ar);
})
this.drivingPoints = {
start: start,
end: end,
wayPoints: wayPoints
};
try {
$('.BMap_Marker.BMap_noprint[title="清除本次测距"]').trigger("click");
} catch (e) { }
},
addpoint: function (event) {
this.disPoints.push(event.point);
},
removepolyline: function (event) {
this.disPoints = [];
},
//清空覆盖物
clearOverlays: function () {
this.map.clearOverlays();
},

//地图点击事件
onClick: function (event) {
//e.point
},
//根据经纬度来获取对应的坐标点图表point : { lat : 11.22 , lng : 23.23}
getPoint: function (point) {
var lat = point.lat, lng = point.lng;
var id = lat + "_" + lng;
return this.echarts[id];
},
//根据经纬度来改变坐标点图表数据 point : { lat : 11.22 , lng : 23.23}
setPointData: function (point, data) {
var chart = this.getPoint(point);
var option = chart.getOption();
option.series[0].data = data;
chart.setOption(option);
},
// 设置地图中心点
setCenterPoint: function (params) {
var point = new BMap.Point(params.point.lng, params.point.lat);
this.convertorAddress([point], function (data) {
var centerPoint = data.points[0];
this.map.centerAndZoom(centerPoint, params.level || 18);
}.bind(this));
},
// 打开测量工具
openDistanceTool: function () {
this.disPoints = [];
if (this.disTool)
this.disTool.open();
},
// 规划路线
planRoute: function () {
var points = new Array();
points = this.disPoints.concat();
if (this.disPoints.length > 0) {
var params = {
isConvertor: true,
data: points
}
this.drawLine(params);
}
}
};

// 生成坐标点图形
var drawAngle = function (params) {
//方法初始化
this.init();
this.HBWD = params.HBWD;
this.data = params.data;
};
drawAngle.prototype = {
//初始化
init: function () {
this.div = document.createElement('div');
this.div.style.height = "75px";
this.div.style.width = "75px";
},
draw: function () {
var option = {};
//坐标点鼠标放上去提示信息配置
option.tooltip = {
trigger: 'item',
formatter: function (params) {
var pData = params.data.pointData;
var tips = "";
for (var key in pData) {
tips += key + ": " + pData[key] + "<br/>"
}
return tips;
}
};
//坐标方位及数据配置 65 为扇形度数 360 为画一个圆
option.series = {
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
labelLine: {
show: false
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
};
//获取坐标点数据
option.series.data = convertorData(this.HBWD == 65 ? false : true, this.data);
//绘制坐标展示图
var chart = echarts.init(this.div);
chart.setOption(option);
return {
div: this.div,
chart: chart
};
}
};

// 图形数据转换 isCircle 判断是否画圆
var convertorData = function (isCircle, data) {
var returnData = [];
if (isCircle) {
var dataObj = {
value: 360,
pointData: data[0]
};
returnData.push(dataObj);
} else {
var total = 0;
for (var i = 0; i < data.length; i++) {
var degrees = data[i]["degrees"];
var nextDegrees = degrees - 32.5 - total;
total = nextDegrees + 65 + total;
var dataObj = {
value: nextDegrees,
itemStyle: { color: 'rgba(0, 0, 0, 0)' }
};
returnData.push(dataObj);
var dataObj2 = {
value: 65,
pointData: data[i]
};
returnData.push(dataObj2);
if (i == data.length - 1) {
var dataObj3 = {
value: 360 - (degrees + 32.5),
itemStyle: { color: 'rgba(0, 0, 0, 0)' }
};
returnData.push(dataObj3);
}
}
}
return returnData;
};
//暴露map对象
window.map = map;
})();

猜你喜欢

转载自www.cnblogs.com/WarrenLee/p/9181893.html