';
}
div.innerHTML = html;
this._map.getPanes().markerPane.appendChild(div);
this._bind();
return div;
};
Screenshot.prototype._bind = function () {
this.setNumber(this.number);
if (this.type == 'circle') {
this.bindCircleEvent();
} else {
this.bindRectEvent();
}
};
Screenshot.prototype.bindCircleEvent = function () {
var that = this;
var circleSpn = document.getElementById('screenshotNum');
var circleInput = document.getElementById('circleInput');
circleSpn.addEventListener('click', function (e) {
var val = circleSpn.innerText;
circleSpn.style.display = 'none';
circleInput.value = val;
circleInput.style.display = 'inline-block';
circleInput.focus();
});
circleInput.addEventListener('click', function (e) {
circleInput.focus();
});
circleInput.addEventListener('keydown', function (e) {
if (e.keyCode === 13) {
var val = circleInput.value;
circleInput.style.display = 'none';
circleSpn.style.display = 'inline-block';
circleSpn.innerText = val;
var opt = {
radius: val,
overlay: that.overlay
};
that._dispatchRadiusChange(opt);
}
});
circleInput.addEventListener('blur', function (e) {
var val = circleInput.value;
circleInput.style.display = 'none';
circleSpn.style.display = 'inline-block';
circleSpn.innerText = val;
var opt = {
radius: val,
overlay: that.overlay
};
that._dispatchRadiusChange(opt);
});
};
Screenshot.prototype.bindRectEvent = function () {
var that = this;
var rectWidthSpn = document.getElementById('rectWidth');
var rectWidthInput = document.getElementById('rectWidthInput');
var rectHeightSpn = document.getElementById('rectHeight');
var rectHeightInput = document.getElementById('rectHeightInput');
rectWidthInput.value = rectWidthSpn.innerText;
rectHeightInput.value = rectHeightSpn.innerText;
rectWidthSpn.addEventListener('click', function (e) {
var val = rectWidthSpn.innerText;
rectWidthSpn.style.display = 'none';
rectWidthInput.value = val;
rectWidthInput.style.display = 'inline-block';
rectWidthInput.focus();
});
rectHeightSpn.addEventListener('click', function (e) {
var val = rectHeightSpn.innerText;
rectHeightSpn.style.display = 'none';
rectHeightInput.value = val;
rectHeightInput.style.display = 'inline-block';
rectHeightInput.focus();
});
rectWidthInput.addEventListener('click', function (e) {
rectWidthInput.focus();
});
rectHeightInput.addEventListener('click', function (e) {
rectHeightInput.focus();
});
rectWidthInput.addEventListener('keydown', function (e) {
if (e.keyCode === 13) {
var widthVal = rectWidthInput.value;
var heightVal = rectHeightInput.value;
rectWidthInput.style.display = 'none';
rectHeightInput.style.display = 'none';
rectWidthSpn.style.display = 'inline-block';
rectHeightSpn.style.display = 'inline-block';
rectWidthSpn.innerText = widthVal;
rectHeightSpn.innerText = heightVal;
var opt = {
width: widthVal,
height: heightVal,
overlay: that.overlay
};
that._dispatchRectWHChange(opt);
}
});
rectHeightInput.addEventListener('keydown', function (e) {
if (e.keyCode === 13) {
var widthVal = rectWidthInput.value;
var heightVal = rectHeightInput.value;
rectWidthInput.style.display = 'none';
rectHeightInput.style.display = 'none';
rectWidthSpn.style.display = 'inline-block';
rectHeightSpn.style.display = 'inline-block';
rectWidthSpn.innerText = widthVal;
rectHeightSpn.innerText = heightVal;
var opt = {
width: widthVal,
height: heightVal,
overlay: that.overlay
};
that._dispatchRectWHChange(opt);
}
});
};
Screenshot.prototype.setInfo = function (point, number) {
this.setNumber(number);
this.setPosition(point);
};
Screenshot.prototype.setNumber = function (number) {
if (this.type == 'circle') {
document.getElementById('screenshotNum').textContent = number;
}
else {
document.getElementById('rectWidth').textContent = number.width;
document.getElementById('rectHeight').textContent = number.height;
}
};
Screenshot.prototype.setPosition = function (point) {
this.point = point;
var map = this._map,
type = this.type,
pixel = map.pointToOverlayPixel(this.point);
if (type == 'circle') {
this.div.style.left = pixel.x - 30 + 'px';
this.div.style.top = pixel.y - 40 + 'px';
}
else if (type == 'rectangle') {
this.div.style.left = pixel.x + 'px';
this.div.style.top = pixel.y - 45 + 'px';
}
};
Screenshot.prototype.draw = function () {
var map = this._map,
type = this.type,
pixel = map.pointToOverlayPixel(this.point);
if (type == 'circle') {
this.div.style.left = pixel.x - 30 + 'px';
this.div.style.top = pixel.y - 40 + 'px';
}
else if (type == 'rectangle') {
this.div.style.left = pixel.x + 'px';
this.div.style.top = pixel.y - 45 + 'px';
}
};
/**
* 派发事件
*/
Screenshot.prototype._dispatchRadiusChange = function (opt) {
this.dispatchEvent('radiuschange', opt);
};
/**
* 派发事件
*/
Screenshot.prototype._dispatchRectWHChange = function (opt) {
this.dispatchEvent('rectwhchange', opt);
};
/**
* 创建遮罩对象
*/
function Mask() {
/**
* 鼠标到地图边缘的时候是否自动平移地图
*/
this._enableEdgeMove = false;
}
Mask.prototype = new BMapGL.Overlay();
/**
* 这里不使用api中的自定义事件，是为了更灵活使用
*/
Mask.prototype.dispatchEvent = baidu.lang.Class.prototype.dispatchEvent;
Mask.prototype.addEventListener = baidu.lang.Class.prototype.addEventListener;
Mask.prototype.removeEventListener = baidu.lang.Class.prototype.removeEventListener;
Mask.prototype.initialize = function (map) {
var me = this;
this._map = map;
var div = this.container = document.createElement('div');
var size = this._map.getSize();
div.style.cssText = 'position:absolute;background:transparent;cursor:crosshair;width:' + size.width + 'px;height:' + size.height + 'px';
this._map.addEventListener('resize', function (e) {
me._adjustSize(e.size);
});
this._map.getPanes().floatPane.appendChild(div);
this._bind();
return div;
};
Mask.prototype.draw = function () {
var map = this._map,
point = map.pixelToPoint(new BMapGL.Pixel(0, 0)),
pixel = map.pointToOverlayPixel(point);
this.container.style.left = pixel.x + 'px';
this.container.style.top = pixel.y + 'px';
};
/**
* 开启鼠标到地图边缘，自动平移地图
*/
Mask.prototype.enableEdgeMove = function () {
this._enableEdgeMove = true;
};
/**
* 关闭鼠标到地图边缘，自动平移地图
*/
Mask.prototype.disableEdgeMove = function () {
clearInterval(this._edgeMoveTimer);
this._enableEdgeMove = false;
};
/**
* 绑定事件,派发自定义事件
*/
Mask.prototype._bind = function () {
var me = this,
map = this._map,
container = this.container,
lastMousedownXY = null,
lastClickXY = null;
/**
* 根据event对象获取鼠标的xy坐标对象
* @param {Event}
* @return {Object} {x:e.x, y:e.y}
*/
var getXYbyEvent = function (e) {
return {
x: e.clientX,
y: e.clientY
};
};
var domEvent = function (e) {
var type = e.type;
e = baidu.getEvent(e);
point = me.getDrawPoint(e); // 当前鼠标所在点的地理坐标
var dispatchEvent = function (type) {
e.point = point;
me.dispatchEvent(e);
};
if (type == 'mousedown') {
lastMousedownXY = getXYbyEvent(e);
}
var nowXY = getXYbyEvent(e);
// click经过一些特殊处理派发，其他同事件按正常的dom事件派发
if (type == 'click') {
// 鼠标点击过程不进行移动才派发click和dblclick
if (Math.abs(nowXY.x - lastMousedownXY.x) < 5 && Math.abs(nowXY.y - lastMousedownXY.y) < 5) {
if (!lastClickXY || !(Math.abs(nowXY.x - lastClickXY.x) < 5 && Math.abs(nowXY.y - lastClickXY.y) < 5)) {
dispatchEvent('click');
lastClickXY = getXYbyEvent(e);
} else {
lastClickXY = null;
}
}
} else {
dispatchEvent(type);
}
};
/**
* 将事件都遮罩层的事件都绑定到domEvent来处理
*/
var events = ['click', 'mousedown', 'mousemove', 'mouseup', 'dblclick'],
index = events.length;
while (index--) {
baidu.on(container, events[index], domEvent);
}
// 鼠标移动过程中，到地图边缘后自动平移地图
baidu.on(container, 'mousemove', function (e) {
if (me._enableEdgeMove) {
me.mousemoveAction(e);
}
});
};
// 鼠标移动过程中，到地图边缘后自动平移地图
Mask.prototype.mousemoveAction = function (e) {
function getClientPosition(e) {
var clientX = e.clientX,
clientY = e.clientY;
if (e.changedTouches) {
clientX = e.changedTouches[0].clientX;
clientY = e.changedTouches[0].clientY;
}
return new BMapGL.Pixel(clientX, clientY);
}
var map = this._map,
me = this,
pixel = map.pointToPixel(this.getDrawPoint(e)),
clientPos = getClientPosition(e),
offsetX = clientPos.x - pixel.x,
offsetY = clientPos.y - pixel.y;
pixel = new BMapGL.Pixel((clientPos.x - offsetX), (clientPos.y - offsetY));
this._draggingMovePixel = pixel;
var point = map.pixelToPoint(pixel),
eventObj = {
pixel: pixel,
point: point
};
// 拖拽到地图边缘移动地图
this._panByX = this._panByY = 0;
if (pixel.x <= 20 || pixel.x >= map.width - 20 ||
pixel.y <= 50 || pixel.y >= map.height - 10) {
if (pixel.x <= 20) {
this._panByX = 8;
}
else if (pixel.x >= map.width - 20) {
this._panByX = -8;
}
if (pixel.y <= 50) {
this._panByY = 8;
}
else if (pixel.y >= map.height - 10) {
this._panByY = -8;
}
if (!this._edgeMoveTimer) {
this._edgeMoveTimer = setInterval(function () {
map.panBy(me._panByX, me._panByY, {
noAnimation: true
});
}, 30);
}
} else {
if (this._edgeMoveTimer) {
clearInterval(this._edgeMoveTimer);
this._edgeMoveTimer = null;
}
}
};
/*
* 调整大小
* @param {Size}
*/
Mask.prototype._adjustSize = function (size) {
this.container.style.width = size.width + 'px';
this.container.style.height = size.height + 'px';
};
/**
* 获取当前绘制点的地理坐标
*
* @param {Event} e e对象
* @return Point对象的位置信息
*/
Mask.prototype.getDrawPoint = function (e) {
var map = this._map,
trigger = baidu.getTarget(e),
x = e.offsetX || e.layerX || 0,
y = e.offsetY || e.layerY || 0;
if (trigger.nodeType != 1) {
trigger = trigger.parentNode;
}
while (trigger && trigger != map.getContainer()) {
if (!(trigger.clientWidth == 0 &&
trigger.clientHeight == 0 &&
trigger.offsetParent && trigger.offsetParent.nodeName == 'TD')) {
x += trigger.offsetLeft || 0;
y += trigger.offsetTop || 0;
}
trigger = trigger.offsetParent;
}
var pixel = new BMapGL.Pixel(x, y);
var point = map.pixelToPoint(pixel);
return point;
};
/**
* 绘制工具面板，自定义控件
*/
function DrawingTool(drawingManager, drawingToolOptions) {
this.drawingManager = drawingManager;
drawingToolOptions = this.drawingToolOptions = drawingToolOptions || {};
this._opts = {};
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMapGL.Size(10, 10);
// 默认所有工具栏都显示
this.defaultDrawingModes = [
BMAP_DRAWING_MARKER,
BMAP_DRAWING_CIRCLE,
BMAP_DRAWING_POLYLINE,
BMAP_DRAWING_POLYGON,
BMAP_DRAWING_RECTANGLE
];
// 工具栏可显示的绘制模式
if (drawingToolOptions.drawingModes) {
this.drawingModes = drawingToolOptions.drawingModes;
} else {
this.drawingModes = this.defaultDrawingModes;
}
// 用户设置停靠位置和偏移量
if (drawingToolOptions.hasCustomStyle) {
if (drawingToolOptions.anchor) {
this.setAnchor(drawingToolOptions.anchor);
}
if (drawingToolOptions.offset) {
this.setOffset(drawingToolOptions.offset);
}
}
}
// 通过JavaScript的prototype属性继承于BMap.Control
DrawingTool.prototype = new BMapGL.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
DrawingTool.prototype.initialize = function (map) {
// 创建一个DOM元素
var container = this.container = document.createElement('div');
container.className = 'BMapGLLib_Drawing';
// 用来设置外层边框阴影
var panel = this.panel = document.createElement('div');
panel.className = 'BMapGLLib_Drawing_panel';
if (this.drawingToolOptions && this.drawingToolOptions.hasCustomStyle && this.drawingToolOptions.scale) {
this._setScale(this.drawingToolOptions.scale);
}
container.appendChild(panel);
// 添加内容
var content = this._generalHtml();
panel.appendChild(content);
// 添加tip
var tip = this.tip = document.createElement('div');
tip.className = 'BMapGLLib_tip';
tip.innerHTML = '