2021-06-15 18:23:48 +08:00
|
|
|
// 事件设置
|
|
|
|
|
var mapConfig = {
|
|
|
|
|
// 网格开始编辑回调事件
|
|
|
|
|
onGridStartEdit: function (baiduMap) {
|
|
|
|
|
},
|
|
|
|
|
// 网格结束编辑回调事件
|
|
|
|
|
onGridStopEdit: function (gridArray) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// BMap
|
|
|
|
|
// BMapGL
|
|
|
|
|
|
|
|
|
|
function BaiduMap(mapId, mapConfig) {
|
2022-04-20 15:09:04 +08:00
|
|
|
mapConfig.enableMapClick = false
|
|
|
|
|
this.map = new BMap.Map(mapId, mapConfig);
|
2021-06-15 18:23:48 +08:00
|
|
|
this.mapId = mapId;
|
|
|
|
|
this.defaultLng = 116.280190;
|
|
|
|
|
this.defaultLat = 40.049191;
|
|
|
|
|
this.defaultZoom = 19;
|
|
|
|
|
this.startMarker = null,
|
|
|
|
|
this.const = {
|
|
|
|
|
START_MARKER_ICON: 'images/marker.png',
|
|
|
|
|
color: {
|
|
|
|
|
GREEN: '#009688',
|
|
|
|
|
BLUE: '#1E9FFF',
|
|
|
|
|
ORANGE: '#FFB800',
|
|
|
|
|
RED: '#FF5722',
|
|
|
|
|
CYAN: '#2F4056',
|
|
|
|
|
BLACK: '#393D49'
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
// 标签数组
|
|
|
|
|
this.labelArray = [];
|
|
|
|
|
// 网格操作
|
|
|
|
|
this.gridOption = {
|
|
|
|
|
const: {
|
|
|
|
|
RELATION_NAME_ID: 'B_GRID_RELATION_NAME',
|
|
|
|
|
START_BTN_ID: 'B_GRID_START_BTN',
|
|
|
|
|
CANCEL_BTN_ID: 'B_GRID_CANCEL_BTN',
|
|
|
|
|
RIGHT_BOX_ID: 'B_GRID_RIGHT_BOX',
|
|
|
|
|
RIGHT_BOX_WIDTH: 80,
|
|
|
|
|
RIGHT_BOX_HEIGHT: 94,
|
|
|
|
|
SAVE_BTN_ID: 'B_GRID_SAVE_BTN',
|
|
|
|
|
REMOVE_BTN_ID: 'B_GRID_REMOVE_BTN',
|
|
|
|
|
EDIT_BTN_ID: 'B_GRID_EDIT_BTN',
|
|
|
|
|
STOP_EDIT_BTN_ID: 'B_GRID_STOP_EDIT_BTN',
|
|
|
|
|
COLOR_CHOICE_BTN_ID: 'B_COLOR_CHOICE_BTN_ID',
|
|
|
|
|
STROKE_COLOR: '#0000FF',
|
|
|
|
|
STROKE_BACKGROUND_COLOR: '#000000',
|
|
|
|
|
STROKE_WEIGHT: 1,
|
|
|
|
|
STROKE_BACKGROUND_WEIGHT: 1,
|
|
|
|
|
STROKE_WEIGHT_FOCUS: 2,
|
|
|
|
|
STROKE_OPACITY: 0.5,
|
|
|
|
|
STROKE_BACKGROUND_OPACITY: 0.5,
|
|
|
|
|
FILL_COLOR: '#000000',
|
|
|
|
|
FILL_BACKGROUND_COLOR: '#FFFFFF',
|
|
|
|
|
FILL_OPACITY: '0.6',
|
|
|
|
|
FILL_BACKGROUND_OPACITY: '0.3',
|
|
|
|
|
LABEL_FONT_SIZE: 12,
|
|
|
|
|
GRID_ID_PREFIX: 'GRID_'
|
|
|
|
|
},
|
|
|
|
|
isEdit: false,
|
|
|
|
|
editGrid: {
|
|
|
|
|
polygon: null,
|
|
|
|
|
isEdit: false,
|
|
|
|
|
color: '#000000',
|
|
|
|
|
pointArray: []
|
|
|
|
|
},
|
|
|
|
|
gridArray: []
|
|
|
|
|
};
|
|
|
|
|
this.colorOption = {
|
|
|
|
|
edit: {r: 0, g: 0, b: 0},
|
|
|
|
|
const: {
|
|
|
|
|
COLOR_BOX_ID: 'B_COLOR_BOX',
|
|
|
|
|
COLOR_SHOW_BOX_ID: 'B_SHOW_COLOR_BOX',
|
|
|
|
|
COLOR_R: 'B_COLOR_R',
|
|
|
|
|
COLOR_G: 'B_COLOR_G',
|
|
|
|
|
COLOR_B: 'B_COLOR_B',
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
this.mapConfig = mapConfig;
|
|
|
|
|
this.relationGroup = null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 关联
|
|
|
|
|
BaiduMap.Relation = function (id, name) {
|
|
|
|
|
this.id = id;
|
|
|
|
|
this.name = name;
|
|
|
|
|
}
|
|
|
|
|
// 关联组
|
|
|
|
|
BaiduMap.RelationGroup = function (relationArray) {
|
|
|
|
|
this.relationArray = relationArray;
|
|
|
|
|
this.relationIdArray = [];
|
|
|
|
|
this.relationNameArray = [];
|
|
|
|
|
this.relationIds = '';
|
|
|
|
|
this.relationNames = '';
|
|
|
|
|
|
|
|
|
|
for (var i = 0, relation; relation = relationArray[i++];) {
|
|
|
|
|
this.relationIdArray.push(relation.id);
|
|
|
|
|
this.relationNameArray.push(relation.name);
|
|
|
|
|
if (this.relationIds.length > 0) {
|
|
|
|
|
this.relationIds += ',';
|
|
|
|
|
this.relationNames += ',';
|
|
|
|
|
}
|
|
|
|
|
this.relationIds += relation.id;
|
|
|
|
|
this.relationNames += relation.name;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 网格信息
|
|
|
|
|
BaiduMap.Grid = function (id, pointArray) {
|
|
|
|
|
this.id = id;
|
|
|
|
|
this.fillColor = '#000000';
|
|
|
|
|
this.relationIdArray = null;
|
|
|
|
|
this.gridName = null;
|
|
|
|
|
this.pointArray = pointArray;
|
|
|
|
|
this.setFillColor = function (fillColor) {
|
|
|
|
|
this.fillColor = fillColor;
|
|
|
|
|
}
|
|
|
|
|
this.setRelationIdArray = function (relationIdArray) {
|
|
|
|
|
this.relationIdArray = relationIdArray;
|
|
|
|
|
}
|
|
|
|
|
this.setGridName = function (gridName) {
|
|
|
|
|
this.gridName = gridName;
|
|
|
|
|
}
|
|
|
|
|
this.setPointArray = function (pointArray) {
|
|
|
|
|
this.pointArray = pointArray;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 点
|
|
|
|
|
BaiduMap.Point = function (lng, lat) {
|
|
|
|
|
return new BMap.Point(lng, lat);
|
|
|
|
|
}
|
|
|
|
|
// 设置用户组
|
|
|
|
|
BaiduMap.prototype.setRelationGroup = function (relationArray) {
|
|
|
|
|
var relationNameSpan = document.getElementById(this.gridOption.const.RELATION_NAME_ID);
|
|
|
|
|
if (!relationArray || relationArray.length == 0) {
|
|
|
|
|
this.relationGroup = [];
|
|
|
|
|
relationNameSpan.innerHTML = '';
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.relationGroup = new BaiduMap.RelationGroup(relationArray);
|
|
|
|
|
relationNameSpan.innerHTML = '<b>关联：</b>' + this.relationGroup.relationNames;
|
|
|
|
|
}
|
|
|
|
|
// 颜色RGB转16进制
|
|
|
|
|
BaiduMap.prototype.colorRGBToHex = function (r, g, b) {
|
|
|
|
|
var red = parseInt(r, 10).toString(16);
|
|
|
|
|
red = red.length < 2 ? '0' + red : red;
|
|
|
|
|
var green = parseInt(g, 10).toString(16);
|
|
|
|
|
green = green.length < 2 ? '0' + green : green;
|
|
|
|
|
var blue = parseInt(b, 10).toString(16);
|
|
|
|
|
blue = blue.length < 2 ? '0' + blue : blue;
|
|
|
|
|
return "#" + red + green + blue;
|
|
|
|
|
}
|
|
|
|
|
// 颜色16进制转RGB
|
|
|
|
|
BaiduMap.prototype.colorHexToRGB = function (hex) {
|
|
|
|
|
if (!hex) {
|
|
|
|
|
return {r: 0, g: 0, b: 0};
|
|
|
|
|
}
|
|
|
|
|
if (hex.indexOf('#') == 0) {
|
|
|
|
|
hex = hex.substring(1);
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
r: parseInt(hex.substring(0, 2), 16),
|
|
|
|
|
g: parseInt(hex.substring(2, 4), 16),
|
|
|
|
|
b: parseInt(hex.substring(4, 6), 16)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 颜色选择器
|
|
|
|
|
BaiduMap.prototype.setShowColor = function () {
|
|
|
|
|
var self = this;
|
|
|
|
|
var colorShowBox = document.getElementById(self.colorOption.const.COLOR_SHOW_BOX_ID);
|
|
|
|
|
var hexColor = self.colorRGBToHex(self.colorOption.edit.r, self.colorOption.edit.g, self.colorOption.edit.b);
|
|
|
|
|
colorShowBox.style.backgroundColor = hexColor;
|
|
|
|
|
self.gridOption.editGrid.polygon.setFillColor(hexColor);
|
|
|
|
|
}
|
|
|
|
|
// 设置颜色Input值
|
|
|
|
|
BaiduMap.prototype.setColorInputValue = function (color) {
|
|
|
|
|
var self = this;
|
|
|
|
|
self.colorOption.edit = self.colorHexToRGB(color);
|
|
|
|
|
document.getElementById(self.colorOption.const.COLOR_R).value = self.colorOption.edit.r;
|
|
|
|
|
document.getElementById(self.colorOption.const.COLOR_G).value = self.colorOption.edit.g;
|
|
|
|
|
document.getElementById(self.colorOption.const.COLOR_B).value = self.colorOption.edit.b;
|
|
|
|
|
var colorShowBox = document.getElementById(self.colorOption.const.COLOR_SHOW_BOX_ID);
|
|
|
|
|
colorShowBox.style.backgroundColor = color;
|
|
|
|
|
}
|
|
|
|
|
// 初始化颜色选择
|
|
|
|
|
BaiduMap.prototype.initColorOption = function () {
|
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
|
|
// 获取颜色选择器
|
|
|
|
|
function getColorInput(inputId, title, value) {
|
|
|
|
|
var colorInput = document.createElement('div');
|
|
|
|
|
colorInput.style.width = '100%';
|
|
|
|
|
colorInput.style.textAlign = 'center';
|
|
|
|
|
|
|
|
|
|
var colorInputInput = document.createElement('input');
|
|
|
|
|
colorInputInput.setAttribute('id', inputId);
|
|
|
|
|
colorInputInput.setAttribute('type', 'range');
|
|
|
|
|
colorInputInput.setAttribute('min', 0);
|
|
|
|
|
colorInputInput.setAttribute('max', 255);
|
|
|
|
|
colorInputInput.setAttribute('value', value);
|
|
|
|
|
colorInputInput.style.width = '100px';
|
|
|
|
|
colorInputInput.addEventListener('mousemove', function (event) {
|
|
|
|
|
self.colorOption.edit = {
|
|
|
|
|
r: document.getElementById(self.colorOption.const.COLOR_R).value,
|
|
|
|
|
g: document.getElementById(self.colorOption.const.COLOR_G).value,
|
|
|
|
|
b: document.getElementById(self.colorOption.const.COLOR_B).value
|
|
|
|
|
}
|
|
|
|
|
// 修改区域颜色
|
|
|
|
|
self.setShowColor();
|
|
|
|
|
});
|
|
|
|
|
var titleSpan = document.createElement('span');
|
|
|
|
|
titleSpan.appendChild(document.createTextNode(title));
|
|
|
|
|
colorInput.appendChild(titleSpan);
|
|
|
|
|
colorInput.appendChild(colorInputInput);
|
|
|
|
|
return colorInput;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 颜色选BOX
|
|
|
|
|
function getColorInputBox() {
|
|
|
|
|
var colorInputBox = document.createElement('div');
|
|
|
|
|
colorInputBox.style.display = 'table-cell';
|
|
|
|
|
colorInputBox.style.width = '100px';
|
|
|
|
|
|
|
|
|
|
var firstColorInput = getColorInput(self.colorOption.const.COLOR_R, '红', self.colorOption.edit.r);
|
|
|
|
|
firstColorInput.style.marginTop = '2px';
|
|
|
|
|
colorInputBox.appendChild(firstColorInput);
|
|
|
|
|
colorInputBox.appendChild(getColorInput(self.colorOption.const.COLOR_G, '绿', self.colorOption.edit.g));
|
|
|
|
|
colorInputBox.appendChild(getColorInput(self.colorOption.const.COLOR_B, '蓝', self.colorOption.edit.b));
|
|
|
|
|
return colorInputBox;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 颜色BOX
|
|
|
|
|
function getColorBox(colorOptionBox) {
|
|
|
|
|
var colorBox = document.createElement('div');
|
|
|
|
|
colorBox.setAttribute('id', self.colorOption.const.COLOR_SHOW_BOX_ID);
|
|
|
|
|
colorBox.style.display = 'table-cell';
|
|
|
|
|
colorBox.style.width = '70px';
|
|
|
|
|
colorBox.style.height = '100%';
|
|
|
|
|
colorBox.style.borderRight = '1px solid silver';
|
|
|
|
|
colorBox.style.backgroundColor = self.colorRGBToHex(self.colorOption.edit.r, self.colorOption.edit.g, self.colorOption.edit.b);
|
|
|
|
|
return colorBox;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var colorOptionBox = document.createElement('div');
|
|
|
|
|
colorOptionBox.setAttribute('id', self.colorOption.const.COLOR_BOX_ID);
|
|
|
|
|
colorOptionBox.style.backgroundColor = '#FFFFFF';
|
|
|
|
|
colorOptionBox.style.display = 'none';
|
|
|
|
|
colorOptionBox.style.width = '210px';
|
|
|
|
|
colorOptionBox.style.height = '70px';
|
|
|
|
|
colorOptionBox.style.border = '1px solid silver';
|
|
|
|
|
colorOptionBox.style.position = 'absolute';
|
|
|
|
|
colorOptionBox.style.top = '0';
|
|
|
|
|
colorOptionBox.style.left = '0';
|
|
|
|
|
colorOptionBox.style.zIndex = 102;
|
|
|
|
|
colorOptionBox.appendChild(getColorBox());
|
|
|
|
|
colorOptionBox.appendChild(getColorInputBox());
|
|
|
|
|
var mapContainer = document.getElementById(this.mapId);
|
|
|
|
|
mapContainer.appendChild(colorOptionBox);
|
|
|
|
|
}
|
|
|
|
|
BaiduMap.prototype.showColorOptionBox = function () {
|
|
|
|
|
var colorBox = document.getElementById(this.colorOption.const.COLOR_BOX_ID);
|
|
|
|
|
if (!colorBox) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
colorBox.style.display = 'inline-table';
|
|
|
|
|
}
|
|
|
|
|
BaiduMap.prototype.hideColorOptionBox = function () {
|
|
|
|
|
var colorBox = document.getElementById(this.colorOption.const.COLOR_BOX_ID);
|
|
|
|
|
if (!colorBox) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
colorBox.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
// 获取中心点
|
|
|
|
|
BaiduMap.prototype.getCenterPoint = function (pathPointArray) {
|
|
|
|
|
var lng = 0.0;
|
|
|
|
|
var lat = 0.0;
|
|
|
|
|
for (var i = 0, pathPoint; pathPoint = pathPointArray[i++];) {
|
|
|
|
|
lng = lng + parseFloat(pathPoint.lng);
|
|
|
|
|
lat = lat + parseFloat(pathPoint.lat);
|
|
|
|
|
}
|
|
|
|
|
lng = lng / pathPointArray.length;
|
|
|
|
|
lat = lat / pathPointArray.length;
|
|
|
|
|
return new BMap.Point(lng, lat);
|
|
|
|
|
}
|
|
|
|
|
// 设置标签字体大小
|
|
|
|
|
BaiduMap.prototype.setLabelFontSize = function (size) {
|
|
|
|
|
// 全部隐藏
|
|
|
|
|
if (size === 0) {
|
|
|
|
|
for (var i = 0, label; label = this.labelArray[i++];) {
|
|
|
|
|
label.hide();
|
|
|
|
|
}
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
for (var i = 0, label; label = this.labelArray[i++];) {
|
|
|
|
|
label.show();
|
|
|
|
|
label.setOffset(new BMap.Size(-label.content.length * size / 2, -size / 2));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 获得Map对象
|
|
|
|
|
BaiduMap.prototype.getMap = function () {
|
|
|
|
|
return this.map;
|
|
|
|
|
}
|
|
|
|
|
// 设置中心点和缩放比例
|
|
|
|
|
BaiduMap.prototype.setCenterAndZoom = function (point, zoom) {
|
|
|
|
|
var centerPoint;
|
|
|
|
|
if (point) {
|
|
|
|
|
centerPoint = new BMap.Point(point.lng ? point.lng : this.defaultLng, point.lat ? point.lat : this.defaultLat);
|
|
|
|
|
} else {
|
|
|
|
|
centerPoint = new BMap.Point(this.defaultLng, this.defaultLat);
|
|
|
|
|
}
|
|
|
|
|
this.map.centerAndZoom(centerPoint, zoom ? zoom : this.defaultZoom);
|
|
|
|
|
}
|
|
|
|
|
// 设置默认配置
|
|
|
|
|
BaiduMap.prototype.setDefaultConfig = function () {
|
|
|
|
|
var self = this;
|
|
|
|
|
self.map.enableScrollWheelZoom(true);
|
|
|
|
|
self.map.enableAutoResize();
|
|
|
|
|
self.map.setDefaultCursor('grab');
|
|
|
|
|
// 取消双击缩放
|
|
|
|
|
self.map.disableDoubleClickZoom();
|
|
|
|
|
// 精度控件
|
|
|
|
|
// self.map.addControl(new BMap.ScaleControl({
|
|
|
|
|
// anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
|
|
|
|
|
// offset: new BMap.Size(35, 5)
|
|
|
|
|
// }));
|
|
|
|
|
// // 缩放控件
|
|
|
|
|
// self.map.addControl(new BMap.ZoomControl({
|
|
|
|
|
// anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
|
|
|
|
|
// offset: new BMap.Size(5, 5)
|
|
|
|
|
// }));
|
|
|
|
|
// 单击事件
|
|
|
|
|
self.map.addEventListener('click', function (event) {
|
|
|
|
|
// 清空右键菜单
|
|
|
|
|
self.hideColorOptionBox();
|
|
|
|
|
self.hideRightOptionBox();
|
|
|
|
|
})
|
|
|
|
|
// 开始拖拽
|
|
|
|
|
self.map.addEventListener('dragstart', function (event) {
|
|
|
|
|
this.setDefaultCursor('grabbing');
|
|
|
|
|
self.hideColorOptionBox();
|
|
|
|
|
self.hideRightOptionBox();
|
|
|
|
|
});
|
|
|
|
|
// 取消拖拽
|
|
|
|
|
self.map.addEventListener('dragend', function (event) {
|
|
|
|
|
if (self.gridOption.isEdit) {
|
|
|
|
|
this.setDefaultCursor('pointer');
|
|
|
|
|
} else {
|
|
|
|
|
this.setDefaultCursor('grab');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 缩放结束
|
|
|
|
|
self.map.addEventListener('zoomend', function (event) {
|
|
|
|
|
var zoom = this.getZoom();
|
2022-09-27 11:57:31 +08:00
|
|
|
if (zoom < 15) {
|
2021-06-15 18:23:48 +08:00
|
|
|
self.setLabelFontSize(0);
|
|
|
|
|
} else {
|
2022-09-27 11:57:31 +08:00
|
|
|
self.setLabelFontSize(12);
|
2021-06-15 18:23:48 +08:00
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// 通过ID删除网格
|
|
|
|
|
BaiduMap.prototype.removeGridById = function (removeId) {
|
|
|
|
|
var self = this;
|
|
|
|
|
for (var i = 0; i < self.gridOption.gridArray.length; i++) {
|
|
|
|
|
var grid = self.gridOption.gridArray[i];
|
|
|
|
|
if (grid.id == removeId) {
|
|
|
|
|
self.gridOption.gridArray.splice(i, 1);
|
|
|
|
|
i--;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 保存网格
|
|
|
|
|
BaiduMap.prototype.saveGrid = function (saveGrid) {
|
|
|
|
|
var self = this;
|
|
|
|
|
for (var i = 0; i < self.gridOption.gridArray.length; i++) {
|
|
|
|
|
var grid = self.gridOption.gridArray[i];
|
|
|
|
|
if (grid.id == saveGrid.id) {
|
|
|
|
|
grid.pointArray = saveGrid.pointArray;
|
|
|
|
|
grid.setFillColor(saveGrid.fillColor);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
self.gridOption.gridArray.push(saveGrid);
|
|
|
|
|
}
|
|
|
|
|
// 通过ID获取网格
|
|
|
|
|
BaiduMap.prototype.getGridById = function (gridId) {
|
|
|
|
|
var self = this;
|
|
|
|
|
for (var i = 0; i < self.gridOption.gridArray.length; i++) {
|
|
|
|
|
var grid = self.gridOption.gridArray[i];
|
|
|
|
|
if (grid.id == gridId) {
|
|
|
|
|
return grid;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
// 设置a按钮标签基础属性
|
|
|
|
|
BaiduMap.prototype.setABtnElementAttribute = function (aElement, aId, aText, backgroundColor) {
|
|
|
|
|
aElement.appendChild(document.createTextNode(aText));
|
|
|
|
|
aElement.setAttribute('id', aId);
|
|
|
|
|
aElement.setAttribute('href', 'javascript:void(0);');
|
|
|
|
|
aElement.style.textDecoration = 'none';
|
|
|
|
|
aElement.style.textAlign = 'center';
|
|
|
|
|
aElement.style.color = '#FFFFFF';
|
|
|
|
|
aElement.style.backgroundColor = backgroundColor ? backgroundColor : this.const.color.GREEN;
|
|
|
|
|
aElement.style.fontSize = '12px';
|
|
|
|
|
aElement.style.margin = '1px';
|
|
|
|
|
aElement.style.padding = '4px';
|
|
|
|
|
aElement.style.lineHeight = '14px';
|
|
|
|
|
aElement.style.borderRadius = '2px';
|
|
|
|
|
}
|
|
|
|
|
// 构建网格面板
|
|
|
|
|
BaiduMap.prototype.hideStopOptionBtn = function () {
|
|
|
|
|
document.getElementById(this.gridOption.const.CANCEL_BTN_ID).style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
BaiduMap.prototype.showStopOptionBtn = function () {
|
|
|
|
|
document.getElementById(this.gridOption.const.CANCEL_BTN_ID).style.display = 'inline-block';
|
|
|
|
|
}
|
|
|
|
|
BaiduMap.prototype.getGridBarBox = function () {
|
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
|
|
// 人员名称
|
|
|
|
|
function getRelationName() {
|
|
|
|
|
var relationNameSpan = document.createElement('span');
|
|
|
|
|
relationNameSpan.setAttribute('id', self.gridOption.const.RELATION_NAME_ID);
|
|
|
|
|
relationNameSpan.style.fontSize = '12px';
|
|
|
|
|
relationNameSpan.style.lineHeight = '24px';
|
|
|
|
|
relationNameSpan.style.marginLeft = '5px';
|
|
|
|
|
return relationNameSpan;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 开始编辑按钮
|
|
|
|
|
function getStartOptionBtn() {
|
|
|
|
|
var startOptionBtn = document.createElement('a');
|
|
|
|
|
self.setABtnElementAttribute(startOptionBtn, self.gridOption.const.START_BTN_ID, '开始编辑');
|
|
|
|
|
startOptionBtn.addEventListener('click', function (event) {
|
|
|
|
|
if (self.mapConfig && self.mapConfig.onGridStartEdit) {
|
|
|
|
|
var result = self.mapConfig.onGridStartEdit(self);
|
|
|
|
|
if (result == false) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
self.map.setDefaultCursor('pointer');
|
|
|
|
|
self.gridOption.isEdit = true;
|
|
|
|
|
document.getElementById(self.gridOption.const.START_BTN_ID).style.display = 'none';
|
|
|
|
|
self.showStopOptionBtn();
|
|
|
|
|
});
|
|
|
|
|
return startOptionBtn;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 结束编辑按钮
|
|
|
|
|
function getCancelOptionBtn() {
|
|
|
|
|
var cancelOptionBtn = document.createElement('a');
|
|
|
|
|
self.setABtnElementAttribute(cancelOptionBtn, self.gridOption.const.CANCEL_BTN_ID, '结束编辑', self.const.color.RED);
|
|
|
|
|
cancelOptionBtn.style.display = 'none';
|
|
|
|
|
cancelOptionBtn.addEventListener('click', function (event) {
|
|
|
|
|
// 执行网格结束编辑回调
|
|
|
|
|
if (self.mapConfig && self.mapConfig.onGridStopEdit) {
|
|
|
|
|
// 处理关联关系
|
|
|
|
|
if (self.relationGroup) {
|
|
|
|
|
var gridName = '';
|
|
|
|
|
var relationIdArray = [];
|
|
|
|
|
for (var i = 0, item; item = self.relationGroup.relationArray[i++];) {
|
|
|
|
|
if (gridName.length > 0) {
|
|
|
|
|
gridName += ',';
|
|
|
|
|
}
|
|
|
|
|
gridName += item.name;
|
|
|
|
|
relationIdArray.push(item.id);
|
|
|
|
|
}
|
|
|
|
|
for (var i = 0, item; item = self.gridOption.gridArray[i++];) {
|
|
|
|
|
item.setGridName(gridName);
|
|
|
|
|
item.setRelationIdArray(relationIdArray);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
var result = self.mapConfig.onGridStopEdit(self.gridOption.gridArray);
|
|
|
|
|
if (result == false) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
self.map.setDefaultCursor('grab');
|
|
|
|
|
self.gridOption.isEdit = false;
|
|
|
|
|
self.hideStopOptionBtn();
|
|
|
|
|
document.getElementById(self.gridOption.const.START_BTN_ID).style.display = 'inline-block';
|
|
|
|
|
});
|
|
|
|
|
return cancelOptionBtn;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 初始化按钮组
|
|
|
|
|
function initGridBarBtnGroup(gridBarBox) {
|
|
|
|
|
gridBarBox.appendChild(getStartOptionBtn());
|
|
|
|
|
gridBarBox.appendChild(getCancelOptionBtn());
|
|
|
|
|
gridBarBox.appendChild(getRelationName());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var gridBarBox = document.createElement('div');
|
|
|
|
|
gridBarBox.style.backgroundColor = '#FFFFFF';
|
|
|
|
|
gridBarBox.style.padding = '5px';
|
|
|
|
|
gridBarBox.style.minWidth = '58px';
|
|
|
|
|
gridBarBox.style.height = '25px';
|
|
|
|
|
gridBarBox.style.border = '1px solid silver';
|
|
|
|
|
gridBarBox.style.position = 'absolute';
|
|
|
|
|
gridBarBox.style.top = '0';
|
|
|
|
|
gridBarBox.style.left = '0';
|
|
|
|
|
gridBarBox.style.zIndex = 100;
|
|
|
|
|
initGridBarBtnGroup(gridBarBox);
|
|
|
|
|
return gridBarBox;
|
|
|
|
|
}
|
|
|
|
|
// 网格右键菜单
|
|
|
|
|
BaiduMap.prototype.getGridPathPointByPolygon = function (polygon) {
|
|
|
|
|
var pathPointArray = polygon.getPath();
|
|
|
|
|
if (pathPointArray.length == 0) {
|
|
|
|
|
return [];
|
|
|
|
|
}
|
|
|
|
|
// 如果最后一个节点和第一个相等则去除
|
|
|
|
|
var firstPoint = pathPointArray[0];
|
|
|
|
|
var lastPoint = pathPointArray[pathPointArray.length - 1];
|
|
|
|
|
if (firstPoint.lng == lastPoint.lng && firstPoint.lat == lastPoint.lat) {
|
|
|
|
|
return pathPointArray.splice(0, pathPointArray.length - 1);
|
|
|
|
|
}
|
|
|
|
|
return pathPointArray;
|
|
|
|
|
}
|
|
|
|
|
BaiduMap.prototype.getGridOptionRightBox = function () {
|
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
|
|
// 获取区域路径节点
|
|
|
|
|
function getGridPathPoint() {
|
|
|
|
|
return self.getGridPathPointByPolygon(self.gridOption.editGrid.polygon);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 清除编辑网格
|
|
|
|
|
function clearEditGrid() {
|
|
|
|
|
self.gridOption.editGrid.isEdit = false;
|
|
|
|
|
self.gridOption.editGrid.polygon.disableEditing();
|
|
|
|
|
self.gridOption.editGrid.polygon = null;
|
|
|
|
|
self.gridOption.editGrid.pointArray = [];
|
|
|
|
|
self.hideRightOptionBox();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 网格右键菜单保存按钮
|
|
|
|
|
function getSaveOptionBtn() {
|
|
|
|
|
var saveOptionBtn = document.createElement('a');
|
|
|
|
|
self.setABtnElementAttribute(saveOptionBtn, self.gridOption.const.SAVE_BTN_ID, '保存', self.const.color.BLUE);
|
|
|
|
|
saveOptionBtn.style.display = 'block';
|
|
|
|
|
saveOptionBtn.addEventListener('click', function (event) {
|
|
|
|
|
// 更新数组
|
|
|
|
|
var pointArray;
|
|
|
|
|
if (self.gridOption.editGrid.isEdit) {
|
|
|
|
|
pointArray = getGridPathPoint();
|
|
|
|
|
} else {
|
|
|
|
|
pointArray = self.gridOption.editGrid.pointArray;
|
|
|
|
|
}
|
|
|
|
|
var grid = new BaiduMap.Grid(self.gridOption.editGrid.polygon.id, pointArray);
|
|
|
|
|
grid.setFillColor(self.gridOption.editGrid.polygon.getFillColor());
|
|
|
|
|
self.saveGrid(grid);
|
|
|
|
|
self.gridOption.editGrid.polygon.setStrokeWeight(self.gridOption.const.STROKE_WEIGHT);
|
|
|
|
|
document.getElementById(self.gridOption.const.STOP_EDIT_BTN_ID).style.display = 'none';
|
|
|
|
|
document.getElementById(self.gridOption.const.EDIT_BTN_ID).style.display = 'block';
|
|
|
|
|
clearEditGrid();
|
|
|
|
|
self.showStopOptionBtn();
|
|
|
|
|
});
|
|
|
|
|
return saveOptionBtn;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 网格右键菜单删除按钮
|
|
|
|
|
function getRemoveOptionBtn() {
|
|
|
|
|
var removeOptionBtn = document.createElement('a');
|
|
|
|
|
self.setABtnElementAttribute(removeOptionBtn, self.gridOption.const.REMOVE_BTN_ID, '删除', self.const.color.RED);
|
|
|
|
|
removeOptionBtn.style.display = 'block';
|
|
|
|
|
removeOptionBtn.addEventListener('click', function (event) {
|
|
|
|
|
self.removeGridById(self.gridOption.editGrid.polygon.id);
|
|
|
|
|
self.map.removeOverlay(self.gridOption.editGrid.polygon);
|
|
|
|
|
clearEditGrid();
|
|
|
|
|
self.showStopOptionBtn();
|
|
|
|
|
});
|
|
|
|
|
return removeOptionBtn;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 网格右键菜单编辑按钮
|
|
|
|
|
function getEditOptionBtn() {
|
|
|
|
|
var editOptionBtn = document.createElement('a');
|
|
|
|
|
self.setABtnElementAttribute(editOptionBtn, self.gridOption.const.EDIT_BTN_ID, '编辑', self.const.color.GREEN);
|
|
|
|
|
editOptionBtn.style.display = 'block';
|
|
|
|
|
editOptionBtn.addEventListener('click', function (event) {
|
|
|
|
|
// 开启编辑
|
|
|
|
|
self.gridOption.editGrid.polygon.enableEditing();
|
|
|
|
|
self.gridOption.editGrid.isEdit = true;
|
|
|
|
|
self.hideRightOptionBox();
|
|
|
|
|
this.style.display = 'none';
|
|
|
|
|
document.getElementById(self.gridOption.const.STOP_EDIT_BTN_ID).style.display = 'block';
|
|
|
|
|
});
|
|
|
|
|
return editOptionBtn;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 结束编辑按钮
|
|
|
|
|
function getStopEditOptionBtn() {
|
|
|
|
|
var stopEditOptionBtn = document.createElement('a');
|
|
|
|
|
self.setABtnElementAttribute(stopEditOptionBtn, self.gridOption.const.STOP_EDIT_BTN_ID, '结束编辑', self.const.color.GREEN);
|
|
|
|
|
stopEditOptionBtn.style.display = 'none';
|
|
|
|
|
stopEditOptionBtn.addEventListener('click', function (event) {
|
|
|
|
|
// 结束编辑
|
|
|
|
|
self.gridOption.editGrid.polygon.disableEditing();
|
|
|
|
|
self.gridOption.editGrid.isEdit = false;
|
|
|
|
|
// 更新节点
|
|
|
|
|
self.gridOption.editGrid.pointArray = getGridPathPoint();
|
|
|
|
|
self.hideRightOptionBox();
|
|
|
|
|
this.style.display = 'none';
|
|
|
|
|
document.getElementById(self.gridOption.const.EDIT_BTN_ID).style.display = 'block';
|
|
|
|
|
});
|
|
|
|
|
return stopEditOptionBtn;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 设置颜色按钮
|
|
|
|
|
function getColorChoiceBtn() {
|
|
|
|
|
var colorChoiceBtn = document.createElement('a');
|
|
|
|
|
self.setABtnElementAttribute(colorChoiceBtn, self.gridOption.const.COLOR_CHOICE_BTN_ID, '选择颜色', self.const.color.ORANGE);
|
|
|
|
|
colorChoiceBtn.style.display = 'block';
|
|
|
|
|
colorChoiceBtn.addEventListener('click', function (event) {
|
|
|
|
|
self.hideRightOptionBox();
|
|
|
|
|
self.showColorOptionBox();
|
|
|
|
|
});
|
|
|
|
|
return colorChoiceBtn;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 初始化按钮组
|
|
|
|
|
function initGridOptionBtnGroup(gridOptionRightBox) {
|
|
|
|
|
gridOptionRightBox.appendChild(getSaveOptionBtn());
|
|
|
|
|
gridOptionRightBox.appendChild(getRemoveOptionBtn());
|
|
|
|
|
gridOptionRightBox.appendChild(getEditOptionBtn());
|
|
|
|
|
gridOptionRightBox.appendChild(getStopEditOptionBtn());
|
|
|
|
|
gridOptionRightBox.appendChild(getColorChoiceBtn());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var gridOptionRightBox = document.createElement('div');
|
|
|
|
|
gridOptionRightBox.setAttribute('id', self.gridOption.const.RIGHT_BOX_ID);
|
|
|
|
|
gridOptionRightBox.style.backgroundColor = '#FFFFFF';
|
|
|
|
|
gridOptionRightBox.style.width = self.gridOption.const.RIGHT_BOX_WIDTH + 'px';
|
|
|
|
|
gridOptionRightBox.style.height = self.gridOption.const.RIGHT_BOX_HEIGHT + 'px';
|
|
|
|
|
gridOptionRightBox.style.border = '1px solid silver';
|
|
|
|
|
gridOptionRightBox.style.position = 'absolute';
|
|
|
|
|
gridOptionRightBox.style.display = 'none';
|
|
|
|
|
gridOptionRightBox.style.top = '0';
|
|
|
|
|
gridOptionRightBox.style.left = '0';
|
|
|
|
|
gridOptionRightBox.style.zIndex = 99;
|
|
|
|
|
initGridOptionBtnGroup(gridOptionRightBox);
|
|
|
|
|
return gridOptionRightBox;
|
|
|
|
|
}
|
|
|
|
|
// 初始化网格控件
|
|
|
|
|
BaiduMap.prototype.initGridOption = function () {
|
|
|
|
|
var mapContainer = document.getElementById(this.mapId);
|
|
|
|
|
mapContainer.setAttribute('position', 'relative');
|
|
|
|
|
mapContainer.appendChild(this.getGridBarBox());
|
|
|
|
|
mapContainer.appendChild(this.getGridOptionRightBox());
|
|
|
|
|
}
|
|
|
|
|
// 初始化背景网格(参考网格)
|
|
|
|
|
BaiduMap.prototype.initBackgroundGrid = function (option) {
|
|
|
|
|
var self = this;
|
|
|
|
|
if (!option || !option.gridArray || option.gridArray.length == 0) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 添加点击事件
|
|
|
|
|
function addClickEvent(polygon, backgroundGrid) {
|
|
|
|
|
if (!option.onClick) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
polygon.addEventListener('click', function (event) {
|
|
|
|
|
option.onClick(backgroundGrid, event);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (var i = 0, backgroundGrid; backgroundGrid = option.gridArray[i++];) {
|
|
|
|
|
var polygon = new BMap.Polygon(backgroundGrid.pointArray, {
|
|
|
|
|
strokeColor: self.gridOption.const.STROKE_BACKGROUND_COLOR,
|
|
|
|
|
strokeWeight: self.gridOption.const.STROKE_BACKGROUND_WEIGHT,
|
|
|
|
|
strokeOpacity: self.gridOption.const.STROKE_BACKGROUND_OPACITY,
|
|
|
|
|
fillOpacity: self.gridOption.const.FILL_BACKGROUND_OPACITY,
|
|
|
|
|
});
|
|
|
|
|
if (backgroundGrid.fillColor) {
|
|
|
|
|
polygon.setFillColor(backgroundGrid.fillColor);
|
|
|
|
|
} else {
|
|
|
|
|
polygon.setFillColor(self.gridOption.const.FILL_BACKGROUND_COLOR);
|
|
|
|
|
}
|
|
|
|
|
// 添加点击事件
|
|
|
|
|
self.map.addOverlay(polygon);
|
|
|
|
|
addClickEvent(polygon, backgroundGrid);
|
|
|
|
|
if (!backgroundGrid.label) {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
var label = new BMap.Label(backgroundGrid.label);
|
|
|
|
|
label.setStyle({
|
|
|
|
|
border: 'none',
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
textShadow: '1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff',
|
|
|
|
|
fontSize: self.gridOption.const.LABEL_FONT_SIZE + 'px'
|
|
|
|
|
});
|
|
|
|
|
label.setOffset(new BMap.Size(-backgroundGrid.label.length * self.gridOption.const.LABEL_FONT_SIZE / 2, -self.gridOption.const.LABEL_FONT_SIZE / 2));
|
|
|
|
|
label.setPosition(self.getCenterPoint(backgroundGrid.pointArray));
|
|
|
|
|
self.labelArray.push(label);
|
|
|
|
|
self.map.addOverlay(label);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 设置开始标记
|
|
|
|
|
BaiduMap.prototype.setStartMarker = function (point) {
|
|
|
|
|
var self = this;
|
|
|
|
|
var marker = new BMap.Marker(point);
|
|
|
|
|
self.startMarker = marker;
|
|
|
|
|
self.map.addOverlay(marker);
|
|
|
|
|
}
|
|
|
|
|
// 删除开始标记
|
|
|
|
|
BaiduMap.prototype.removeStartMarker = function () {
|
|
|
|
|
this.map.removeOverlay(this.startMarker);
|
|
|
|
|
}
|
|
|
|
|
// 隐藏网格右键菜单
|
|
|
|
|
BaiduMap.prototype.hideRightOptionBox = function () {
|
|
|
|
|
var gridOptionRightBox = document.getElementById(this.gridOption.const.RIGHT_BOX_ID);
|
|
|
|
|
if (!gridOptionRightBox) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
gridOptionRightBox.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
// 初始化网格事件
|
|
|
|
|
BaiduMap.prototype.initPolygonEvent = function (polygon) {
|
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
|
|
function focusPolygon(thisPolygon) {
|
|
|
|
|
self.hideColorOptionBox();
|
|
|
|
|
self.hideStopOptionBtn();
|
|
|
|
|
// 消除原有选中状态
|
|
|
|
|
if (self.gridOption.editGrid.polygon) {
|
|
|
|
|
// 更新节点
|
|
|
|
|
document.getElementById(self.gridOption.const.STOP_EDIT_BTN_ID).style.display = 'none';
|
|
|
|
|
document.getElementById(self.gridOption.const.EDIT_BTN_ID).style.display = 'block';
|
|
|
|
|
// 保存节点
|
|
|
|
|
self.gridOption.editGrid.polygon.setStrokeWeight(self.gridOption.const.STROKE_WEIGHT);
|
|
|
|
|
self.gridOption.editGrid.polygon.disableEditing();
|
|
|
|
|
self.gridOption.editGrid.isEdit = false;
|
|
|
|
|
var grid = new BaiduMap.Grid(self.gridOption.editGrid.polygon.id, self.getGridPathPointByPolygon(self.gridOption.editGrid.polygon));
|
|
|
|
|
grid.setFillColor(self.gridOption.editGrid.polygon.getFillColor());
|
|
|
|
|
self.saveGrid(grid);
|
|
|
|
|
}
|
|
|
|
|
// 标记当前网格选中状态
|
|
|
|
|
thisPolygon.setStrokeWeight(self.gridOption.const.STROKE_WEIGHT_FOCUS);
|
|
|
|
|
// 标记当前网格
|
|
|
|
|
self.gridOption.editGrid.polygon = thisPolygon;
|
|
|
|
|
// 设置网格颜色
|
|
|
|
|
self.setColorInputValue(self.gridOption.editGrid.polygon.getFillColor());
|
|
|
|
|
// 标记当前网格的point数组
|
|
|
|
|
var savedGrid = self.getGridById(thisPolygon.id);
|
|
|
|
|
if (savedGrid) {
|
|
|
|
|
self.gridOption.editGrid.pointArray = savedGrid.pointArray;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 网格点击事件
|
|
|
|
|
polygon.addEventListener('click', function (event) {
|
|
|
|
|
// 未开启编辑状态不允许聚焦
|
|
|
|
|
if (!self.gridOption.isEdit) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 有正在编辑的网格不允许聚焦
|
|
|
|
|
if (self.gridOption.editGrid.isEdit) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
focusPolygon(this);
|
|
|
|
|
});
|
|
|
|
|
// 网格右击事件
|
|
|
|
|
polygon.addEventListener('rightclick', function (event) {
|
|
|
|
|
// 未开启编辑状态，不允许显示右键菜单
|
|
|
|
|
if (!self.gridOption.isEdit) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 当前编辑网格不存在，不允许显示右键菜单
|
|
|
|
|
if (!self.gridOption.editGrid.polygon) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 已经编辑，网格不一样，不允许显示右键菜单
|
|
|
|
|
if (self.gridOption.editGrid.polygon.id != this.id) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 这行和上面两个条件开一个
|
|
|
|
|
// focusPolygon(this);
|
|
|
|
|
self.hideColorOptionBox();
|
|
|
|
|
var mapWidth = event.target.map.width;
|
|
|
|
|
var mapHeight = event.target.map.height;
|
|
|
|
|
var clickX = event.pixel.x;
|
|
|
|
|
var clickY = event.pixel.y;
|
|
|
|
|
var rightOptionX = mapWidth - clickX >= self.gridOption.const.RIGHT_BOX_WIDTH ? clickX : clickX - self.gridOption.const.RIGHT_BOX_WIDTH;
|
|
|
|
|
var rightOptionY = mapHeight - clickY >= self.gridOption.const.RIGHT_BOX_HEIGHT ? clickY : clickY - self.gridOption.const.RIGHT_BOX_HEIGHT;
|
|
|
|
|
// 显示右键菜单
|
|
|
|
|
var gridOptionRightBox = document.getElementById(self.gridOption.const.RIGHT_BOX_ID);
|
|
|
|
|
gridOptionRightBox.style.display = 'block';
|
|
|
|
|
gridOptionRightBox.style.top = rightOptionY + 'px';
|
|
|
|
|
gridOptionRightBox.style.left = rightOptionX + 'px';
|
|
|
|
|
|
|
|
|
|
// 颜色选择定位
|
|
|
|
|
var colorOptionX = mapWidth - clickX >= 210 ? clickX : clickX - 210;
|
|
|
|
|
var colorOptionY = mapHeight - clickY >= 70 ? clickY : clickY - 70;
|
|
|
|
|
var colocOptionBox = document.getElementById(self.colorOption.const.COLOR_BOX_ID);
|
|
|
|
|
colocOptionBox.style.top = colorOptionY + 'px';
|
|
|
|
|
colocOptionBox.style.left = colorOptionX + 'px';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 初始化网格事件
|
|
|
|
|
BaiduMap.prototype.initGridOptionEvent = function () {
|
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
|
|
// 获得网格对象
|
|
|
|
|
function getPolygon() {
|
|
|
|
|
var polygon = new BMap.Polygon(self.gridOption.editGrid.pointArray, {
|
|
|
|
|
strokeColor: self.gridOption.const.STROKE_COLOR,
|
|
|
|
|
strokeWeight: self.gridOption.const.STROKE_WEIGHT_FOCUS,
|
|
|
|
|
strokeOpacity: self.gridOption.const.STROKE_OPACITY,
|
|
|
|
|
fillColor: self.gridOption.const.FILL_COLOR,
|
|
|
|
|
fillOpacity: self.gridOption.const.FILL_OPACITY,
|
|
|
|
|
});
|
|
|
|
|
polygon.id = self.gridOption.const.GRID_ID_PREFIX + new Date().getTime();
|
|
|
|
|
self.initPolygonEvent(polygon);
|
|
|
|
|
return polygon;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 绘制网格
|
|
|
|
|
function drawPolygon() {
|
|
|
|
|
if (!self.gridOption.editGrid.polygon) {
|
|
|
|
|
self.gridOption.editGrid.polygon = getPolygon();
|
|
|
|
|
self.map.addOverlay(self.gridOption.editGrid.polygon);
|
|
|
|
|
// 标记开始点
|
|
|
|
|
self.setStartMarker(self.gridOption.editGrid.pointArray[0]);
|
|
|
|
|
} else {
|
|
|
|
|
self.removeStartMarker();
|
|
|
|
|
self.gridOption.editGrid.polygon.setPath(self.gridOption.editGrid.pointArray);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 地图双击事件
|
|
|
|
|
self.map.addEventListener('dblclick', function (event) {
|
|
|
|
|
if (!self.gridOption.isEdit) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (self.gridOption.editGrid.isEdit) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 隐藏结束编辑按钮
|
|
|
|
|
self.hideStopOptionBtn();
|
|
|
|
|
var point = new BMap.Point(event.point.lng, event.point.lat);
|
|
|
|
|
self.gridOption.editGrid.pointArray.push(point);
|
|
|
|
|
drawPolygon();
|
|
|
|
|
if (self.gridOption.editGrid.pointArray.length >= 3) {
|
|
|
|
|
self.map.setCenter(point);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 清空地图，编辑的时候，不能清空
|
|
|
|
|
BaiduMap.prototype.clearMap = function () {
|
|
|
|
|
if (this.gridOption.isEdit) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (this.gridOption.editGrid.isEdit) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.map.clearOverlays();
|
|
|
|
|
}
|
|
|
|
|
// 设置网格，编辑的时候，不能设置网格
|
|
|
|
|
BaiduMap.prototype.setGridArray = function (gridArray) {
|
|
|
|
|
var self = this;
|
|
|
|
|
if (self.gridOption.isEdit) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (self.gridOption.editGrid.isEdit) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setPolygon(grid) {
|
|
|
|
|
var polygon = new BMap.Polygon(grid.pointArray, {
|
|
|
|
|
strokeColor: self.gridOption.const.STROKE_COLOR,
|
|
|
|
|
strokeWeight: self.gridOption.const.STROKE_WEIGHT,
|
|
|
|
|
strokeOpacity: self.gridOption.const.STROKE_OPACITY,
|
|
|
|
|
fillColor: grid.fillColor,
|
|
|
|
|
fillOpacity: self.gridOption.const.FILL_OPACITY,
|
|
|
|
|
});
|
|
|
|
|
polygon.id = grid.id;
|
|
|
|
|
self.initPolygonEvent(polygon);
|
|
|
|
|
self.map.addOverlay(polygon);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
self.gridOption.gridArray = [];
|
|
|
|
|
if (!gridArray || gridArray.length == 0) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 清空原网格
|
|
|
|
|
for (var i = 0, item; item = gridArray[i++];) {
|
|
|
|
|
if (!item.pointArray || item.pointArray.length == 0) {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
var pointArray = [];
|
|
|
|
|
for (var j = 0, jItem; jItem = item.pointArray[j++];) {
|
|
|
|
|
pointArray.push(new BaiduMap.Point(jItem.lng, jItem.lat));
|
|
|
|
|
}
|
|
|
|
|
var grid = new BaiduMap.Grid(item.gridId, pointArray);
|
|
|
|
|
grid.setFillColor(item.fillColor);
|
|
|
|
|
self.gridOption.gridArray.push(grid);
|
|
|
|
|
setPolygon(grid);
|
|
|
|
|
}
|
2021-10-19 15:18:05 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
BaiduMap.prototype.markWithUserAvatarWithTitle = function(map, point, avatar, title) {
|
|
|
|
|
|
|
|
|
|
function UserAvatar(map, point, avatar, title) {
|
|
|
|
|
this.baiduMap = map;
|
|
|
|
|
this.point = point;
|
|
|
|
|
this.avatar = avatar;
|
|
|
|
|
this.title = title;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
UserAvatar.prototype = new BMap.Overlay();
|
|
|
|
|
UserAvatar.prototype.initialize = function () {
|
|
|
|
|
var self = this;
|
|
|
|
|
var userAvatarBox = this.userAvatarBox = document.createElement('div');
|
|
|
|
|
userAvatarBox.style.position = 'absolute';
|
|
|
|
|
userAvatarBox.style.zIndex = BMap.Overlay.getZIndex(this.point.lat);
|
|
|
|
|
userAvatarBox.style.backgroundColor = 'green';
|
|
|
|
|
userAvatarBox.style.border = '1px solid white';
|
|
|
|
|
userAvatarBox.style.width = '50px';
|
|
|
|
|
userAvatarBox.style.height = '50px';
|
|
|
|
|
userAvatarBox.style.borderRadius = '25px 25px 0 0';
|
|
|
|
|
|
|
|
|
|
var userAvatar = this.userAvatar = document.createElement('img');
|
|
|
|
|
userAvatar.style.width = '40px';
|
|
|
|
|
userAvatar.style.height = '40px';
|
|
|
|
|
userAvatar.style.margin = '4px';
|
|
|
|
|
userAvatar.style.backgroundColor = 'white';
|
|
|
|
|
userAvatar.style.borderRadius = '20px';
|
|
|
|
|
if (avatar == '') {
|
|
|
|
|
userAvatar.setAttribute('src', 'assets/images/profile-photo.jpg');
|
|
|
|
|
} else {
|
|
|
|
|
userAvatar.setAttribute('src', 'route/file/downloadfile/true/' + avatar);
|
|
|
|
|
}
|
|
|
|
|
userAvatarBox.appendChild(userAvatar);
|
|
|
|
|
|
|
|
|
|
var userTitle = this.userTitle = document.createElement('div');
|
|
|
|
|
userTitle.style.position = 'absolute';
|
|
|
|
|
userTitle.style.width = '160px';
|
|
|
|
|
userTitle.style.padding = '2px';
|
|
|
|
|
userTitle.style.borderRadius = '13px';
|
|
|
|
|
userTitle.style.backgroundColor = 'green';
|
|
|
|
|
userTitle.style.color = 'white';
|
|
|
|
|
userTitle.style.border = '1px solid white';
|
|
|
|
|
userTitle.style.textAlign = 'center';
|
|
|
|
|
userTitle.style.top = '48px';
|
|
|
|
|
userTitle.style.left = '-60px';
|
|
|
|
|
userTitle.appendChild(document.createTextNode(this.title));
|
|
|
|
|
userAvatarBox.appendChild(userTitle);
|
|
|
|
|
|
|
|
|
|
var arrow = this.arrow = document.createElement("div");
|
|
|
|
|
arrow.setAttribute('class', 'arrow');
|
|
|
|
|
arrow.style.position = 'absolute';
|
|
|
|
|
arrow.style.width = '0';
|
|
|
|
|
arrow.style.height = '0';
|
|
|
|
|
arrow.style.borderWidth = '10px';
|
|
|
|
|
arrow.style.borderStyle = 'solid';
|
|
|
|
|
arrow.style.borderColor = 'green transparent transparent transparent';
|
|
|
|
|
arrow.style.top = '72px';
|
|
|
|
|
arrow.style.left = '14px';
|
|
|
|
|
arrow.style.overflow = 'hidden';
|
|
|
|
|
userAvatarBox.appendChild(arrow);
|
|
|
|
|
|
|
|
|
|
map.getPanes().labelPane.appendChild(userAvatarBox);
|
|
|
|
|
return userAvatarBox;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
UserAvatar.prototype.draw = function () {
|
|
|
|
|
var pixel = this.baiduMap.pointToOverlayPixel(this.point);
|
|
|
|
|
this.userAvatarBox.style.left = (pixel.x - 26) + 'px';
|
|
|
|
|
this.userAvatarBox.style.top = (pixel.y - 82) + 'px';
|
|
|
|
|
this.userTitle.innerHTML = this.title;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
UserAvatar.prototype.setPosition = function (point, time) {
|
|
|
|
|
this.point = point;
|
|
|
|
|
this.title = time;
|
|
|
|
|
this.draw();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return new UserAvatar(map, point, avatar, title);
|
2021-06-15 18:23:48 +08:00
|
|
|
}
|
