添加杆塔地图,告警处置未对接,echart调试
This commit is contained in:
parent
7c0ae5000d
commit
5bc1dccdc8
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 8889
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ body {
|
|||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
}
|
||||
|
||||
|
|
@ -17,6 +17,7 @@ body {
|
|||
.main-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
|
|
@ -79,4 +80,22 @@ body {
|
|||
align-items: center;
|
||||
margin-top: 4%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.alarmDialog{
|
||||
color: #000;
|
||||
padding: 15px;
|
||||
}
|
||||
.layui-input, .layui-select, .layui-textarea {
|
||||
height: 38px;
|
||||
line-height: 1.3;
|
||||
line-height: 38px \9;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
background-color: transparent;
|
||||
color: #000 !important;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.black{
|
||||
color: #000;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,7 +1,10 @@
|
|||
let layer,table,buildCheck;
|
||||
let layer,table,buildCheck,$,form;
|
||||
const bidCode = parent.$('#bidPro').val();
|
||||
|
||||
layui.use(['layer','table'], function () {
|
||||
var isSubOk = false
|
||||
var mengIndex = 0
|
||||
layui.use(['layer','table','form','jquery'], function () {
|
||||
$ = layui.jquery
|
||||
form = layui.form
|
||||
layer = layui.layer;
|
||||
table = layui.table;
|
||||
//建管单位下拉选
|
||||
|
|
@ -120,4 +123,60 @@ function init(warnType){
|
|||
|
||||
function getQueryList(){
|
||||
init(buildCheck)
|
||||
}
|
||||
|
||||
function handleAlarm(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '告警处置', //显示标题栏
|
||||
closeBtn: false,
|
||||
area: '600px;',
|
||||
id: 'LAY_layuipro' //设定一个id，防止重复弹出
|
||||
,
|
||||
resize: false,
|
||||
btn: ['确定', '取消'],
|
||||
btnAlign: 'c',
|
||||
moveType: 1 //拖拽模式，0或者1
|
||||
,
|
||||
content: $("#biaodan"),
|
||||
success: function (layero) {
|
||||
$(':focus').blur();
|
||||
// 添加form标识
|
||||
layero.addClass('layui-form');
|
||||
// 将保存按钮改变成提交按钮
|
||||
layero.find('.layui-layer-btn0').attr({
|
||||
'lay-filter': 'formDemo',
|
||||
'lay-submit': ''
|
||||
});
|
||||
form.render();
|
||||
},
|
||||
yes: function (layero, index) {
|
||||
form.on('submit(formDemo)', function (data) {
|
||||
//表单数据formData
|
||||
var formData = data.field;
|
||||
console.log(formData)
|
||||
const url = commonUrl + "screen/largeScreen/constructionQuality/qualityInspection";
|
||||
const params = {
|
||||
"roleCode": roleCode,
|
||||
"orgId": orgId,
|
||||
"userId": userId,
|
||||
"bidCode": bidCode
|
||||
}
|
||||
let encryptStr = encryptCBC(JSON.stringify(params));
|
||||
ajaxRequest(url, "POST", encryptStr, true, function () {
|
||||
}, function (result) {
|
||||
console.log(result);
|
||||
if (result.code === 200) {
|
||||
|
||||
} else if (result.code === 500) {
|
||||
layer.msg(result.msg, { icon: 2 });
|
||||
}else if(result.code === 401){
|
||||
|
||||
}
|
||||
}, function (xhr, status, error) {
|
||||
error(xhr, status, error)
|
||||
}, "application/json",aqEnnable);
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<title>3D模型</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
font-family: Monospace;
|
||||
background-color: #fff;
|
||||
color: black;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#modelBorderContainer{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#modelBorder {
|
||||
max-width: 512px;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
canvas{
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="modelBorderContainer">
|
||||
<div id="modelBorder"></div>
|
||||
</div>
|
||||
<script type="application/javascript">
|
||||
var modelUrl = 'models/model.glb'; //定义所使用模型路径
|
||||
</script>
|
||||
<script src="lib/three.min.js?v=2.0.3"></script>
|
||||
<script src="lib/OrbitControls.js?v=2.0.3"></script>
|
||||
<script src="lib/GLTFLoader.js?v=2.0.3"></script>
|
||||
<script src="lib/WebGL.js?v=2.0.3"></script>
|
||||
<script src="lib/stats.min.js?v=2.0.3"></script>
|
||||
<script src="lib/3dmodel.js?v=2.0.3"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
if ( WEBGL.isWebGLAvailable() === false ) {
|
||||
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
|
||||
}
|
||||
var container, stats, controls;
|
||||
var camera, scene, renderer, light, bbox;
|
||||
var rotating = true;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
pauseRotation();
|
||||
|
||||
function init() {
|
||||
console.log('init')
|
||||
if (!modelUrl) {
|
||||
return false;
|
||||
}
|
||||
container = document.createElement( 'div' );
|
||||
document.body.appendChild( container );
|
||||
|
||||
scene = new THREE.Scene();
|
||||
bbox = new THREE.Box3();
|
||||
|
||||
scene.background = new THREE.Color( 0xeeeeee );
|
||||
light = new THREE.HemisphereLight( 0xbbbbff, 0x444422, 1.5 );
|
||||
light.position.set( 0, 1, 0 );
|
||||
|
||||
scene.add( light );
|
||||
scene.rotation.y += -3.15;
|
||||
scene.rotation.x += 1.5;
|
||||
scene.rotation.z += 1;
|
||||
var loader = new THREE.GLTFLoader();
|
||||
|
||||
loader.load(modelUrl, function ( gltf ) {
|
||||
gltf.scene.name = '3dmodel';
|
||||
setContent(gltf.scene);
|
||||
scene.add( gltf.scene );
|
||||
}, undefined, function ( e ) {
|
||||
console.error( e );
|
||||
} );
|
||||
|
||||
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
renderer.gammaOutput = true;
|
||||
container.appendChild( renderer.domElement );
|
||||
window.addEventListener( 'resize', onWindowResize, false );
|
||||
|
||||
camera = new THREE.PerspectiveCamera(20,window.innerWidth / window.innerHeight,0.01,1000);
|
||||
|
||||
controls = new THREE.OrbitControls(camera);
|
||||
// to disable pan
|
||||
controls.enablePan = false;
|
||||
// to disable zoom
|
||||
//controls.enableZoom = false;
|
||||
controls.enableZoom = true;
|
||||
controls.target.set(0,0,0);
|
||||
controls.update();
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
console.log('onWindowResize')
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
}
|
||||
//
|
||||
function animate() {
|
||||
console.log('animate')
|
||||
requestAnimationFrame( animate );
|
||||
if (rotating) {
|
||||
// scene.rotation.y += -0.001;
|
||||
} else {
|
||||
// scene.rotation.y = scene.rotation.y;
|
||||
}
|
||||
renderer.render( scene, camera );
|
||||
}
|
||||
|
||||
function pauseRotation() {
|
||||
console.log('pauseRotation')
|
||||
var modelBorder = document.getElementById("modelBorder");
|
||||
modelBorder.addEventListener("mouseenter", function( event ) {
|
||||
rotating = false;
|
||||
});
|
||||
modelBorder.addEventListener("mouseleave", function( event ) {
|
||||
rotating = true;
|
||||
});
|
||||
modelBorder.addEventListener('touchmove', function(e) {
|
||||
rotating = false;
|
||||
}, false);
|
||||
modelBorder.addEventListener('touchstart', function(e) {
|
||||
rotating = false;
|
||||
}, false);
|
||||
modelBorder.addEventListener('touchend', function(e) {
|
||||
rotating = true;
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
function setContent(object) {
|
||||
console.log('setContent')
|
||||
object.updateMatrixWorld();
|
||||
|
||||
const box = new THREE.Box3().setFromObject(object);
|
||||
const size = box.getSize(new THREE.Vector3()).length();
|
||||
const boxSize = box.getSize(new THREE.Vector3());
|
||||
const center = box.getCenter(new THREE.Vector3());
|
||||
|
||||
object.position.x += object.position.x - center.x;
|
||||
object.position.y += object.position.y - center.y;
|
||||
object.position.z += object.position.z - center.z;
|
||||
|
||||
camera.position.copy(center);
|
||||
if (boxSize.x > boxSize.y) {
|
||||
camera.position.z = boxSize.x * -2.85
|
||||
} else {
|
||||
camera.position.z = boxSize.y * -2.85
|
||||
}
|
||||
camera.lookAt(0, 0, 0);
|
||||
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,94 @@
|
|||
/**
|
||||
* @author alteredq / http://alteredqualia.com/
|
||||
* @author mr.doob / http://mrdoob.com/
|
||||
*/
|
||||
|
||||
var WEBGL = {
|
||||
|
||||
isWebGLAvailable: function () {
|
||||
|
||||
try {
|
||||
|
||||
var canvas = document.createElement( 'canvas' );
|
||||
return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );
|
||||
|
||||
} catch ( e ) {
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
isWebGL2Available: function () {
|
||||
|
||||
try {
|
||||
|
||||
var canvas = document.createElement( 'canvas' );
|
||||
return !! ( window.WebGL2RenderingContext && canvas.getContext( 'webgl2' ) );
|
||||
|
||||
} catch ( e ) {
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
getWebGLErrorMessage: function () {
|
||||
|
||||
return this.getErrorMessage( 1 );
|
||||
|
||||
},
|
||||
|
||||
getWebGL2ErrorMessage: function () {
|
||||
|
||||
return this.getErrorMessage( 2 );
|
||||
|
||||
},
|
||||
|
||||
getErrorMessage: function ( version ) {
|
||||
|
||||
var names = {
|
||||
1: 'WebGL',
|
||||
2: 'WebGL 2'
|
||||
};
|
||||
|
||||
var contexts = {
|
||||
1: window.WebGLRenderingContext,
|
||||
2: window.WebGL2RenderingContext
|
||||
};
|
||||
|
||||
var message = 'Your $0 does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">$1</a>';
|
||||
|
||||
var element = document.createElement( 'div' );
|
||||
element.id = 'webglmessage';
|
||||
element.style.fontFamily = 'monospace';
|
||||
element.style.fontSize = '13px';
|
||||
element.style.fontWeight = 'normal';
|
||||
element.style.textAlign = 'center';
|
||||
element.style.background = '#fff';
|
||||
element.style.color = '#000';
|
||||
element.style.padding = '1.5em';
|
||||
element.style.width = '400px';
|
||||
element.style.margin = '5em auto 0';
|
||||
|
||||
if ( contexts[ version ] ) {
|
||||
|
||||
message = message.replace( '$0', 'graphics card' );
|
||||
|
||||
} else {
|
||||
|
||||
message = message.replace( '$0', 'browser' );
|
||||
|
||||
}
|
||||
|
||||
message = message.replace( '$1', names[ version ] );
|
||||
|
||||
element.innerHTML = message;
|
||||
|
||||
return element;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// stats.js - http://github.com/mrdoob/stats.js
|
||||
var Stats=function(){function h(a){c.appendChild(a.dom);return a}function k(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();k(++l%c.children.length)},!1);var g=(performance||Date).now(),e=g,a=0,r=h(new Stats.Panel("FPS","#0ff","#002")),f=h(new Stats.Panel("MS","#0f0","#020"));
|
||||
if(self.performance&&self.performance.memory)var t=h(new Stats.Panel("MB","#f08","#201"));k(0);return{REVISION:16,dom:c,addPanel:h,showPanel:k,begin:function(){g=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();f.update(c-g,200);if(c>e+1E3&&(r.update(1E3*a/(c-e),100),e=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){g=this.end()},domElement:c,setMode:k}};
|
||||
Stats.Panel=function(h,k,l){var c=Infinity,g=0,e=Math.round,a=e(window.devicePixelRatio||1),r=80*a,f=48*a,t=3*a,u=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=f;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,f);b.fillStyle=k;b.fillText(h,t,u);b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(f,
|
||||
v){c=Math.min(c,f);g=Math.max(g,f);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=k;b.fillText(e(f)+" "+h+" ("+e(c)+"-"+e(g)+")",t,u);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,e((1-f/v)*p))}}};"object"===typeof module&&(module.exports=Stats);
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -56,6 +56,11 @@
|
|||
<button class="layui-btn" onclick="getQueryList()">查询</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<div class="layui-col-xs12">
|
||||
<button class="layui-btn" id="layerBtn" onclick="handleAlarm()">告警处置</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
|
@ -65,7 +70,32 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
<div style="display: none" id="biaodan" class="alarmDialog">
|
||||
<form class="layui-form" lay-filter="alarmForm" style="width: 100%;" onsubmit="return false;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">告警内容:</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="alarmContent" id="alarmContent" required lay-verify="required" lay-reqtext="请输入告警内容" placeholder="请输入告警内容" autocomplete="off" class="layui-input" maxlength="100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">是否告警:</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="isAlarm" value="1" title="是" checked>
|
||||
<input type="radio" name="isAlarm" value="2" title="否" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">备注:</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="alarmMask" id="alarmMask" placeholder="请输入内容" class="layui-textarea" maxlength="100"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <button style="display: none" id="submit" class="layui-btn" lay-submit lay-filter="submit">提交</button> -->
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../js/pages/alarmMge/alarmMge.js" type="text/javascript"></script>
|
||||
|
|
|
|||
|
|
@ -23,10 +23,16 @@ body {
|
|||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.layout {
|
||||
/* .layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
} */
|
||||
.layout{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#left-box, #center-box, #right-box {
|
||||
|
|
@ -54,6 +60,25 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
#map{
|
||||
height: 100%;
|
||||
}
|
||||
.switch-btn {
|
||||
width: 15%;
|
||||
height: 5%;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
background: url("../image/Rectangle107.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
z-index: 9999;
|
||||
}
|
||||
.map-p{
|
||||
color: #000;
|
||||
font-weight: normal;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
}
|
||||
#left-box {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
const baseUrl = 'http://10.40.92.33:18080/zhgd'
|
||||
// const baseUrl = 'http://192.168.0.7:18080/zhgd'
|
||||
|
||||
var loader = {
|
||||
get: function (url, data = null, scb) {
|
||||
|
|
@ -24,13 +25,28 @@ var loader = {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
let gtList=[];
|
||||
var terrainMap;
|
||||
let element, layer, table;
|
||||
layui.use(['layer', 'element', 'table'], function () {
|
||||
layui.use(['form','layer', 'element', 'table'], function () {
|
||||
element = layui.element;
|
||||
layer = layui.layer;
|
||||
table = layui.table;
|
||||
form = layui.form;
|
||||
|
||||
//地形切换
|
||||
form.on('switch(terrain)', function (data) {
|
||||
if (this.checked) {
|
||||
$('#echarts-map').css('display', 'none');
|
||||
$('#map').css('display', 'block');
|
||||
initMap()
|
||||
} else {
|
||||
$('#echarts-map').css('display', 'block');
|
||||
$('#map').css('display', 'none');
|
||||
}
|
||||
});
|
||||
|
||||
getGtList();
|
||||
// 工程统计
|
||||
initEngineeringStatistic()
|
||||
|
||||
|
|
@ -45,6 +61,7 @@ layui.use(['layer', 'element', 'table'], function () {
|
|||
|
||||
// 安徽省地图
|
||||
initMainMap()
|
||||
|
||||
initRiskData()
|
||||
|
||||
// 工程安全隐患分析
|
||||
|
|
@ -152,7 +169,7 @@ function initDeviceStatus() {
|
|||
$('#device-status__total').text(allTotalNum)
|
||||
$('#device-status__online').text(onlineTotalNum)
|
||||
$('#device-status__offline').text(offTotalNum)
|
||||
|
||||
// console.log(valueList)
|
||||
valueList.forEach(item => {
|
||||
const {proName, totalNum, onlineNum, offLineNum} = item
|
||||
xLabel.push(proName)
|
||||
|
|
@ -160,14 +177,14 @@ function initDeviceStatus() {
|
|||
data2.push(onlineNum)
|
||||
data3.push(offLineNum)
|
||||
})
|
||||
|
||||
// console.log(xLabel)
|
||||
let option = {
|
||||
tooltip,
|
||||
dataZoom: [{
|
||||
type: "slider",
|
||||
realtime: true,
|
||||
startValue: 0,
|
||||
endValue: 100,
|
||||
endValue: 4,
|
||||
height: 3,
|
||||
fillerColor: "#08A0A3", // 滚动条颜色
|
||||
borderColor: "#08A0A3",
|
||||
|
|
@ -183,7 +200,7 @@ function initDeviceStatus() {
|
|||
{
|
||||
type: "inside", // 支持内部鼠标滚动平移
|
||||
startValue: 0,
|
||||
endValue: 100,
|
||||
endValue: 4,
|
||||
zoomOnMouseWheel: false, // 关闭滚轮缩放
|
||||
moveOnMouseWheel: true, // 开启滚轮平移
|
||||
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
||||
|
|
@ -364,7 +381,7 @@ function initDeviceStatus() {
|
|||
type: 'bar',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: '#D299FF',
|
||||
color: '#CA98F9',
|
||||
},
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
|
|
@ -643,6 +660,161 @@ function initRiskData() {
|
|||
initMainMap(mapPointList)
|
||||
})
|
||||
}
|
||||
//获取杆塔坐标
|
||||
function getGtList(){
|
||||
// $.ajax({
|
||||
// url: baseUrl + 'proteam/pot/home/getGtList?token=' + token,
|
||||
// data: {
|
||||
// proNo:"2222"
|
||||
// },
|
||||
// type: 'post',
|
||||
// success: function (result) {
|
||||
// gtList=result.data;
|
||||
// },
|
||||
// });
|
||||
gtList=[
|
||||
{
|
||||
lat:118.07138310,
|
||||
lon:31.05344367,
|
||||
proName:'线路工程',
|
||||
towerName:'A1',
|
||||
},
|
||||
{
|
||||
lat:118.07050390,
|
||||
lon:31.05571928,
|
||||
proName:'线路工程',
|
||||
towerName:'A2',
|
||||
},
|
||||
{
|
||||
lat:118.06960770,
|
||||
lon:31.05803784,
|
||||
proName:'线路工程',
|
||||
towerName:'A3',
|
||||
},
|
||||
{
|
||||
lat:118.0684919,
|
||||
lon:31.06092441,
|
||||
proName:'线路工程',
|
||||
towerName:'A4',
|
||||
},
|
||||
{
|
||||
lat:118.07093833,
|
||||
lon:31.06312931,
|
||||
proName:'线路工程',
|
||||
towerName:'A5',
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
function initMap(){
|
||||
createMap()
|
||||
addMapControl(); // 添加自定义控件
|
||||
setMapEvent(); //地图控件设置
|
||||
$('#allMap').css({'zIndex': 999, 'backgroundColor': 'transparent'});
|
||||
|
||||
var points=[];
|
||||
for(var i = 0; i < gtList.length; i++) {
|
||||
var point=new Object();
|
||||
point.lng=gtList[i].lon;
|
||||
point.lat=gtList[i].lat;
|
||||
point.proName=gtList[i].proName;
|
||||
point.img='../../../img/map/bdz.png';
|
||||
point.place=gtList[i].towerName;
|
||||
points.push(point);
|
||||
}
|
||||
console.log(points)
|
||||
for(var i=0, len = points.length; i<len; i++) {
|
||||
//自定义图标
|
||||
var pointIcon = new BMap.Icon(points[i].img,new BMap.Size(27,27));
|
||||
//将标注点转化为地图上的点
|
||||
var point = new BMap.Point(points[i].lat, points[i].lng);
|
||||
var infoWindow = new BMap.InfoWindow( points[i].place);
|
||||
//将点转化为标注点
|
||||
var marker = new BMap.Marker(point,{icon:pointIcon});
|
||||
//添加点图层
|
||||
terrainMap.addOverlay(marker);
|
||||
(function() {
|
||||
let title= '<p class="map-p">工程名称：' + points[i].proName+ '</p>' +
|
||||
'<p class="map-p">杆塔名称：' + points[i].place + '</p>' +
|
||||
'<p class="map-p">经度：' +points[i].lat + '</p>' +
|
||||
'<p class="map-p">维度：' + points[i].lng+ '</p>';
|
||||
|
||||
//创建label图层 points[i].place
|
||||
var label = new BMap.Label(title,{position:point});
|
||||
marker.addEventListener("mouseover",function() {
|
||||
terrainMap.addOverlay(label);
|
||||
});
|
||||
marker.addEventListener("mouseout",function() {
|
||||
terrainMap.removeOverlay(label);
|
||||
});
|
||||
})();
|
||||
}
|
||||
//将所有点连线，连线图层polyline
|
||||
var line = [];
|
||||
for(var i=0; i<points.length; i++){
|
||||
console.log(points[i].lng, points[i].lat)
|
||||
line.push(new BMap.Point(points[i].lat, points[i].lng));
|
||||
}
|
||||
line.push(new BMap.Point(points[0].lat, points[0].lng));
|
||||
console.log(line,'line')
|
||||
console.log(line)
|
||||
var polyline = new BMap.Polyline(line,{strokeColor:'#00aa00',strokeWeight:2,strokeOpacity:1});
|
||||
terrainMap.addOverlay(polyline);
|
||||
|
||||
}
|
||||
function createMap(){
|
||||
terrainMap = new BMap.Map("map", {});
|
||||
terrainMap.centerAndZoom('合肥', 8);
|
||||
|
||||
}
|
||||
//向地图添加控件start
|
||||
function addMapControl() {
|
||||
var mystyleJson = [{
|
||||
"featureType": "road",
|
||||
"elementType": "all",
|
||||
"stylers": {
|
||||
"lightness": 20
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "railway",
|
||||
"elementType": "all",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "local",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "water",
|
||||
"elementType": "all",
|
||||
"stylers": {
|
||||
"color": "#d1e5ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"featureType": "highway",
|
||||
"elementType": "labels",
|
||||
"stylers": {}
|
||||
}
|
||||
];
|
||||
terrainMap.setMapStyle({
|
||||
styleJson: mystyleJson
|
||||
});
|
||||
}
|
||||
//地图设置start
|
||||
function setMapEvent() {
|
||||
terrainMap.enableScrollWheelZoom();
|
||||
terrainMap.enableKeyboard();
|
||||
terrainMap.enableDragging();
|
||||
terrainMap.enableDoubleClickZoom();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 右侧
|
||||
|
|
@ -934,7 +1106,7 @@ function initEfficiencyAnalysis() {
|
|||
type: "slider",
|
||||
realtime: true,
|
||||
startValue: 0,
|
||||
endValue: 100,
|
||||
endValue: 3,
|
||||
height: 3,
|
||||
fillerColor: "#08A0A3", // 滚动条颜色
|
||||
borderColor: "#08A0A3",
|
||||
|
|
@ -946,11 +1118,10 @@ function initEfficiencyAnalysis() {
|
|||
moveHandleStyle: {
|
||||
color: "#08A0A3",
|
||||
},
|
||||
},
|
||||
{
|
||||
},{
|
||||
type: "inside", // 支持内部鼠标滚动平移
|
||||
startValue: 0,
|
||||
endValue: 100,
|
||||
endValue: 3,
|
||||
zoomOnMouseWheel: false, // 关闭滚轮缩放
|
||||
moveOnMouseWheel: true, // 开启滚轮平移
|
||||
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
<script src="../../../plugin/layui-v2.9.7/layui/layui.js"></script>
|
||||
<script src="../../../js/publics/aes.js"></script>
|
||||
<script src="../../../js/publics/sm3.js"></script>
|
||||
<script src="http://api.map.baidu.com/getscript?v=3.0&ak=s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B"></script>
|
||||
<title>首页</title>
|
||||
|
||||
<style>
|
||||
|
|
@ -123,9 +124,16 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="center-box">
|
||||
<div id="echarts-map">
|
||||
|
||||
<div class="switch-btn">
|
||||
<form class="layui-form switch-form" onsubmit="return false;">
|
||||
<div class="layui-form-item layout">
|
||||
<p style="color: #fff;font-size: 18px;margin: 10px;">杆塔</p>
|
||||
<input type="checkbox" name="terrain" lay-skin="switch" lay-filter="terrain">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="map" style="display: none;"></div>
|
||||
<div id="echarts-map"></div>
|
||||
<div class="multiselect layout" id="multiselect">
|
||||
<div class="check-risk layout" isCheck='1'><img src="../image/xz.png">
|
||||
<p checkedName="" style="color: white">全选</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue