From 671cb3a798300c3b994155754ce8bda3abdab666 Mon Sep 17 00:00:00 2001
From: wanggeng <450292408@qq.com>
Date: Mon, 26 Sep 2022 11:38:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=BD=91=E6=A0=BC=E7=BB=98?=
=?UTF-8?q?=E5=88=B6=E9=9A=90=E8=97=8F=E8=83=8C=E6=99=AF=E5=92=8C=E9=9A=90?=
=?UTF-8?q?=E8=97=8F=E8=83=8C=E6=99=AF=E9=A2=9C=E8=89=B2=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../js/baidu-map/baidu-map-1.0.0.min.js | 138 ++++++++++++++++--
.../templates/grid/grid/default/save.html | 4 +
2 files changed, 129 insertions(+), 13 deletions(-)
diff --git a/src/main/resources/static/assets/js/baidu-map/baidu-map-1.0.0.min.js b/src/main/resources/static/assets/js/baidu-map/baidu-map-1.0.0.min.js
index 61fba3b..5d3ae9a 100644
--- a/src/main/resources/static/assets/js/baidu-map/baidu-map-1.0.0.min.js
+++ b/src/main/resources/static/assets/js/baidu-map/baidu-map-1.0.0.min.js
@@ -26,14 +26,16 @@ function BaiduMap(mapId, mapConfig) {
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',
+ HIDE_BACKGROUND_BTN_ID: 'HIDE_BACKGROUND_BTN',
+ SHOW_BACKGROUND_BTN_ID: 'SHOW_BACKGROUND_BTN',
+ NO_BACKGROUND_COLOR_BTN_ID: 'NO_BACKGROUND_COLOR_BTN',
+ SHOW_BACKGROUND_COLOR_BTN_ID: 'SHOW_BACKGROUND_COLOR_BTN',
RIGHT_BOX_ID: 'B_GRID_RIGHT_BOX',
RIGHT_BOX_WIDTH: 80,
RIGHT_BOX_HEIGHT: 94,
@@ -75,8 +77,10 @@ function BaiduMap(mapId, mapConfig) {
COLOR_B: 'B_COLOR_B',
}
};
+ this.backgroundGridArray = [];
this.mapConfig = mapConfig;
this.relationGroup = null;
+
}
// 关联
@@ -285,17 +289,19 @@ BaiduMap.prototype.getCenterPoint = function (pathPointArray) {
BaiduMap.prototype.setLabelFontSize = function (size) {
// 全部隐藏
if (size === 0) {
- for (var i = 0, label; label = this.labelArray[i++];) {
- label.hide();
+ for (var i = 0, item; item = this.backgroundGridArray[i++];) {
+ item.label.overlay.hide();
}
return;
}
- for (var i = 0, label; label = this.labelArray[i++];) {
+ for (var i = 0, item; item = this.backgroundGridArray[i++];) {
+ var label = item.label.overlay;
+ if (!item.label.isShow) {
+ label.hide();
+ continue;
+ }
label.show();
label.setOffset(new BMap.Size(-label.content.length * size / 2, -size / 2));
- label.setStyle({
- fontSize: size + 'px'
- })
}
}
// 获得Map对象
@@ -493,10 +499,75 @@ BaiduMap.prototype.getGridBarBox = function () {
return cancelOptionBtn;
}
+ /**
+ * 隐藏背景按钮
+ */
+ function hideBackgroundBtn() {
+ var btn = document.createElement('a');
+ self.setABtnElementAttribute(btn, self.gridOption.const.HIDE_BACKGROUND_BTN_ID, '隐藏背景', 'rgb(240 159 27)');
+ btn.addEventListener('click', function (event) {
+ self.hideBackgroundGrid();
+ document.getElementById(self.gridOption.const.HIDE_BACKGROUND_BTN_ID).style.display = 'none';
+ document.getElementById(self.gridOption.const.SHOW_BACKGROUND_BTN_ID).style.display = 'inline-block';
+ });
+ return btn;
+ }
+
+ /**
+ * 显示背景按钮
+ * @return {*}
+ */
+ function showBackgroundBtn() {
+ var btn = document.createElement('a');
+ btn.style.display = 'none';
+ self.setABtnElementAttribute(btn, self.gridOption.const.SHOW_BACKGROUND_BTN_ID, '显示背景', 'rgb(240 159 27)');
+ btn.addEventListener('click', function (event) {
+ self.showBackgroundGrid();
+ document.getElementById(self.gridOption.const.SHOW_BACKGROUND_BTN_ID).style.display = 'none';
+ document.getElementById(self.gridOption.const.HIDE_BACKGROUND_BTN_ID).style.display = 'inline-block';
+ });
+ return btn;
+ }
+
+ /**
+ * 背景透明按钮
+ * @return {*}
+ */
+ function noBackgroundColorBtn() {
+ var btn = document.createElement('a');
+ self.setABtnElementAttribute(btn, self.gridOption.const.NO_BACKGROUND_COLOR_BTN_ID, '背景透明', 'rgb(240 159 27)');
+ btn.addEventListener('click', function (event) {
+ self.noBackgroundColorGrid();
+ document.getElementById(self.gridOption.const.NO_BACKGROUND_COLOR_BTN_ID).style.display = 'none';
+ document.getElementById(self.gridOption.const.SHOW_BACKGROUND_COLOR_BTN_ID).style.display = 'inline-block';
+ });
+ return btn;
+ }
+
+ /**
+ * 背景取消透明按钮
+ * @return {*}
+ */
+ function showBackgroundColorBtn() {
+ var showBackgroundBtn = document.createElement('a');
+ showBackgroundBtn.style.display = 'none';
+ self.setABtnElementAttribute(showBackgroundBtn, self.gridOption.const.SHOW_BACKGROUND_COLOR_BTN_ID, '显示背景', 'rgb(240 159 27)');
+ showBackgroundBtn.addEventListener('click', function (event) {
+ self.showBackgroundColorGrid();
+ document.getElementById(self.gridOption.const.SHOW_BACKGROUND_COLOR_BTN_ID).style.display = 'none';
+ document.getElementById(self.gridOption.const.NO_BACKGROUND_COLOR_BTN_ID).style.display = 'inline-block';
+ });
+ return showBackgroundBtn;
+ }
+
// 初始化按钮组
function initGridBarBtnGroup(gridBarBox) {
gridBarBox.appendChild(getStartOptionBtn());
gridBarBox.appendChild(getCancelOptionBtn());
+ gridBarBox.appendChild(hideBackgroundBtn());
+ gridBarBox.appendChild(showBackgroundBtn());
+ gridBarBox.appendChild(noBackgroundColorBtn());
+ gridBarBox.appendChild(showBackgroundColorBtn());
gridBarBox.appendChild(getRelationName());
}
@@ -703,8 +774,49 @@ BaiduMap.prototype.initBackgroundGrid = function (option) {
});
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);
+ // 缓存网格与网格名称
+ self.backgroundGridArray.push({
+ polygon: {
+ isShow: true,
+ overlay: polygon
+ },
+ label: {
+ isShow: true,
+ overlay: label
+ }
+ });
+ }
+}
+BaiduMap.prototype.hideBackgroundGrid = function () {
+ var self = this;
+ for (var i = 0, item; item = self.backgroundGridArray[i++];) {
+ item.polygon.overlay.hide();
+ item.polygon.isShow = false;
+ item.label.overlay.hide();
+ item.label.isShow = false;
+ }
+}
+BaiduMap.prototype.showBackgroundGrid = function () {
+ var self = this;
+ for (var i = 0, item; item = self.backgroundGridArray[i++];) {
+ item.polygon.overlay.show();
+ item.polygon.isShow = true;
+ item.label.overlay.show();
+ item.label.isShow = true;
+ }
+}
+BaiduMap.prototype.noBackgroundColorGrid = function () {
+ var self = this;
+ for (var i = 0, item; item = self.backgroundGridArray[i++];) {
+ item.polygon.overlay.oldFillColor = item.polygon.overlay.getFillColor();
+ item.polygon.overlay.setFillColor('transparent');
+ }
+}
+BaiduMap.prototype.showBackgroundColorGrid = function () {
+ var self = this;
+ for (var i = 0, item; item = self.backgroundGridArray[i++];) {
+ item.polygon.overlay.setFillColor(item.polygon.overlay.oldFillColor);
}
}
// 设置开始标记
@@ -848,7 +960,7 @@ BaiduMap.prototype.initGridOptionEvent = function () {
return;
}
// 判断是否只能绘制一个网格
- if(self.mapConfig.single && self.gridOption.gridArray.length > 0) {
+ if (self.mapConfig.single && self.gridOption.gridArray.length > 0) {
return;
}
// 隐藏结束编辑按钮
@@ -913,8 +1025,8 @@ BaiduMap.prototype.setGridArray = function (gridArray) {
setPolygon(grid);
}
}
-BaiduMap.prototype.setBoundary = function(areaName, option, callback) {
- if(!areaName) {
+BaiduMap.prototype.setBoundary = function (areaName, option, callback) {
+ if (!areaName) {
callback ? callback() : '';
return;
}
@@ -924,7 +1036,7 @@ BaiduMap.prototype.setBoundary = function(areaName, option, callback) {
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
console.log('未能获取当前输入行政区域');
- return ;
+ return;
}
var ply = new BMap.Polygon(rs.boundaries[0], {
strokeColor: option && option.strokeColor ? option.strokeColor : 'black',
diff --git a/src/main/resources/templates/grid/grid/default/save.html b/src/main/resources/templates/grid/grid/default/save.html
index 36f95a8..898996c 100644
--- a/src/main/resources/templates/grid/grid/default/save.html
+++ b/src/main/resources/templates/grid/grid/default/save.html
@@ -93,6 +93,9 @@
+
+
+