调整地图模块代码
This commit is contained in:
parent
53a3ef2116
commit
3e2cd1b36a
@ -23,16 +23,6 @@ public class GridDTO extends GridRelationDTO {
|
||||
private String fillColor;
|
||||
@ApiModelProperty(name = "gridName", value = "网格名称")
|
||||
private String gridName;
|
||||
@ApiModelProperty(name = "bGId", value = "单元网格标识码")
|
||||
private String bGId;
|
||||
@ApiModelProperty(name = "bGSqua", value = "面积")
|
||||
private Integer bGSqua;
|
||||
@ApiModelProperty(name = "oRDate", value = "单元网格划分的初始时间")
|
||||
private String oRDate;
|
||||
@ApiModelProperty(name = "cHDate", value = "单元网格发生变更或不再使用的时间")
|
||||
private String cHDate;
|
||||
@ApiModelProperty(name = "note", value = "备注")
|
||||
private String note;
|
||||
@ApiModelProperty(name = "relationIdArray", value = "关联ID列表")
|
||||
private List<String> relationIdArray;
|
||||
@ApiModelProperty(name = "pointArray", value = "网格点列表")
|
||||
|
||||
@ -22,7 +22,7 @@ import java.util.Map;
|
||||
public interface IGridService {
|
||||
|
||||
/**
|
||||
* 保存网格并返回ID
|
||||
* 保存网格
|
||||
*
|
||||
* @param gridVO
|
||||
* @return
|
||||
@ -30,6 +30,15 @@ public interface IGridService {
|
||||
*/
|
||||
void save(GridVO gridVO) throws Exception;
|
||||
|
||||
/**
|
||||
* 保存网格并返回ID
|
||||
*
|
||||
* @param gridVO
|
||||
* @return
|
||||
* @throws Exception
|
||||
*/
|
||||
String saveAndReturnId(GridVO gridVO) throws Exception;
|
||||
|
||||
|
||||
/**
|
||||
* 删除网格
|
||||
|
||||
@ -45,6 +45,11 @@ public class GridServiceImpl extends DefaultBaseService implements IGridService
|
||||
|
||||
@Override
|
||||
public void save(GridVO gridVO) throws Exception {
|
||||
saveAndReturnId(gridVO);
|
||||
}
|
||||
|
||||
@Override
|
||||
public String saveAndReturnId(GridVO gridVO) throws Exception {
|
||||
String gridId = UUIDUtil.getUUID();
|
||||
List<String> relationIdArray = gridVO.getRelationIdArray();
|
||||
List<GridPointVO> pointArray = gridVO.getPointArray();
|
||||
@ -58,6 +63,7 @@ public class GridServiceImpl extends DefaultBaseService implements IGridService
|
||||
// 保存拓展属性
|
||||
gridRelationService.save(gridId, relationIdArray);
|
||||
gridPointService.save(gridId, pointArray);
|
||||
return gridId;
|
||||
}
|
||||
|
||||
@Override
|
||||
|
||||
@ -8,25 +8,15 @@
|
||||
<id column="grid_id" property="gridId"/>
|
||||
<result column="grid_name" property="gridName"/>
|
||||
<result column="fill_color" property="fillColor"/>
|
||||
<result column="b_g_id" property="bGId"/>
|
||||
<result column="b_g_squa" property="bGSqua"/>
|
||||
<result column="o_r_date" property="oRDate"/>
|
||||
<result column="c_h_date" property="cHDate"/>
|
||||
<result column="note" property="note"/>
|
||||
<result column="relation_id" property="relationId"/>
|
||||
</resultMap>
|
||||
|
||||
<!-- 建表 -->
|
||||
<update id="createTable">
|
||||
CREATE TABLE `map_grid` (
|
||||
CREATE TABLE IF NOT EXISTS `map_grid` (
|
||||
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
|
||||
`grid_id` char(36) NOT NULL,
|
||||
`grid_name` varchar(255) NOT NULL,
|
||||
`b_g_id` char(15) NOT NULL COMMENT '单元网格标识码',
|
||||
`b_g_squa` int(11) NOT NULL COMMENT '面积',
|
||||
`o_r_date` date NOT NULL COMMENT '单元网格划分的初始时间',
|
||||
`c_h_date` date COMMENT '单元网格发生变更或不再使用的时间',
|
||||
`note` varchar(100) '备注',
|
||||
`fill_color` varchar(7) NOT NULL DEFAULT '#000000' COMMENT '颜色',
|
||||
`gmt_create` datetime DEFAULT NULL,
|
||||
`creator` char(36) DEFAULT NULL,
|
||||
@ -43,11 +33,6 @@
|
||||
INSERT INTO map_grid(
|
||||
grid_id,
|
||||
grid_name,
|
||||
b_g_id,
|
||||
b_g_squa,
|
||||
o_r_date,
|
||||
c_h_date,
|
||||
note,
|
||||
fill_color,
|
||||
gmt_create,
|
||||
creator,
|
||||
@ -57,11 +42,6 @@
|
||||
) VALUES(
|
||||
#{gridId},
|
||||
#{gridName},
|
||||
#{bGId},
|
||||
#{bGSqua},
|
||||
#{oRDate},
|
||||
#{cHDate},
|
||||
#{note},
|
||||
#{fillColor},
|
||||
#{gmtCreate},
|
||||
#{creator},
|
||||
@ -92,11 +72,6 @@
|
||||
SELECT
|
||||
t1.grid_id,
|
||||
t1.fill_color,
|
||||
t1.b_g_id,
|
||||
t1.b_g_squa,
|
||||
t1.o_r_date,
|
||||
t1.c_h_date,
|
||||
t1.note,
|
||||
t1.grid_name
|
||||
FROM
|
||||
map_grid t1
|
||||
@ -116,11 +91,6 @@
|
||||
SELECT
|
||||
t1.grid_id,
|
||||
t1.fill_color,
|
||||
t1.b_g_id,
|
||||
t1.b_g_squa,
|
||||
t1.o_r_date,
|
||||
t1.c_h_date,
|
||||
t1.note,
|
||||
t1.grid_name
|
||||
FROM
|
||||
map_grid t1
|
||||
@ -136,10 +106,6 @@
|
||||
GROUP BY
|
||||
t1.grid_id,
|
||||
t1.fill_color,
|
||||
t1.b_g_id,
|
||||
t1.b_g_squa,
|
||||
t1.o_r_date,
|
||||
t1.c_h_date,
|
||||
t1.grid_name
|
||||
</select>
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
<!-- 建表 -->
|
||||
<update id="createTable">
|
||||
CREATE TABLE `map_grid_point` (
|
||||
CREATE TABLE IF NOT EXISTS `map_grid_point` (
|
||||
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
|
||||
`grid_id` char(36) NOT NULL,
|
||||
`lng` varchar(255) DEFAULT NULL COMMENT '点经度',
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
<!-- 建表 -->
|
||||
<update id="createTable">
|
||||
CREATE TABLE `map_grid_relation` (
|
||||
CREATE TABLE IF NOT EXISTS `map_grid_relation` (
|
||||
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
|
||||
`relation_id` char(36) NOT NULL COMMENT '关联ID',
|
||||
`grid_id` char(36) NOT NULL COMMENT '网格ID',
|
||||
|
||||
913
module-map/src/main/resources/static/baidu-map/baidu-map-1.0.0.min.js
vendored
Normal file
913
module-map/src/main/resources/static/baidu-map/baidu-map-1.0.0.min.js
vendored
Normal file
@ -0,0 +1,913 @@
|
||||
// 事件设置
|
||||
var mapConfig = {
|
||||
// 网格开始编辑回调事件
|
||||
onGridStartEdit: function (baiduMap) {
|
||||
},
|
||||
// 网格结束编辑回调事件
|
||||
onGridStopEdit: function (gridArray) {
|
||||
}
|
||||
}
|
||||
// BMap
|
||||
// BMapGL
|
||||
|
||||
function BaiduMap(mapId, mapConfig) {
|
||||
this.map = new BMap.Map(mapId, {enableMapClick: false});
|
||||
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));
|
||||
label.setStyle({
|
||||
fontSize: size + 'px'
|
||||
})
|
||||
}
|
||||
}
|
||||
// 获得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();
|
||||
if (zoom < 13) {
|
||||
self.setLabelFontSize(0);
|
||||
} else if (zoom < 15) {
|
||||
self.setLabelFontSize(12);
|
||||
} else if (zoom < 16) {
|
||||
self.setLabelFontSize(14);
|
||||
} else if (zoom < 17) {
|
||||
self.setLabelFontSize(16);
|
||||
} else {
|
||||
self.setLabelFontSize(18);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 通过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);
|
||||
}
|
||||
}
|
||||
905
module-map/src/main/resources/static/baidu-map/baidu-map-1.0.1.min.js
vendored
Normal file
905
module-map/src/main/resources/static/baidu-map/baidu-map-1.0.1.min.js
vendored
Normal file
@ -0,0 +1,905 @@
|
||||
(function () {
|
||||
// 地图配置
|
||||
var mapConfig = {
|
||||
// 自定义的按钮列表
|
||||
rightClickBtns: [],
|
||||
// 网格开始编辑回调事件
|
||||
onGridStartEdit: function (baiduMap) {},
|
||||
// 网格结束编辑回调事件
|
||||
onGridStopEdit: function (gridArray) {},
|
||||
onGridClick: function (grid) {}
|
||||
}
|
||||
// BMap
|
||||
// BMapGL
|
||||
function BaiduMap(mapId, mapConfig) {
|
||||
this.map = new BMap.Map(mapId, {enableMapClick: false});
|
||||
this.mapId = mapId;
|
||||
this.defaultLng = 116.280190;
|
||||
this.defaultLat = 40.049191;
|
||||
this.defaultZoom = 19;
|
||||
this.startMarker = null,
|
||||
// 标签数组
|
||||
this.labelArray = [];
|
||||
this.mapConfig = mapConfig;
|
||||
}
|
||||
|
||||
// 关联
|
||||
BaiduMap.Relation = function (id, name) {
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
}
|
||||
// 网格信息
|
||||
BaiduMap.Grid = function (id, pointArray) {
|
||||
this.id = id;
|
||||
this.fillColor = '#000000';
|
||||
this.relationArray = [];
|
||||
this.gridName = null;
|
||||
this.pointArray = pointArray;
|
||||
this.setFillColor = function (fillColor) {
|
||||
this.fillColor = fillColor;
|
||||
}
|
||||
this.setRelationArray = function (relationArray) {
|
||||
this.relationArray = relationArray;
|
||||
}
|
||||
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.RightButton = function (id, name, color, callback, display) {
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
this.color = color ? color : '#1E9FFF';
|
||||
this.callback = callback;
|
||||
this.display = display ? display : 'block';
|
||||
|
||||
this.setId = function (id) {
|
||||
this.id = id;
|
||||
}
|
||||
this.setName = function (name) {
|
||||
this.name = name;
|
||||
}
|
||||
this.setColor = function (color) {
|
||||
this.color = color;
|
||||
}
|
||||
this.setCallback = function (callback) {
|
||||
this.callback = callback;
|
||||
}
|
||||
this.setDisplay = function (display) {
|
||||
this.display = display;
|
||||
}
|
||||
}
|
||||
|
||||
// 网格操作
|
||||
var 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: 4,
|
||||
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: [],
|
||||
relationArray: []
|
||||
},
|
||||
gridArray: []
|
||||
};
|
||||
var colorOption = {
|
||||
edit: {r: 0, g: 0, b: 0},
|
||||
START_MARKER_ICON: 'images/marker.png',
|
||||
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',
|
||||
},
|
||||
color: {
|
||||
GREEN: '#009688',
|
||||
BLUE: '#1E9FFF',
|
||||
ORANGE: '#FFB800',
|
||||
RED: '#FF5722',
|
||||
CYAN: '#2F4056',
|
||||
BLACK: '#393D49'
|
||||
}
|
||||
};
|
||||
// 右键按钮数组
|
||||
var rightClickButtionArray = [
|
||||
// 保存按钮
|
||||
new BaiduMap.RightButton(gridOption.const.SAVE_BTN_ID, '保存', colorOption.color.BLUE, function (event) {
|
||||
var self = this.map;
|
||||
// 更新数组
|
||||
var pointArray = self.getGridPathPoint();
|
||||
var relationArray = gridOption.editGrid.relationArray;
|
||||
console.log(relationArray);
|
||||
var grid = self.getGridById(gridOption.editGrid.polygon.id);
|
||||
if(!grid) {
|
||||
grid = new BaiduMap.Grid(gridOption.editGrid.polygon.id, pointArray);
|
||||
}
|
||||
grid.setFillColor(gridOption.editGrid.polygon.getFillColor());
|
||||
grid.setRelationArray(relationArray);
|
||||
self.saveGrid(grid);
|
||||
// 设置当前编辑对象
|
||||
gridOption.editGrid.polygon.setStrokeWeight(gridOption.const.STROKE_WEIGHT);
|
||||
document.getElementById(gridOption.const.STOP_EDIT_BTN_ID).style.display = 'none';
|
||||
document.getElementById(gridOption.const.EDIT_BTN_ID).style.display = 'block';
|
||||
self.clearEditGrid();
|
||||
self.showStopOptionBtn();
|
||||
}),
|
||||
// 删除按钮
|
||||
new BaiduMap.RightButton(gridOption.const.REMOVE_BTN_ID, '删除', colorOption.color.RED, function (event) {
|
||||
var self = this.map;
|
||||
self.removeGridById(gridOption.editGrid.polygon.id);
|
||||
self.map.removeOverlay(gridOption.editGrid.polygon);
|
||||
self.clearEditGrid();
|
||||
self.showStopOptionBtn();
|
||||
}),
|
||||
// 编辑按钮
|
||||
new BaiduMap.RightButton(gridOption.const.EDIT_BTN_ID, '编辑', colorOption.color.GREEN, function (event) {
|
||||
// 开启编辑
|
||||
var self = this.map;
|
||||
gridOption.editGrid.polygon.enableEditing();
|
||||
gridOption.editGrid.isEdit = true;
|
||||
self.hideRightOptionBox();
|
||||
this.style.display = 'none';
|
||||
document.getElementById(gridOption.const.STOP_EDIT_BTN_ID).style.display = 'block';
|
||||
}),
|
||||
// 选择颜色按钮
|
||||
new BaiduMap.RightButton(gridOption.const.COLOR_CHOICE_BTN_ID, '选择颜色', colorOption.color.ORANGE, function (event) {
|
||||
var self = this.map;
|
||||
self.hideRightOptionBox();
|
||||
self.showColorOptionBox();
|
||||
}),
|
||||
// 结束编辑按钮
|
||||
new BaiduMap.RightButton(gridOption.const.STOP_EDIT_BTN_ID, '结束编辑', colorOption.color.GREEN, function (event) {
|
||||
var self = this.map;
|
||||
// 结束编辑
|
||||
gridOption.editGrid.polygon.disableEditing();
|
||||
gridOption.editGrid.isEdit = false;
|
||||
// 更新节点
|
||||
gridOption.editGrid.pointArray = self.getGridPathPoint();
|
||||
self.hideRightOptionBox();
|
||||
this.style.display = 'none';
|
||||
document.getElementById(gridOption.const.EDIT_BTN_ID).style.display = 'block';
|
||||
}, 'none'),
|
||||
];
|
||||
// 颜色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(colorOption.const.COLOR_SHOW_BOX_ID);
|
||||
var hexColor = self.colorRGBToHex(colorOption.edit.r, colorOption.edit.g, colorOption.edit.b);
|
||||
colorShowBox.style.backgroundColor = hexColor;
|
||||
gridOption.editGrid.polygon.setFillColor(hexColor);
|
||||
}
|
||||
// 设置颜色Input值
|
||||
BaiduMap.prototype.setColorInputValue = function (color) {
|
||||
var self = this;
|
||||
colorOption.edit = self.colorHexToRGB(color);
|
||||
document.getElementById(colorOption.const.COLOR_R).value = colorOption.edit.r;
|
||||
document.getElementById(colorOption.const.COLOR_G).value = colorOption.edit.g;
|
||||
document.getElementById(colorOption.const.COLOR_B).value = colorOption.edit.b;
|
||||
var colorShowBox = document.getElementById(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) {
|
||||
colorOption.edit = {
|
||||
r: document.getElementById(colorOption.const.COLOR_R).value,
|
||||
g: document.getElementById(colorOption.const.COLOR_G).value,
|
||||
b: document.getElementById(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(colorOption.const.COLOR_R, '红', colorOption.edit.r);
|
||||
firstColorInput.style.marginTop = '2px';
|
||||
colorInputBox.appendChild(firstColorInput);
|
||||
colorInputBox.appendChild(getColorInput(colorOption.const.COLOR_G, '绿', colorOption.edit.g));
|
||||
colorInputBox.appendChild(getColorInput(colorOption.const.COLOR_B, '蓝', colorOption.edit.b));
|
||||
return colorInputBox;
|
||||
}
|
||||
|
||||
// 颜色BOX
|
||||
function getColorBox(colorOptionBox) {
|
||||
var colorBox = document.createElement('div');
|
||||
colorBox.setAttribute('id', 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(colorOption.edit.r, colorOption.edit.g, colorOption.edit.b);
|
||||
return colorBox;
|
||||
}
|
||||
|
||||
var colorOptionBox = document.createElement('div');
|
||||
colorOptionBox.setAttribute('id', 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(colorOption.const.COLOR_BOX_ID);
|
||||
if (!colorBox) {
|
||||
return;
|
||||
}
|
||||
colorBox.style.display = 'inline-table';
|
||||
}
|
||||
BaiduMap.prototype.hideColorOptionBox = function () {
|
||||
var colorBox = document.getElementById(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));
|
||||
label.setStyle({
|
||||
fontSize: size + 'px'
|
||||
})
|
||||
}
|
||||
}
|
||||
// 获得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 (gridOption.isEdit) {
|
||||
this.setDefaultCursor('pointer');
|
||||
} else {
|
||||
this.setDefaultCursor('grab');
|
||||
}
|
||||
});
|
||||
// 缩放结束
|
||||
self.map.addEventListener('zoomend', function (event) {
|
||||
var zoom = this.getZoom();
|
||||
if (zoom < 13) {
|
||||
self.setLabelFontSize(0);
|
||||
} else if (zoom < 15) {
|
||||
self.setLabelFontSize(12);
|
||||
} else if (zoom < 16) {
|
||||
self.setLabelFontSize(14);
|
||||
} else if (zoom < 17) {
|
||||
self.setLabelFontSize(16);
|
||||
} else {
|
||||
self.setLabelFontSize(18);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 通过ID删除网格
|
||||
BaiduMap.prototype.removeGridById = function (removeId) {
|
||||
var self = this;
|
||||
for (var i = 0; i < gridOption.gridArray.length; i++) {
|
||||
var grid = gridOption.gridArray[i];
|
||||
if (grid.id == removeId) {
|
||||
gridOption.gridArray.splice(i, 1);
|
||||
i--;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 保存网格
|
||||
BaiduMap.prototype.saveGrid = function (saveGrid) {
|
||||
var self = this;
|
||||
for (var i = 0; i < gridOption.gridArray.length; i++) {
|
||||
var grid = gridOption.gridArray[i];
|
||||
if (grid.id == saveGrid.id) {
|
||||
grid.pointArray = saveGrid.pointArray;
|
||||
grid.setFillColor(saveGrid.fillColor);
|
||||
return;
|
||||
}
|
||||
}
|
||||
gridOption.gridArray.push(saveGrid);
|
||||
}
|
||||
// 通过ID获取网格
|
||||
BaiduMap.prototype.getGridById = function (gridId) {
|
||||
var self = this;
|
||||
for (var i = 0; i < gridOption.gridArray.length; i++) {
|
||||
var grid = 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 : colorOption.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(gridOption.const.CANCEL_BTN_ID).style.display = 'none';
|
||||
}
|
||||
BaiduMap.prototype.showStopOptionBtn = function () {
|
||||
document.getElementById(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', 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, 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');
|
||||
gridOption.isEdit = true;
|
||||
document.getElementById(gridOption.const.START_BTN_ID).style.display = 'none';
|
||||
self.showStopOptionBtn();
|
||||
});
|
||||
return startOptionBtn;
|
||||
}
|
||||
|
||||
// 结束编辑按钮
|
||||
function getCancelOptionBtn() {
|
||||
var cancelOptionBtn = document.createElement('a');
|
||||
self.setABtnElementAttribute(cancelOptionBtn, gridOption.const.CANCEL_BTN_ID, '结束编辑', colorOption.color.RED);
|
||||
cancelOptionBtn.style.display = 'none';
|
||||
cancelOptionBtn.addEventListener('click', function (event) {
|
||||
// 执行网格结束编辑回调
|
||||
if (self.mapConfig && self.mapConfig.onGridStopEdit) {
|
||||
var result = self.mapConfig.onGridStopEdit(gridOption.gridArray);
|
||||
if (result == false) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
self.map.setDefaultCursor('grab');
|
||||
gridOption.isEdit = false;
|
||||
self.hideStopOptionBtn();
|
||||
document.getElementById(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.clearEditGrid = function () {
|
||||
var self = this;
|
||||
gridOption.editGrid.isEdit = false;
|
||||
gridOption.editGrid.polygon.disableEditing();
|
||||
gridOption.editGrid.polygon = null;
|
||||
gridOption.editGrid.pointArray = [];
|
||||
gridOption.editGrid.relationArray = [];
|
||||
self.hideRightOptionBox();
|
||||
}
|
||||
// 获取网格点
|
||||
BaiduMap.prototype.getGridPathPoint = function () {
|
||||
var self = this;
|
||||
return self.getGridPathPointByPolygon(gridOption.editGrid.polygon);
|
||||
}
|
||||
// 网格右键菜单
|
||||
BaiduMap.prototype.getGridOptionRightBox = function () {
|
||||
var self = this;
|
||||
var showBtnSize = 0;
|
||||
// 初始化按钮组
|
||||
function initGridOptionBtnGroup(gridOptionRightBox) {
|
||||
// 读取按钮数组
|
||||
var rightClickButtonArray = rightClickButtionArray;
|
||||
for (var i = 0, item; item = rightClickButtonArray[i++];) {
|
||||
var optionBtn = document.createElement('a');
|
||||
self.setABtnElementAttribute(optionBtn, item.id, item.name, item.color);
|
||||
optionBtn.map = self;
|
||||
optionBtn.style.display = item.display;
|
||||
if(item.display != 'none') {
|
||||
showBtnSize += 1;
|
||||
}
|
||||
optionBtn.addEventListener('click', item.callback);
|
||||
gridOptionRightBox.appendChild(optionBtn);
|
||||
}
|
||||
// 自定义的右键按钮
|
||||
var rightClickBtns = self.mapConfig.rightClickBtns;
|
||||
if (rightClickBtns && rightClickBtns.length > 0) {
|
||||
for (var i = 0, item; item = rightClickBtns[i++];) {
|
||||
var optionBtn = document.createElement('a');
|
||||
self.setABtnElementAttribute(optionBtn, item.id, item.name, item.color);
|
||||
optionBtn.map = self;
|
||||
optionBtn.style.display = item.display;
|
||||
if(item.display != 'none') {
|
||||
showBtnSize += 1;
|
||||
}
|
||||
optionBtn.addEventListener('click', item.callback);
|
||||
gridOptionRightBox.appendChild(optionBtn);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var gridOptionRightBox = document.createElement('div');
|
||||
gridOptionRightBox.setAttribute('id', gridOption.const.RIGHT_BOX_ID);
|
||||
gridOptionRightBox.style.backgroundColor = '#FFFFFF';
|
||||
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);
|
||||
gridOption.const.RIGHT_BOX_HEIGHT = showBtnSize == 0 ? gridOption.const.RIGHT_BOX_HEIGHT : parseInt(23 * showBtnSize);
|
||||
gridOptionRightBox.style.width = gridOption.const.RIGHT_BOX_WIDTH + 'px';
|
||||
gridOptionRightBox.style.height = gridOption.const.RIGHT_BOX_HEIGHT + 'px';
|
||||
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: gridOption.const.STROKE_BACKGROUND_COLOR,
|
||||
strokeWeight: gridOption.const.STROKE_BACKGROUND_WEIGHT,
|
||||
strokeOpacity: gridOption.const.STROKE_BACKGROUND_OPACITY,
|
||||
fillOpacity: gridOption.const.FILL_BACKGROUND_OPACITY,
|
||||
});
|
||||
if (backgroundGrid.fillColor) {
|
||||
polygon.setFillColor(backgroundGrid.fillColor);
|
||||
} else {
|
||||
polygon.setFillColor(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: gridOption.const.LABEL_FONT_SIZE + 'px'
|
||||
});
|
||||
label.setOffset(new BMap.Size(-backgroundGrid.label.length * gridOption.const.LABEL_FONT_SIZE / 2, -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(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 (gridOption.editGrid.polygon) {
|
||||
// 更新按钮
|
||||
document.getElementById(gridOption.const.STOP_EDIT_BTN_ID).style.display = 'none';
|
||||
document.getElementById(gridOption.const.EDIT_BTN_ID).style.display = 'block';
|
||||
// 保存原编辑节点
|
||||
gridOption.editGrid.polygon.setStrokeWeight(gridOption.const.STROKE_WEIGHT);
|
||||
gridOption.editGrid.polygon.disableEditing();
|
||||
gridOption.editGrid.isEdit = false;
|
||||
// 如果节点存在，就更新，如果节点不存在就新增
|
||||
var grid = self.getGridById(gridOption.editGrid.polygon.id);
|
||||
if(!grid) {
|
||||
grid = new BaiduMap.Grid(gridOption.editGrid.polygon.id, self.getGridPathPointByPolygon(gridOption.editGrid.polygon));
|
||||
self.saveGrid(grid);
|
||||
}
|
||||
grid.setRelationArray(gridOption.editGrid.relationArray);
|
||||
grid.setFillColor(gridOption.editGrid.polygon.getFillColor());
|
||||
self.saveGrid(grid);
|
||||
}
|
||||
// 添加新的编辑网格
|
||||
// 标记当前网格选中状态
|
||||
thisPolygon.setStrokeWeight(gridOption.const.STROKE_WEIGHT_FOCUS);
|
||||
// 标记当前网格
|
||||
gridOption.editGrid.polygon = thisPolygon;
|
||||
// 设置网格颜色
|
||||
self.setColorInputValue(gridOption.editGrid.polygon.getFillColor());
|
||||
// 标记当前网格的point数组
|
||||
var savedGrid = self.getGridById(thisPolygon.id);
|
||||
if (savedGrid) {
|
||||
gridOption.editGrid.pointArray = savedGrid.pointArray;
|
||||
gridOption.editGrid.relationArray = savedGrid.relationArray;
|
||||
}
|
||||
}
|
||||
|
||||
// 网格点击事件
|
||||
polygon.addEventListener('click', function (event) {
|
||||
// 未开启编辑状态不允许聚焦
|
||||
if (!gridOption.isEdit) {
|
||||
return;
|
||||
}
|
||||
// 有正在编辑的网格不允许聚焦
|
||||
if (gridOption.editGrid.isEdit) {
|
||||
return;
|
||||
}
|
||||
focusPolygon(this);
|
||||
});
|
||||
// 网格右击事件
|
||||
polygon.addEventListener('rightclick', function (event) {
|
||||
// 未开启编辑状态，不允许显示右键菜单
|
||||
if (!gridOption.isEdit) {
|
||||
return;
|
||||
}
|
||||
// 当前编辑网格不存在，不允许显示右键菜单
|
||||
if (!gridOption.editGrid.polygon) {
|
||||
return;
|
||||
}
|
||||
// 已经编辑，网格不一样，不允许显示右键菜单
|
||||
if (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 >= gridOption.const.RIGHT_BOX_WIDTH ? clickX : clickX - gridOption.const.RIGHT_BOX_WIDTH;
|
||||
var rightOptionY = mapHeight - clickY >= gridOption.const.RIGHT_BOX_HEIGHT ? clickY : clickY - gridOption.const.RIGHT_BOX_HEIGHT;
|
||||
// 显示右键菜单
|
||||
var gridOptionRightBox = document.getElementById(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(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(gridOption.editGrid.pointArray, {
|
||||
strokeColor: gridOption.const.STROKE_COLOR,
|
||||
strokeWeight: gridOption.const.STROKE_WEIGHT_FOCUS,
|
||||
strokeOpacity: gridOption.const.STROKE_OPACITY,
|
||||
fillColor: gridOption.const.FILL_COLOR,
|
||||
fillOpacity: gridOption.const.FILL_OPACITY,
|
||||
});
|
||||
polygon.id = gridOption.const.GRID_ID_PREFIX + new Date().getTime();
|
||||
self.initPolygonEvent(polygon);
|
||||
return polygon;
|
||||
}
|
||||
|
||||
// 绘制网格
|
||||
function drawPolygon() {
|
||||
if (!gridOption.editGrid.polygon) {
|
||||
gridOption.editGrid.polygon = getPolygon();
|
||||
self.map.addOverlay(gridOption.editGrid.polygon);
|
||||
// 标记开始点
|
||||
self.setStartMarker(gridOption.editGrid.pointArray[0]);
|
||||
} else {
|
||||
self.removeStartMarker();
|
||||
gridOption.editGrid.polygon.setPath(gridOption.editGrid.pointArray);
|
||||
}
|
||||
}
|
||||
|
||||
// 地图双击事件
|
||||
self.map.addEventListener('dblclick', function (event) {
|
||||
if (!gridOption.isEdit) {
|
||||
return;
|
||||
}
|
||||
if (gridOption.editGrid.isEdit) {
|
||||
return;
|
||||
}
|
||||
// 隐藏结束编辑按钮
|
||||
self.hideStopOptionBtn();
|
||||
var point = new BMap.Point(event.point.lng, event.point.lat);
|
||||
gridOption.editGrid.pointArray.push(point);
|
||||
drawPolygon();
|
||||
if (gridOption.editGrid.pointArray.length >= 3) {
|
||||
self.map.setCenter(point);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 清空地图，编辑的时候，不能清空
|
||||
BaiduMap.prototype.clearMap = function () {
|
||||
if (gridOption.isEdit) {
|
||||
return;
|
||||
}
|
||||
if (gridOption.editGrid.isEdit) {
|
||||
return;
|
||||
}
|
||||
this.map.clearOverlays();
|
||||
}
|
||||
BaiduMap.prototype.getEditGrid = function() {
|
||||
return gridOption.editGrid;
|
||||
}
|
||||
// 设置网格，编辑的时候，不能设置网格
|
||||
BaiduMap.prototype.setGridArray = function (gridArray) {
|
||||
var self = this;
|
||||
if (gridOption.isEdit) {
|
||||
return;
|
||||
}
|
||||
if (gridOption.editGrid.isEdit) {
|
||||
return;
|
||||
}
|
||||
|
||||
function setPolygon(grid) {
|
||||
var polygon = new BMap.Polygon(grid.pointArray, {
|
||||
strokeColor: gridOption.const.STROKE_COLOR,
|
||||
strokeWeight: gridOption.const.STROKE_WEIGHT,
|
||||
strokeOpacity: gridOption.const.STROKE_OPACITY,
|
||||
fillColor: grid.fillColor,
|
||||
fillOpacity: gridOption.const.FILL_OPACITY,
|
||||
});
|
||||
polygon.id = grid.id;
|
||||
self.initPolygonEvent(polygon);
|
||||
self.map.addOverlay(polygon);
|
||||
}
|
||||
|
||||
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);
|
||||
gridOption.gridArray.push(grid);
|
||||
setPolygon(grid);
|
||||
}
|
||||
}
|
||||
window.BaiduMap = BaiduMap;
|
||||
})()
|
||||
Loading…
Reference in New Issue
Block a user