diff --git a/module-map/src/main/java/ink/wgink/module/map/pojo/dto/grid/GridDTO.java b/module-map/src/main/java/ink/wgink/module/map/pojo/dto/grid/GridDTO.java index fed918b9..8afa36b4 100644 --- a/module-map/src/main/java/ink/wgink/module/map/pojo/dto/grid/GridDTO.java +++ b/module-map/src/main/java/ink/wgink/module/map/pojo/dto/grid/GridDTO.java @@ -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 relationIdArray; @ApiModelProperty(name = "pointArray", value = "网格点列表") diff --git a/module-map/src/main/java/ink/wgink/module/map/service/grid/IGridService.java b/module-map/src/main/java/ink/wgink/module/map/service/grid/IGridService.java index 6a15333c..39eda2fd 100644 --- a/module-map/src/main/java/ink/wgink/module/map/service/grid/IGridService.java +++ b/module-map/src/main/java/ink/wgink/module/map/service/grid/IGridService.java @@ -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; + /** * 删除网格 diff --git a/module-map/src/main/java/ink/wgink/module/map/service/grid/impl/GridServiceImpl.java b/module-map/src/main/java/ink/wgink/module/map/service/grid/impl/GridServiceImpl.java index 6dc38b6c..e6a77409 100644 --- a/module-map/src/main/java/ink/wgink/module/map/service/grid/impl/GridServiceImpl.java +++ b/module-map/src/main/java/ink/wgink/module/map/service/grid/impl/GridServiceImpl.java @@ -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 relationIdArray = gridVO.getRelationIdArray(); List 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 diff --git a/module-map/src/main/resources/mybatis/mapper/grid/grid-mapper.xml b/module-map/src/main/resources/mybatis/mapper/grid/grid-mapper.xml index 21044de4..cafa3f45 100644 --- a/module-map/src/main/resources/mybatis/mapper/grid/grid-mapper.xml +++ b/module-map/src/main/resources/mybatis/mapper/grid/grid-mapper.xml @@ -8,25 +8,15 @@ - - - - - - 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 diff --git a/module-map/src/main/resources/mybatis/mapper/grid/grid-point-mapper.xml b/module-map/src/main/resources/mybatis/mapper/grid/grid-point-mapper.xml index e215c11d..5e826695 100644 --- a/module-map/src/main/resources/mybatis/mapper/grid/grid-point-mapper.xml +++ b/module-map/src/main/resources/mybatis/mapper/grid/grid-point-mapper.xml @@ -12,7 +12,7 @@ - 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 '点经度', diff --git a/module-map/src/main/resources/mybatis/mapper/grid/grid-relation-mapper.xml b/module-map/src/main/resources/mybatis/mapper/grid/grid-relation-mapper.xml index 520f0e00..2f9b24d0 100644 --- a/module-map/src/main/resources/mybatis/mapper/grid/grid-relation-mapper.xml +++ b/module-map/src/main/resources/mybatis/mapper/grid/grid-relation-mapper.xml @@ -11,7 +11,7 @@ - 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', diff --git a/module-map/src/main/resources/static/baidu-map/baidu-map-1.0.0.min.js b/module-map/src/main/resources/static/baidu-map/baidu-map-1.0.0.min.js new file mode 100644 index 00000000..23883083 --- /dev/null +++ b/module-map/src/main/resources/static/baidu-map/baidu-map-1.0.0.min.js @@ -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 = '关联：' + 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); + } +} \ No newline at end of file diff --git a/module-map/src/main/resources/static/baidu-map/baidu-map-1.0.1.min.js b/module-map/src/main/resources/static/baidu-map/baidu-map-1.0.1.min.js new file mode 100644 index 00000000..7039285f --- /dev/null +++ b/module-map/src/main/resources/static/baidu-map/baidu-map-1.0.1.min.js @@ -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; +})() \ No newline at end of file