289 lines
10 KiB
HTML
289 lines
10 KiB
HTML
<div class="easyui-layout" style="width:100%;height:100%;">
|
||
<div data-options="region:'west',split:true,border:false" style="width:240px;height:100%;">
|
||
<div id="dtlb" height="30%" title="监测地图列表">
|
||
<ul id="dtlbtree" data-options="animate:true,"></ul>
|
||
</div>
|
||
<!-- <div id="gwfl" height="30%"></div> -->
|
||
<div id="qylb" height="70%" title="排口列表">
|
||
|
||
<ul id="qylblist" data-options="animate:true,toolbar:'#qylbbar'" style="height:100%"></ul>
|
||
</div>
|
||
</div>
|
||
<input type="file" id="file" name="" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none" />
|
||
<div data-options="region:'center',title:'监测地图',split:true,border:false" style="height:100%;">
|
||
|
||
<div id="qybar" style="padding:5px;height:auto;">
|
||
<a id="changedt" onclick="changedt()" class="easyui-linkbutton"
|
||
data-options="iconCls:'fa-pencil',plain:true">更换地图</a>
|
||
<a id="drawqy" onclick="drawqy()" class="easyui-linkbutton" data-options="iconCls:'fa-pencil',plain:true"
|
||
style="display:none">标记点位</a>
|
||
</div>
|
||
<div id="map0" class="map" style="width:100%;height:auto;outline: #4A74A8 solid 0.15em;margin-bottom: 10px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
var map, source, vector, draw, polygon;// global so we can remove it later
|
||
$.get('api/map?a=default', function (res) {
|
||
$('#map0').empty()
|
||
map = initMap(res.pic)
|
||
$('#qylblist').datagrid({ url: '/api/enp/draindt/list/' })
|
||
})
|
||
$('#dtlb').panel()
|
||
$('#qylb').panel()
|
||
$('#dtlbtree').tree({
|
||
url: 'api/map?a=tree',
|
||
animate: true,
|
||
loadFilter: function (rows) {
|
||
return convert(rows);
|
||
},
|
||
formatter: function (node) {
|
||
var s = node.text;
|
||
if (node.children) {
|
||
s += ' <span style=\'color:blue\'>(' + node.children.length + ')</span>';
|
||
}
|
||
return s;
|
||
},
|
||
onSelect: function (row) {
|
||
$('#qylblist').datagrid({ url: '/api/enp/draindt/list/' })
|
||
$('#drawqy').hide()
|
||
$('#changedt').show()
|
||
$('#map').empty()
|
||
map = initMap(row.pic)
|
||
}
|
||
});
|
||
$('#qylblist').datagrid({
|
||
url: '',
|
||
rownumbers: true,
|
||
singleSelect: true,
|
||
striped: true,
|
||
method: 'get',
|
||
border: false,
|
||
columns: [[
|
||
{ field: 'id', title: 'ID', hidden: true },
|
||
{ field: 'number', title: '排放口编号', width: 100 },
|
||
{ field: 'name', title: '排放口名称', width: 100 },
|
||
{ field: 'location', title: '坐标', width: 100 },
|
||
{ field: 'type', title: '排口类型', width: 100, formatter: function (value, row, index) {
|
||
switch (value) {
|
||
case 10: return '排水'; break;
|
||
case 20: return '排气'; break;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
]],
|
||
onClickRow: function (index, row) {
|
||
$('#drawqy').show()//绘制区域
|
||
$('#changedt').hide()//更换地图
|
||
showArea()
|
||
}
|
||
});
|
||
function initMap(url) {
|
||
var extent = [0, 0, 1920, 1080];
|
||
var projection = new ol.proj.Projection({
|
||
code: 'xkcd-image',
|
||
units: 'pixels',
|
||
extent: extent
|
||
});
|
||
map = new ol.Map({
|
||
layers: [
|
||
new ol.layer.Image({
|
||
source: new ol.source.ImageStatic({
|
||
url: url,
|
||
projection: projection,
|
||
imageExtent: extent
|
||
})
|
||
})
|
||
],
|
||
target: 'map0',
|
||
view: new ol.View({
|
||
projection: projection,
|
||
center: ol.extent.getCenter(extent),
|
||
zoom: 2.3,
|
||
maxZoom: 8
|
||
})
|
||
});
|
||
source = new ol.source.Vector({ wrapX: false });
|
||
vector = new ol.layer.Vector({
|
||
source: source
|
||
});
|
||
map.addLayer(vector);//加载图层
|
||
return map
|
||
}
|
||
function drawqy() {
|
||
var row = $('#qylblist').datagrid('getSelected');
|
||
if (row) {
|
||
if (row.type != null) {
|
||
$.messager.confirm('提示', '该区域已绑定,是否重新绑定?', function (r) {
|
||
if (r) {
|
||
source.clear()
|
||
drawarea()
|
||
}
|
||
});
|
||
}else{
|
||
drawarea()
|
||
}
|
||
}
|
||
else {
|
||
$.messager.alert('提示', '请先选择左侧区域!');
|
||
}
|
||
}
|
||
function delqy(){
|
||
var row = $('#qylblist').datagrid('getSelected');
|
||
if (row) {
|
||
$.messager.confirm('提示', '确定删除吗?', function (r) {
|
||
if (r) {
|
||
$.get('api/area?a=del&id='+row.id,function(res){
|
||
if(res.code==1){
|
||
$('#qylblist').datagrid('reload');
|
||
}else{
|
||
$.messager.alert('提示','您无权删除!');
|
||
}
|
||
})
|
||
}
|
||
});
|
||
}
|
||
else {
|
||
$.messager.alert('提示', '请先选择区域!');
|
||
}
|
||
}
|
||
function editqy(){
|
||
var row = $('#qylblist').datagrid('getSelected');
|
||
if (row) {
|
||
opendg('编辑区域','html/area/edit/'+row.id.toString())
|
||
}
|
||
else {
|
||
$.messager.alert('提示', '请先选择区域!');
|
||
}
|
||
}
|
||
//标记点位
|
||
function drawarea() {
|
||
draw = new ol.interaction.Draw({
|
||
source: source,
|
||
type: 'Point'
|
||
});
|
||
map.addInteraction(draw);
|
||
draw.on('drawend', function (e) {
|
||
polygon = e.feature.getGeometry().getCoordinates();
|
||
//polygon = coordinates_Point
|
||
console.log(polygon)
|
||
map.removeInteraction(draw);
|
||
var pointFeature = new ol.Feature({
|
||
geometry: new ol.geom.Point(polygon),
|
||
});
|
||
pointFeature.setStyle(createPointStyle(pointFeature));
|
||
source.addFeature(pointFeature)
|
||
saveqy()
|
||
});
|
||
}
|
||
function saveqy() {
|
||
var row = $('#qylblist').datagrid('getSelected');
|
||
var data = { 'id': row.id, 'polygon': polygon}
|
||
$.ajax({
|
||
type: "POST",
|
||
url: '/api/enp/draindt/bind/',
|
||
data: JSON.stringify(data),
|
||
datatype: "json",
|
||
contentType: "application/json;charset=utf-8",
|
||
beforeSend: function () { },
|
||
success: function (res) {
|
||
$('#qylblist').datagrid('reload')
|
||
},
|
||
});
|
||
}
|
||
var createPointStyle = function (feature) {
|
||
return new ol.style.Style({
|
||
/**{olx.style.IconOptions}类型*/
|
||
image: new ol.style.Icon(
|
||
({
|
||
anchor: [0.5, 60],
|
||
anchorOrigin: 'top-right',
|
||
anchorXUnits: 'fraction',
|
||
anchorYUnits: 'pixels',
|
||
offsetOrigin: 'top-right',
|
||
// offset:[0,10],
|
||
//图标缩放比例
|
||
// scale:0.5,
|
||
//透明度
|
||
opacity: 0.75,
|
||
//图标的url
|
||
src: '/static/safesite/mystatic/images/icon4.png'
|
||
})
|
||
),
|
||
text: new ol.style.Text({
|
||
textAlign: 'center', //位置
|
||
textBaseline: 'middle', //基准线
|
||
font: 'normal 14px 微软雅黑', //文字样式
|
||
text: feature.get('name'), //文本内容
|
||
})
|
||
|
||
});
|
||
}
|
||
var createPolygonStyle = function (feature) {
|
||
return new ol.style.Style({
|
||
fill:new ol.style.Fill({
|
||
color: 'rgba(255,255,255, 0.5)'
|
||
}),
|
||
text: new ol.style.Text({
|
||
textAlign: 'center', //位置
|
||
textBaseline: 'middle', //基准线
|
||
font: 'normal 14px 微软雅黑', //文字样式
|
||
text: feature.get('name'), //文本内容
|
||
})
|
||
|
||
});
|
||
}
|
||
function changedt() {
|
||
var row = $('#dtlbtree').tree('getSelected');
|
||
if (row) {
|
||
$('#file').click()
|
||
}
|
||
else {
|
||
$.messager.alert('提示', '请先选择左侧地图!');
|
||
}
|
||
}
|
||
document.getElementById('file').onchange = function () {
|
||
var fileObj = this.files[0];
|
||
var url = 'upfile'
|
||
var form = new FormData();
|
||
form.append("upfile", fileObj); // 文件对象
|
||
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
|
||
xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
|
||
xhr.onload = function (evt) { //服务断接收完文件返回的结果
|
||
var data = JSON.parse(evt.target.responseText);
|
||
if (data.code = 1) {
|
||
$('#map').empty()
|
||
map = initMap(data.filepath)
|
||
var row = $('#dtlbtree').tree('getSelected');
|
||
$.post('api/map?a=update', { 'id': row.id, 'name': row.name, 'pic': data.filepath }, function (res) {
|
||
$('#dtlbtree').tree('reload');
|
||
})
|
||
} else { alert("上传失败！"); }
|
||
}; //请求完成
|
||
xhr.onerror = function (evt) { alert("上传失败！"); }; //请求失败
|
||
xhr.send(form); //开始上传，发送form数据
|
||
}
|
||
function showArea() {
|
||
map.removeInteraction(draw);
|
||
source.clear()
|
||
var row = $('#qylblist').datagrid('getSelected');
|
||
if (row.location != null) {
|
||
var polygonFeature = new ol.Feature({
|
||
geometry: new ol.geom.Point(row.location),
|
||
});
|
||
|
||
var pointFeature = new ol.Feature({
|
||
geometry: new ol.geom.Point(row.location),
|
||
});
|
||
//newFeature1.setStyle(createPointStyle(newFeature1));
|
||
pointFeature.setStyle(createPointStyle(pointFeature));
|
||
polygonFeature.setStyle(createPolygonStyle(polygonFeature));
|
||
source.addFeature(polygonFeature)
|
||
source.addFeature(pointFeature)
|
||
}
|
||
|
||
}
|
||
</script> |