增加网格绘制隐藏背景和隐藏背景颜色按钮
This commit is contained in:
parent
f54944daaf
commit
671cb3a798
@ -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',
|
||||
|
||||
@ -93,6 +93,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" id="userIds" name="userIds">
|
||||
<input type="hidden" id="userNames" name="userNames" class="layui-input" value="" placeholder="选择人员" maxlength="255" readonly>
|
||||
<!--
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label layui-form-label-up">添加人员</label>
|
||||
<div class="layui-input-block layui-input-block-down">
|
||||
@ -100,6 +103,7 @@
|
||||
<input type="text" id="userNames" name="userNames" class="layui-input" value="" placeholder="选择人员" maxlength="255" readonly>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="layui-form-item layui-layout-admin">
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-footer" style="left: 0;">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user