270 lines
9.1 KiB
HTML
270 lines
9.1 KiB
HTML
<!-- <div id="qybar" style="padding:5px;height:auto;">
|
||
<label>隐患</label><input class="easyui-switchbutton" data-options="onText:'开',offText:'关'">
|
||
</div> -->
|
||
<div id="map" class="map" style="width:100%;height:auto;outline: #4A74A8 solid 0.15em;">
|
||
</div>
|
||
<input type='hidden' id='mapshowinput'></input>
|
||
<div id="popup" class="ol-popup">
|
||
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
||
<div id="popup-content"></div>
|
||
</div>
|
||
<style>
|
||
.ol-popup {
|
||
position: absolute;
|
||
background-color: white;
|
||
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
border: 1px solid #cccccc;
|
||
bottom: 12px;
|
||
left: -50px;
|
||
min-width: 280px;
|
||
}
|
||
|
||
.ol-popup:after,
|
||
.ol-popup:before {
|
||
top: 100%;
|
||
border: solid transparent;
|
||
content: " ";
|
||
height: 0;
|
||
width: 0;
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.ol-popup:after {
|
||
border-top-color: white;
|
||
border-width: 10px;
|
||
left: 48px;
|
||
margin-left: -10px;
|
||
}
|
||
|
||
.ol-popup:before {
|
||
border-top-color: #cccccc;
|
||
border-width: 11px;
|
||
left: 48px;
|
||
margin-left: -11px;
|
||
}
|
||
|
||
.ol-popup-closer {
|
||
text-decoration: none;
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 8px;
|
||
}
|
||
|
||
.ol-popup-closer:after {
|
||
content: "✖";
|
||
}
|
||
</style>
|
||
<script>
|
||
var map, source, vector;// global so we can remove it later
|
||
var container = document.getElementById("popup");
|
||
var content = document.getElementById("popup-content");
|
||
var popupCloser = document.getElementById("popup-closer");
|
||
var overlay = new ol.Overlay({
|
||
//设置弹出框的容器
|
||
element: container,
|
||
//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
|
||
autoPan: true
|
||
});
|
||
$.get('api/map?a=default', function (res) {
|
||
$('#map').empty()
|
||
map = initMap(res.pic)
|
||
update()
|
||
})
|
||
|
||
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: 'map',
|
||
view: new ol.View({
|
||
projection: projection,
|
||
center: ol.extent.getCenter(extent),
|
||
zoom: 2.3,
|
||
maxZoom: 8
|
||
}),
|
||
controls: ol.control.defaults().extend([new ol.control.FullScreen()])
|
||
});
|
||
source = new ol.source.Vector({ wrapX: false });
|
||
vector = new ol.layer.Vector({
|
||
source: source
|
||
});
|
||
map.addLayer(vector);//加载图层
|
||
map.on('pointermove', function (e) {
|
||
|
||
//在点击时获取像素区域
|
||
var pixel = map.getEventPixel(e.originalEvent);
|
||
var feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
|
||
//在视口中遍历所有具有像素颜色的图层，如果图层存在，则返回
|
||
return feature;
|
||
});
|
||
if (feature) {
|
||
var data = feature.getProperties()
|
||
//设置弹出框内容，可以HTML自定义
|
||
var html = "<p style='color:blue'>" + data.name + "</span></p>"
|
||
if (data.type == 'yh') {
|
||
html = html + "<p>事故隐患数量:" + data.num.toString() + "</p>" + "<p><a href='#' onclick='opendetail(" + data.id.toString() + ")'>查看详情</a></p>"
|
||
}
|
||
else if (data.type == 'ws') {
|
||
html = html + "<p>未遂事件数量:" + data.num.toString() + "</p>" + "<p><a href='#' onclick='opendetail(" + data.id.toString() + ")'>查看详情</a></p>"
|
||
}
|
||
else if (data.type == 'fx') {
|
||
html = html + "<p>风险等级:" + data.risklevel + "</p>" + "<p><a href='#' onclick='opendetail(" + data.id.toString() + ")'>查看详情</a></p>"
|
||
}
|
||
else if (data.type == 'zy') {
|
||
html = html + "<p>危险作业数量:" + data.num.toString() + "</p>" + "<p><a href='#' onclick='opendetail(" + data.id.toString() + ")'>查看详情</a></p>"
|
||
}
|
||
content.innerHTML = html;
|
||
//设置overlay的显示位置
|
||
overlay.setPosition(e.coordinate);
|
||
//显示overlay
|
||
map.addOverlay(overlay);
|
||
}
|
||
else {
|
||
closepopup()
|
||
}
|
||
});
|
||
map.on('click', function (e) {
|
||
var coordinate = e.coordinate;
|
||
var feature = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
|
||
return feature;
|
||
});
|
||
if (feature) {
|
||
var data = feature.getProperties()
|
||
opendetail(data.id)
|
||
}
|
||
});
|
||
popupCloser.onclick = function () {
|
||
closepopup()
|
||
return false;
|
||
};
|
||
return map
|
||
}
|
||
function closepopup() {
|
||
overlay.setPosition(undefined);
|
||
popupCloser.blur();
|
||
}
|
||
var createPolygonStyle = function (feature) {
|
||
var data = feature.getProperties()
|
||
var color
|
||
if (data.risklevel == "重大风险") {
|
||
color = 'rgb(255,0,0,0.6)'
|
||
} else if (data.risklevel == "一般风险") {
|
||
color = 'rgb(255,255,0,0.6)'
|
||
} else if (data.risklevel == "较大风险") {
|
||
color = 'rgb(255,165,0,0.6)'
|
||
} else {
|
||
color = 'rgb(0,0,255,0.6)'
|
||
}
|
||
return new ol.style.Style({
|
||
fill: new ol.style.Fill({
|
||
color: color
|
||
}),
|
||
|
||
text: new ol.style.Text({
|
||
textAlign: 'center', //位置
|
||
textBaseline: 'middle', //基准线
|
||
font: 'normal 14px 微软雅黑', //文字样式
|
||
text: data.name, //文本内容
|
||
fill: new ol.style.Fill({
|
||
color: 'rgb(255,255,255)'
|
||
}),
|
||
// stroke: new ol.style.Stroke({
|
||
// width: 0.5,
|
||
// color: [255, 0, 255, 0.5]
|
||
// }),
|
||
})
|
||
|
||
});
|
||
}
|
||
var createPointStyle = function (feature) {
|
||
var data = feature.getProperties()
|
||
if (data.type == 'yh') {
|
||
src = '/static/safesite/mystatic/images/mapyh.png'
|
||
anchor = [0.5, 50]
|
||
} else if (data.type == 'ws') {
|
||
src = '/static/safesite/mystatic/images/mapws.png'
|
||
anchor = [0.1, 50]
|
||
}
|
||
else if (data.type == 'zy') {
|
||
src = '/static/safesite/mystatic/images/mapzy.png'
|
||
anchor = [0.9, 50]
|
||
}
|
||
else {
|
||
src = '/static/safesite/mystatic/images/icon1.png'
|
||
}
|
||
return new ol.style.Style({
|
||
/**{olx.style.IconOptions}类型*/
|
||
image: new ol.style.Icon(
|
||
({
|
||
anchor: anchor,
|
||
anchorOrigin: 'top-right',
|
||
anchorXUnits: 'fraction',
|
||
anchorYUnits: 'pixels',
|
||
offsetOrigin: 'top-right',
|
||
// offset:[0,10],
|
||
//图标缩放比例
|
||
// scale:0.5,
|
||
//透明度
|
||
opacity: 0.75,
|
||
//图标的url
|
||
src: src
|
||
})
|
||
),
|
||
text: new ol.style.Text({
|
||
textAlign: 'center', //位置
|
||
textBaseline: 'middle', //基准线
|
||
font: 'normal 14px 微软雅黑', //文字样式
|
||
//text: feature.get('name'), //文本内容
|
||
})
|
||
|
||
});
|
||
}
|
||
function setPoint(i) {
|
||
var extent = ol.extent.boundingExtent(i.polygon[0]);
|
||
var center = ol.extent.getCenter(extent);
|
||
var pointFeature = new ol.Feature({
|
||
geometry: new ol.geom.Point(center),
|
||
id: i.id,
|
||
name: i.name,
|
||
type: i.type,
|
||
num: i.num
|
||
});
|
||
pointFeature.setStyle(createPointStyle(pointFeature));
|
||
source.addFeature(pointFeature)
|
||
}
|
||
function setPolygon(i) {
|
||
var polygonFeature = new ol.Feature({
|
||
geometry: new ol.geom.Polygon(i.polygon),
|
||
id: i.id,
|
||
name: i.name,
|
||
type: 'fx',
|
||
risklevel: i.risklevel
|
||
});
|
||
polygonFeature.setStyle(createPolygonStyle(polygonFeature));
|
||
source.addFeature(polygonFeature)
|
||
}
|
||
function opendetail(id) {
|
||
closepopup()
|
||
var myw = screen.availWidth * 0.5;
|
||
opendg('区域详情', 'html/areadetail?id=' + id, myw)
|
||
|
||
}
|
||
|
||
</script> |