调整地图模块代码
This commit is contained in:
parent
53a3ef2116
commit
3e2cd1b36a
@ -23,16 +23,6 @@ public class GridDTO extends GridRelationDTO {
|
|||||||
private String fillColor;
|
private String fillColor;
|
||||||
@ApiModelProperty(name = "gridName", value = "网格名称")
|
@ApiModelProperty(name = "gridName", value = "网格名称")
|
||||||
private String gridName;
|
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列表")
|
@ApiModelProperty(name = "relationIdArray", value = "关联ID列表")
|
||||||
private List<String> relationIdArray;
|
private List<String> relationIdArray;
|
||||||
@ApiModelProperty(name = "pointArray", value = "网格点列表")
|
@ApiModelProperty(name = "pointArray", value = "网格点列表")
|
||||||
|
|||||||
@ -22,7 +22,7 @@ import java.util.Map;
|
|||||||
public interface IGridService {
|
public interface IGridService {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 保存网格并返回ID
|
* 保存网格
|
||||||
*
|
*
|
||||||
* @param gridVO
|
* @param gridVO
|
||||||
* @return
|
* @return
|
||||||
@ -30,6 +30,15 @@ public interface IGridService {
|
|||||||
*/
|
*/
|
||||||
void save(GridVO gridVO) throws Exception;
|
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
|
@Override
|
||||||
public void save(GridVO gridVO) throws Exception {
|
public void save(GridVO gridVO) throws Exception {
|
||||||
|
saveAndReturnId(gridVO);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public String saveAndReturnId(GridVO gridVO) throws Exception {
|
||||||
String gridId = UUIDUtil.getUUID();
|
String gridId = UUIDUtil.getUUID();
|
||||||
List<String> relationIdArray = gridVO.getRelationIdArray();
|
List<String> relationIdArray = gridVO.getRelationIdArray();
|
||||||
List<GridPointVO> pointArray = gridVO.getPointArray();
|
List<GridPointVO> pointArray = gridVO.getPointArray();
|
||||||
@ -58,6 +63,7 @@ public class GridServiceImpl extends DefaultBaseService implements IGridService
|
|||||||
// 保存拓展属性
|
// 保存拓展属性
|
||||||
gridRelationService.save(gridId, relationIdArray);
|
gridRelationService.save(gridId, relationIdArray);
|
||||||
gridPointService.save(gridId, pointArray);
|
gridPointService.save(gridId, pointArray);
|
||||||
|
return gridId;
|
||||||
}
|
}
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
|
|||||||
@ -8,25 +8,15 @@
|
|||||||
<id column="grid_id" property="gridId"/>
|
<id column="grid_id" property="gridId"/>
|
||||||
<result column="grid_name" property="gridName"/>
|
<result column="grid_name" property="gridName"/>
|
||||||
<result column="fill_color" property="fillColor"/>
|
<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"/>
|
<result column="relation_id" property="relationId"/>
|
||||||
</resultMap>
|
</resultMap>
|
||||||
|
|
||||||
<!-- 建表 -->
|
<!-- 建表 -->
|
||||||
<update id="createTable">
|
<update id="createTable">
|
||||||
CREATE TABLE `map_grid` (
|
CREATE TABLE IF NOT EXISTS `map_grid` (
|
||||||
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
|
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
|
||||||
`grid_id` char(36) NOT NULL,
|
`grid_id` char(36) NOT NULL,
|
||||||
`grid_name` varchar(255) 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 '颜色',
|
`fill_color` varchar(7) NOT NULL DEFAULT '#000000' COMMENT '颜色',
|
||||||
`gmt_create` datetime DEFAULT NULL,
|
`gmt_create` datetime DEFAULT NULL,
|
||||||
`creator` char(36) DEFAULT NULL,
|
`creator` char(36) DEFAULT NULL,
|
||||||
@ -43,11 +33,6 @@
|
|||||||
INSERT INTO map_grid(
|
INSERT INTO map_grid(
|
||||||
grid_id,
|
grid_id,
|
||||||
grid_name,
|
grid_name,
|
||||||
b_g_id,
|
|
||||||
b_g_squa,
|
|
||||||
o_r_date,
|
|
||||||
c_h_date,
|
|
||||||
note,
|
|
||||||
fill_color,
|
fill_color,
|
||||||
gmt_create,
|
gmt_create,
|
||||||
creator,
|
creator,
|
||||||
@ -57,11 +42,6 @@
|
|||||||
) VALUES(
|
) VALUES(
|
||||||
#{gridId},
|
#{gridId},
|
||||||
#{gridName},
|
#{gridName},
|
||||||
#{bGId},
|
|
||||||
#{bGSqua},
|
|
||||||
#{oRDate},
|
|
||||||
#{cHDate},
|
|
||||||
#{note},
|
|
||||||
#{fillColor},
|
#{fillColor},
|
||||||
#{gmtCreate},
|
#{gmtCreate},
|
||||||
#{creator},
|
#{creator},
|
||||||
@ -92,11 +72,6 @@
|
|||||||
SELECT
|
SELECT
|
||||||
t1.grid_id,
|
t1.grid_id,
|
||||||
t1.fill_color,
|
t1.fill_color,
|
||||||
t1.b_g_id,
|
|
||||||
t1.b_g_squa,
|
|
||||||
t1.o_r_date,
|
|
||||||
t1.c_h_date,
|
|
||||||
t1.note,
|
|
||||||
t1.grid_name
|
t1.grid_name
|
||||||
FROM
|
FROM
|
||||||
map_grid t1
|
map_grid t1
|
||||||
@ -116,11 +91,6 @@
|
|||||||
SELECT
|
SELECT
|
||||||
t1.grid_id,
|
t1.grid_id,
|
||||||
t1.fill_color,
|
t1.fill_color,
|
||||||
t1.b_g_id,
|
|
||||||
t1.b_g_squa,
|
|
||||||
t1.o_r_date,
|
|
||||||
t1.c_h_date,
|
|
||||||
t1.note,
|
|
||||||
t1.grid_name
|
t1.grid_name
|
||||||
FROM
|
FROM
|
||||||
map_grid t1
|
map_grid t1
|
||||||
@ -136,10 +106,6 @@
|
|||||||
GROUP BY
|
GROUP BY
|
||||||
t1.grid_id,
|
t1.grid_id,
|
||||||
t1.fill_color,
|
t1.fill_color,
|
||||||
t1.b_g_id,
|
|
||||||
t1.b_g_squa,
|
|
||||||
t1.o_r_date,
|
|
||||||
t1.c_h_date,
|
|
||||||
t1.grid_name
|
t1.grid_name
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
<!-- 建表 -->
|
<!-- 建表 -->
|
||||||
<update id="createTable">
|
<update id="createTable">
|
||||||
CREATE TABLE `map_grid_point` (
|
CREATE TABLE IF NOT EXISTS `map_grid_point` (
|
||||||
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
|
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
|
||||||
`grid_id` char(36) NOT NULL,
|
`grid_id` char(36) NOT NULL,
|
||||||
`lng` varchar(255) DEFAULT NULL COMMENT '点经度',
|
`lng` varchar(255) DEFAULT NULL COMMENT '点经度',
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
<!-- 建表 -->
|
<!-- 建表 -->
|
||||||
<update id="createTable">
|
<update id="createTable">
|
||||||
CREATE TABLE `map_grid_relation` (
|
CREATE TABLE IF NOT EXISTS `map_grid_relation` (
|
||||||
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
|
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
|
||||||
`relation_id` char(36) NOT NULL COMMENT '关联ID',
|
`relation_id` char(36) NOT NULL COMMENT '关联ID',
|
||||||
`grid_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