713 lines
35 KiB
HTML
Executable File
713 lines
35 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<base href="/servicecity/">
|
|
<meta charset="UTF-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
|
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
|
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
|
|
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/bootstrap/css/bootstrap.min.css"/>
|
|
<link rel="stylesheet" type="text/css" href="assets/css/vendor/bootstrap-checkbox.css">
|
|
<style>
|
|
.layui-form-label{padding: 9px 5px}
|
|
.layui-card-header{background-color: #F5F5F5}
|
|
.layui-card{border: 1px solid #d8d8d8;}
|
|
.layui-card-body{padding: 5px 0px;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="content" class="layui-fluid layui-animlayui-anim layui-anim-fadein">
|
|
<form class="layui-form layui-form-pane" lay-filter="dataForm">
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">【网格员】打卡设置</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">签到开始</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="signInStr" v-model="formObject.signInStr" placeholder="点击选择时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">签到截止</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="signInEnd" placeholder="点击选择时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label strong-text">签退开始</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="signOutStr" placeholder="点击选择时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label strong-text">签退截止</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="signOutEnd" placeholder="点击选择时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">【网格员专管员】不记录轨迹设置</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="font-size: 12px;">网格员时间始</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="positionRecordStr" placeholder="开始时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label strong-text" style="font-size: 12px;">网格员时间止</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="positionRecordEnd" placeholder="结束时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="font-size: 12px;">专管员时间始</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="nPositionRecordStr" placeholder="开始时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="font-size: 12px;">专管员时间止</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="nPositionRecordEnd" placeholder="结束时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">【专管员】打卡设置</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label strong-text">签到开始</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="nSignInStr" placeholder="点击选择时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label strong-text">签到截止</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="nSignInEnd" placeholder="点击选择时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label strong-text">签退开始</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="nSignOutStr" placeholder="点击选择时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label strong-text">签退截止</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="nSignOutEnd" placeholder="点击选择时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">推送设置</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label strong-text">开启推送</label>
|
|
<input type="checkbox" name="pushWorkStatus" lay-skin="switch" lay-text="开启|关闭">
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label strong-text" style="font-size: 8px;">非工作日推送</label>
|
|
<input type="checkbox" name="pushOnUnWorkDay" lay-skin="switch" lay-text="开启|关闭">
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="font-size: 8px;width: 120px;">推送个人(分钟)</label>
|
|
<div class="layui-input-block">
|
|
<input type="number" name="pushSelfTime" lay-verify autocomplete="off" class="layui-input" min='5' style="width: 93%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="font-size: 8px;width: 120px;">推送领导(分钟)</label>
|
|
<div class="layui-input-block">
|
|
<input type="number" name="pushLeaderTime" lay-verify autocomplete="off" class="layui-input" min='5' style="width: 93%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">【公安局】打卡设置</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label strong-text">签到开始</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="gaSignInStr" placeholder="点击选择时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label strong-text">签到截止</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="gaSignInEnd" placeholder="点击选择时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label strong-text">签退开始</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="gaSignOutStr" placeholder="点击选择时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label strong-text">签退截止</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="gaSignOutEnd" placeholder="点击选择时间" style="cursor: pointer;"
|
|
lay-verify readonly="readonly" autocomplete="off" class="layui-input date-hour">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-row">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">地图中心控制</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md4">
|
|
<label for="mapLng">中心经度</label>
|
|
<input type="text" class="form-control" id="mapLng" name="mapLng" readonly>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<label for="mapLat">中心纬度</label>
|
|
<input type="text" class="form-control" id="mapLat" name="mapLat" readonly>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<label for="mapZoom">缩放比例</label>
|
|
<input type="number" class="form-control" id="mapZoom" name="mapZoom">
|
|
</div>
|
|
<div class="layui-col-md12">
|
|
<div id="mapContainer" style="width:100%;height:500px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6" style="display: none">
|
|
<div class="panel panel-default">
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="col-lg-12" style="position: relative;">
|
|
<div style="padding:5px;border:1px solid silver;background-color:#FFF;position:absolute;top:5px;right:5px;z-index:10000;">
|
|
<span>经度: <i id="location-lng"></i></span>,
|
|
<span>纬度: <i id="location-lat"></i></span>
|
|
</div>
|
|
<div id="mapBaseContainer" style="width:100%;height:500px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-row">
|
|
<div class="layui-col-md12">
|
|
<div class="form-group form-footer edit-button-footer">
|
|
<div class="col-lg-offset-3 col-lg-6 text-center">
|
|
<button type="button" class="btn btn-primary col-lg-12" lay-submit lay-filter="submitForm">提交</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=oWU9RD4ihDHAafexgI6XOrTK8lDatRju"></script>
|
|
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/vue.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/common.js"></script>
|
|
<script type="text/javascript" src="assets/js/baidu-map.js?v=7"></script>
|
|
|
|
<script src="assets/layuiadmin/layui/layui.js"></script>
|
|
<script type="text/javascript">
|
|
layui.config({
|
|
base: 'assets/layuiadmin/' //静态资源所在路径
|
|
}).extend({
|
|
index: 'lib/index' //主入口模块
|
|
}).use(['index', 'form', 'laydate'], function(){
|
|
var $ = layui.$;
|
|
var form = layui.form;
|
|
var laydate = layui.laydate;
|
|
var $win = $(window);
|
|
|
|
var dictParentName= null;
|
|
var dictId = top.restAjax.params(window.location.href).dictId;
|
|
var map = null;
|
|
var baseMap = null;
|
|
var areaName = null;
|
|
var areaPoints = null;
|
|
var mapLng = '111.77161814614547';
|
|
var mapLat = '40.87022174345689';
|
|
var mapZoom = 15;
|
|
var areas = [];
|
|
var drawAreas =[];
|
|
var currentEdit = {
|
|
id: null,
|
|
name: null,
|
|
markerId: null
|
|
};
|
|
var isDrawing = false;
|
|
var isLoad = true;
|
|
var borderColor = {
|
|
red: 127,
|
|
green: 127,
|
|
blue: 127,
|
|
};
|
|
var areaColor= {
|
|
red: 127,
|
|
green: 127,
|
|
blue: 127,
|
|
};
|
|
var location = {
|
|
lng: 0,
|
|
lat: 0
|
|
}
|
|
|
|
$('.date-hour').each(function(){
|
|
laydate.render({
|
|
elem: this
|
|
,type: 'time'
|
|
,trigger: 'click'
|
|
,format: 'HH:mm:ss'
|
|
});
|
|
});
|
|
|
|
function initData(){
|
|
var self = this;
|
|
var loadLayerIndex;
|
|
top.restAjax.get(top.restAjax.path('api/config/getconfig', [dictId]), {}, null, function(code, data) {
|
|
data.pushWorkStatus = data.pushWorkStatus == 'true' ? '1' : '';
|
|
data.pushOnUnWorkDay = data.pushOnUnWorkDay == 'true' ? '1' : '';
|
|
mapLng = data.mapLng;
|
|
mapLat = data.mapLat;
|
|
mapZoom = data.mapZoom;
|
|
areaPoints = data.areaPoints;
|
|
var dataFormData = {};
|
|
for(var i in data) {
|
|
dataFormData[i] = data[i];
|
|
}
|
|
form.val('dataForm', dataFormData);
|
|
form.render(null, 'dataForm');
|
|
isLoad = false;
|
|
initMap();
|
|
initBaseAreaMap(areaPoints);
|
|
$('#content').fadeTo(1000, 1);
|
|
}, function(code, data) {
|
|
top.DialogBox.msg(data.msg);
|
|
}, function() {
|
|
loadLayerIndex = top.DialogBox.msg(TextMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
top.DialogBox.close(loadLayerIndex);
|
|
});
|
|
}
|
|
initData();
|
|
|
|
form.on('submit(submitForm)', function(formData) {
|
|
var loadLayerIndex;
|
|
var areaPoints = '';
|
|
for(var i = 0, item = areas[i]; item = areas[i++];) {
|
|
if(typeof(item.points) == 'undefined' || item.points == null) {
|
|
continue;
|
|
}
|
|
if(areaPoints != '') {
|
|
areaPoints += '$';
|
|
}
|
|
var points = '';
|
|
for(var j = 0, point = item.points[j]; point = item.points[j++];) {
|
|
if(points != '') {
|
|
points += ';'
|
|
}
|
|
points += (point.lng +','+ point.lat)
|
|
}
|
|
areaPoints += points;
|
|
}
|
|
if(typeof (formData.field['pushWorkStatus']) == 'undefined'){
|
|
formData.field['pushWorkStatus'] = 'false';
|
|
} else {
|
|
formData.field['pushWorkStatus'] = 'true';
|
|
}
|
|
if(typeof (formData.field['pushOnUnWorkDay']) == 'undefined'){
|
|
formData.field['pushOnUnWorkDay'] = 'false';
|
|
} else {
|
|
formData.field['pushOnUnWorkDay'] = 'true';
|
|
}
|
|
if(formData.field['pushSelfTime'] < 5){
|
|
formData.field['pushSelfTime'] = 5;
|
|
}
|
|
if(formData.field['pushLeaderTime'] < 5){
|
|
formData.field['pushLeaderTime'] = 5;
|
|
}
|
|
formData.field['mapLat'] = mapLat;
|
|
formData.field['mapLng'] = mapLng;
|
|
formData.field['mapZoom'] = mapZoom;
|
|
formData.field['areaPoints'] = areaPoints;
|
|
|
|
top.restAjax.post(top.restAjax.path('api/config/saveconfig', [dictId]), formData.field, null, function(code, data) {
|
|
// success
|
|
var layerIndex = top.DialogBox.msg('保存成功', {
|
|
time: 1000,
|
|
}, function() {
|
|
window.location.reload();
|
|
});
|
|
}, function(code, data) {
|
|
// error
|
|
top.dialog.msg(data.msg);
|
|
}, function() {
|
|
// before
|
|
loadLayerIndex = top.dialog.msg(TextMessage.committing, {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
// complete
|
|
top.dialog.close(loadLayerIndex);
|
|
});
|
|
return false;
|
|
});
|
|
|
|
function initMap() {
|
|
map = new BMap.Map('mapContainer', {
|
|
enableMapClick: false,
|
|
});
|
|
map.disableDoubleClickZoom();
|
|
map.enableScrollWheelZoom();
|
|
map.centerAndZoom(new BMap.Point(mapLng,mapLat),mapZoom);
|
|
map.addControl(new BMap.OverviewMapControl());
|
|
map.setDefaultCursor('crosshair');
|
|
map.addEventListener('dblclick', function(e) {
|
|
mapLng = e.point.lng;
|
|
mapLat = e.point.lat;
|
|
mapZoom = this.getZoom();
|
|
markPoint();
|
|
});
|
|
markPoint();
|
|
}
|
|
|
|
function markPoint() {
|
|
map.clearOverlays();
|
|
var marker = new BMap.Marker(new BMap.Point(mapLng, mapLat));
|
|
map.addOverlay(marker);
|
|
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
|
|
}
|
|
|
|
// 初始化地图
|
|
function initBaseAreaMap(pointList) {
|
|
baseMap = new BaiduMap({
|
|
container: 'mapBaseContainer',
|
|
zoom: mapZoom,
|
|
initPoint: {
|
|
lng: mapLng,
|
|
lat: mapLat
|
|
},
|
|
onRightClick: function() {
|
|
areaBlur();
|
|
currentEdit.id = null;
|
|
},
|
|
onDblClick: function(e) {
|
|
// 开启划片功能
|
|
if(isDrawing) {
|
|
markBaseAreaPoint(e.point);
|
|
}
|
|
},
|
|
onMouseMove: function(e) {
|
|
location.lng = e.point.lng;
|
|
location.lat = e.point.lat;
|
|
$('#location-lng').html(e.point.lng);
|
|
$('#location-lat').html(e.point.lat);
|
|
}
|
|
});
|
|
// 初始化基础片区
|
|
if(typeof(areaPoints) != 'undefined' && areaPoints != null && areaPoints != '') {
|
|
var areaPoints = areaPoints.split('$');
|
|
for(var i = 0; i < areaPoints.length; i++) {
|
|
var item = areaPoints[i];
|
|
var points = item.split(';');
|
|
var pointArray = [];
|
|
for(var j = 0; j < points.length; j++) {
|
|
var point = points[j].split(',');
|
|
pointArray.push({
|
|
lng: point[0],
|
|
lat: point[1]
|
|
})
|
|
}
|
|
areas.push({
|
|
id: i,
|
|
name: null,
|
|
points: pointArray
|
|
})
|
|
}
|
|
takeArea();
|
|
}
|
|
startDrawing();
|
|
}
|
|
|
|
// 添加开始节点
|
|
function addStartMarker(clickPoint) {
|
|
var id = new Date().getTime();
|
|
var markerId = 'Marker'+ id;
|
|
baseMap.addMarker({
|
|
id: markerId,
|
|
point: {
|
|
lng: clickPoint.lng,
|
|
lat: clickPoint.lat
|
|
},
|
|
onRightClick: function(id, e) {
|
|
map.removeItem(id);
|
|
}
|
|
});
|
|
currentEdit.markerId = markerId;
|
|
currentEdit.id = id;
|
|
currentEdit.name = areaName;
|
|
}
|
|
|
|
// 取消边框焦点
|
|
function areaBlur() {
|
|
for(var i = 0, item = drawAreas[i]; item = drawAreas[i++];) {
|
|
item.setStrokeWeight(1);
|
|
}
|
|
}
|
|
|
|
// 描点
|
|
function markBaseAreaPoint(clickPoint) {
|
|
baseMap.clearMap();
|
|
if(currentEdit.id == null) {
|
|
addStartMarker(clickPoint);
|
|
} else if(currentEdit.id != null) {
|
|
baseMap.removeItem(currentEdit.markerId);
|
|
}
|
|
if(areas.length == 0) {
|
|
// 新增队列
|
|
areas.push({
|
|
id: currentEdit.id,
|
|
name: currentEdit.name,
|
|
points: [{
|
|
lng: clickPoint.lng,
|
|
lat: clickPoint.lat
|
|
}]
|
|
});
|
|
} else {
|
|
getAreaPoints(currentEdit.id, currentEdit.name).push({
|
|
lng: clickPoint.lng,
|
|
lat: clickPoint.lat
|
|
})
|
|
}
|
|
takeArea();
|
|
}
|
|
|
|
// 获取区域列表点集合
|
|
function getAreaPoints(id, name) {
|
|
var area = getArea(id);
|
|
if(area == null) {
|
|
area = {
|
|
id: id,
|
|
name: name,
|
|
points: []
|
|
}
|
|
areas.push(area);
|
|
}
|
|
return area.points;
|
|
}
|
|
|
|
// 获得地区
|
|
function getArea(id) {
|
|
for(var i = 0, item = areas[i]; item = areas[i++];) {
|
|
if(id == item.id) {
|
|
return item;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
// 划片
|
|
function takeArea() {
|
|
drawAreas.splice(0, drawAreas.length);
|
|
var allPointArray = [];
|
|
for(var i = 0, item = areas[i]; item = areas[i++];) {
|
|
allPointArray = allPointArray.concat(item.points);
|
|
var isBold = false;
|
|
if(item.id == currentEdit.id) {
|
|
isBold = true;
|
|
}
|
|
var drawArea = baseMap.drawArea({
|
|
id: item.id,
|
|
isBold: isBold,
|
|
color: {
|
|
border: {
|
|
red: borderColor.red,
|
|
green: borderColor.green,
|
|
blue: borderColor.blue,
|
|
opacity: 1
|
|
},
|
|
area: {
|
|
red: areaColor.red,
|
|
green: areaColor.green,
|
|
blue: areaColor.blue,
|
|
}
|
|
},
|
|
pointArray: item.points,
|
|
onClick: function(id, e, selfItem) {
|
|
if(isDrawing) {
|
|
areaBlur();
|
|
selfItem.setStrokeWeight(5);
|
|
currentEdit.id = id;
|
|
}
|
|
},
|
|
onDblClick: function(id, e, selfItem) {
|
|
if(isDrawing) {
|
|
removeArea(id);
|
|
currentEdit.id = null;
|
|
baseMap.clearMap();
|
|
takeArea();
|
|
e.domEvent.stopPropagation();
|
|
}
|
|
},
|
|
onLineUpdate: function(id, e, selfItem) {
|
|
if(isDrawing) {
|
|
areaPoints = selfItem.getPath();
|
|
var area = getArea(id);
|
|
area.points = areaPoints;
|
|
}
|
|
}
|
|
});
|
|
if(isDrawing) {
|
|
drawArea.enableEditing();
|
|
}
|
|
drawAreas.push(drawArea);
|
|
}
|
|
baseMap.resetViewport(allPointArray);
|
|
}
|
|
|
|
// 删除区域
|
|
function removeArea(id) {
|
|
for(var i = 0; i < areas.length; i++) {
|
|
var item = areas[i]
|
|
if(id == item.id) {
|
|
return areas.splice(i, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 开始划片
|
|
function startDrawing() {
|
|
baseMap.getBaiduMap().setDefaultCursor('crosshair');
|
|
isDrawing = true;
|
|
enableDrawAreaEdit();
|
|
}
|
|
|
|
// 开启区域编辑
|
|
function enableDrawAreaEdit () {
|
|
for(var i = 0, item = drawAreas[i]; item = drawAreas[i++];) {
|
|
item.enableEditing();
|
|
}
|
|
}
|
|
|
|
// 禁止区域编辑
|
|
function disableDrawArrayEdit() {
|
|
for(var i = 0, item = drawAreas[i]; item = drawAreas[i++];) {
|
|
item.disableEditing();
|
|
}
|
|
}
|
|
|
|
// 设置区域颜色
|
|
function setDrawAreaColor(color) {
|
|
for(var i = 0, item = drawAreas[i]; item = drawAreas[i++];) {
|
|
item.setFillColor(color);
|
|
}
|
|
}
|
|
|
|
// 设置边框颜色
|
|
function setDrawAreaBorderColor(color) {
|
|
for(var i = 0, item = drawAreas[i]; item = drawAreas[i++];) {
|
|
item.setStrokeColor(color)
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |