Skip to content

html / MeteorologicalBureau

Go to a project
Commit cfcb5fd8 by hank
Options

Merge branch 'develop' of gitlab.maxrocky.com:hanjixin/MeteorologicalBureau into develop

parents d5374fc2 866a75f6
Showing with 87 additions and 70 deletions
map/css/main.css
...@@ -29,10 +29,24 @@ body, ...@@ -29,10 +29,24 @@ body,
float: left; float: left;
width: 16px; width: 16px;
height: 16px; height: 16px;
background-image: url(../img/menuicon.png);
background-size: 100% 100%; background-size: 100% 100%;
margin-right: 5px; margin-right: 5px;
} }
.icon1{
background-image: url(../img/menuicon1.png);
}
.icon2{
background-image: url(../img/menuicon2.png);
background-size: 100% 70%;
background-repeat: no-repeat;
background-position: center center;
}
.icon3{
background-image: url(../img/menuicon3.png);
background-size: 300% 300%;
background-repeat: no-repeat;
background-position: center center;
}
.item{ .item{
position: relative; position: relative;
width: 153px; width: 153px;
......
map/index.html
...@@ -31,14 +31,14 @@ ...@@ -31,14 +31,14 @@
</div> --> </div> -->
<div id="container"></div> <div id="container"></div>
<div id=nav> <div id=nav>
<div class="item" onclick="go(0)"><span class="icon"></span>预警信息</div> <div class="item" onclick="go(0)"><span class="icon icon1"></span>预警信息</div>
<div class="item active" onclick="go(1)"><span class="icon"></span>设备</div> <div class="item active" onclick="go(1)"><span class="icon icon2"></span>设备</div>
<div class="subnav active subnav1"> <div class="subnav active subnav1">
<div class=active onclick="go(1,0)">大喇叭</div> <div class=active onclick="go(1,0)">大喇叭</div>
<div onclick="go(1,1)">显示屏</div> <div onclick="go(1,1)">显示屏</div>
<div onclick="go(1,2)">北斗</div> <div onclick="go(1,2)">北斗</div>
</div> </div>
<div class="item" onclick="go(2)"><span class="icon"></span>人员</div> <div class="item" onclick="go(2)"><span class="icon icon3"></span>人员</div>
<div class="subnav subnav2"> <div class="subnav subnav2">
<div onclick="go(2,0)">信息员</div> <div onclick="go(2,0)">信息员</div>
<div onclick="go(2,1)">应急责任人</div> <div onclick="go(2,1)">应急责任人</div>
...@@ -54,61 +54,7 @@ ...@@ -54,61 +54,7 @@
<style> <style>
.amap-logo,.amap-copyright{opacity: 0;display: none!important;} .amap-logo,.amap-copyright{opacity: 0;display: none!important;}
</style> </style>
<script>
var oldi1 = 0, oldi2 = 0
function popclose(){
console.log('popclose');
map3d.map.clearInfoWindow()
}
function go(i1, i2) {
console.log(oldi1, oldi2);
console.log(i1, i2);
if (i1 == oldi1 && i2 == oldi2) {
return false
}
$(".item").removeClass("active").removeClass("text-shadow")
$(".item").eq(i1).addClass("active text-shadow")
$(".subnav").hide()
$(".subnav" + i1).show()
$(".subnav" + i1).find("div").removeClass("active").removeClass("text-shadow")
if (typeof (i2) != 'undefined') {
$(".subnav" + i1).find("div").eq(i2).addClass("active text-shadow")
}
if (i1 == 0 && typeof (i2) == 'undefined') {//预警信息
addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/city/two/list/'+urlParams.adcode,'setWarnPoint', 'Single')
oldi1 = i1, oldi2 = i2
}
if (i1 == 1 && i2 == 0) {//大喇叭
addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/equipment/two?code=${urlParams.adcode}&clientStyle=1`,'setEquipmentPoint', 'Cluster')
oldi1 = i1, oldi2 = i2
}
if (i1 == 1 && i2 == 1) {//显示屏
addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/equipment/two?code=${urlParams.adcode}&clientStyle=2`,'setEquipmentPoint', 'Single')
oldi1 = i1, oldi2 = i2
}
if (i1 == 1 && i2 == 2) {//北斗
addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/setEipment/two?code=${urlParams.adcode}&clientStyle=3`,'setEquipmentPoint', 'Single')
oldi1 = i1, oldi2 = i2
}
if (i1 == 2 && i2 == 0) {//信息员
addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/people/two/info/'+urlParams.adcode,'setPersonalPoint', 'Cluster')
oldi1 = i1, oldi2 = i2
}
if (i1 == 2 && i2 == 1) {//应急责任人
addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/people/two/principal/'+urlParams.adcode,'setPrincipalPoint', 'Single')
oldi1 = i1, oldi2 = i2
}
}
// go(i1,i2)
</script>
<script language=javascript type=module> <script language=javascript type=module>
//http://106.120.82.243:8080/qxyj/pageHtml/login.html wis 12379 //http://106.120.82.243:8080/qxyj/pageHtml/login.html wis 12379
import { Map3D } from './js/Map3D.js'; import { Map3D } from './js/Map3D.js';
...@@ -118,7 +64,7 @@ ...@@ -118,7 +64,7 @@
//350200 //350200
//350500 //350500
//320300 370100 //320300 370100
window.map3d = new Map3D(urlParams.adcode||'成都','container',urlParams,(_map3d)=>{ window.map3d = new Map3D(urlParams.adcode||'610000'||'成都','container',urlParams,(_map3d)=>{
go(1,1) go(1,1)
}); });
window.review = function (params) { window.review = function (params) {
...@@ -151,6 +97,61 @@ ...@@ -151,6 +97,61 @@
}); });
} }
</script> </script>
<script>
var oldi1 = 0, oldi2 = 0
function popclose(){
console.log('popclose');
map3d.map.clearInfoWindow()
}
function go(i1, i2) {
console.log(oldi1, oldi2);
console.log(i1, i2);
if (i1 == oldi1 && i2 == oldi2) {
return false
}
$(".item").removeClass("active").removeClass("text-shadow")
$(".item").eq(i1).addClass("active text-shadow")
$(".subnav").hide()
$(".subnav" + i1).show()
$(".subnav" + i1).find("div").removeClass("active").removeClass("text-shadow")
if (typeof (i2) != 'undefined') {
$(".subnav" + i1).find("div").eq(i2).addClass("active text-shadow")
}
if (i1 == 0 && typeof (i2) == 'undefined') {//预警信息
addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/city/two/list/'+urlParams.adcode,'setWarnPoint', 'Single')
oldi1 = i1, oldi2 = i2
}
if (i1 == 1 && i2 == 0) {//大喇叭
addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/equipment/two?code=${urlParams.adcode}&clientStyle=1`,'setEquipmentPoint', 'Cluster')
oldi1 = i1, oldi2 = i2
}
if (i1 == 1 && i2 == 1) {//显示屏
addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/equipment/two?code=${urlParams.adcode}&clientStyle=2`,'setEquipmentPoint', 'Single')
oldi1 = i1, oldi2 = i2
}
if (i1 == 1 && i2 == 2) {//北斗
addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/setEipment/two?code=${urlParams.adcode}&clientStyle=3`,'setEquipmentPoint', 'Single')
oldi1 = i1, oldi2 = i2
}
if (i1 == 2 && i2 == 0) {//信息员
addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/people/two/info/'+urlParams.adcode,'setPersonalPoint', 'Cluster')
oldi1 = i1, oldi2 = i2
}
if (i1 == 2 && i2 == 1) {//应急责任人
addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/people/two/principal/'+urlParams.adcode,'setPrincipalPoint', 'Single')
oldi1 = i1, oldi2 = i2
}
}
// go(i1,i2)
</script>
</body> </body>
</html> </html>
\ No newline at end of file
map/js/Map3D.js
...@@ -81,7 +81,7 @@ class Map3D { ...@@ -81,7 +81,7 @@ class Map3D {
this.cluster.addMarkers(markers) this.cluster.addMarkers(markers)
} else { } else {
this.cluster = new AMap.MarkerClusterer(this.map, markers, { this.cluster = new AMap.MarkerClusterer(this.map, markers, {
gridSize: 80, gridSize: 20,
zoomOnClick: false, zoomOnClick: false,
renderClusterMarker: function (context) { renderClusterMarker: function (context) {
_renderClusterMarker(context, markers.length); _renderClusterMarker(context, markers.length);
...@@ -151,7 +151,7 @@ class Map3D { ...@@ -151,7 +151,7 @@ class Map3D {
// 图标尺寸 // 图标尺寸
size: new AMap.Size(20, 20), size: new AMap.Size(20, 20),
// 图标的取图地址 // 图标的取图地址
image: 'img/1.png', image: 'img/3.png',
// 图标所用图片大小 // 图标所用图片大小
imageSize: new AMap.Size(20, 20), imageSize: new AMap.Size(20, 20),
// 图标取图偏移量 // 图标取图偏移量
...@@ -161,7 +161,7 @@ class Map3D { ...@@ -161,7 +161,7 @@ class Map3D {
map: this.map, map: this.map,
clickable: true, clickable: true,
position: new AMap.LngLat(Number(item.lon), Number(item.lat)), //基点位置 position: new AMap.LngLat(Number(item.lon), Number(item.lat)), //基点位置
icon: icon || 'img/1.png', //marker图标，直接传递地址url icon|| icon: icon || 'img/3.png', //marker图标，直接传递地址url icon||
offset: { x: -10, y: -10 } //相对于基点的位置 offset: { x: -10, y: -10 } //相对于基点的位置
}); });
...@@ -207,7 +207,7 @@ class Map3D { ...@@ -207,7 +207,7 @@ class Map3D {
// 图标尺寸 // 图标尺寸
size: new AMap.Size(20, 20), size: new AMap.Size(20, 20),
// 图标的取图地址 // 图标的取图地址
image: 'img/1.png', image: 'img/3.png',
// 图标所用图片大小 // 图标所用图片大小
imageSize: new AMap.Size(20, 20), imageSize: new AMap.Size(20, 20),
// 图标取图偏移量 // 图标取图偏移量
...@@ -217,7 +217,7 @@ class Map3D { ...@@ -217,7 +217,7 @@ class Map3D {
map: this.map, map: this.map,
clickable: true, clickable: true,
position: new AMap.LngLat(Number(lon), Number(lat)), //基点位置 position: new AMap.LngLat(Number(lon), Number(lat)), //基点位置
icon: icon || 'img/1.png', //marker图标，直接传递地址url icon|| icon: icon || 'img/3.png', //marker图标，直接传递地址url icon||
offset: { x: -10+randomNum, y: -10+randomNum } //相对于基点的位置 offset: { x: -10+randomNum, y: -10+randomNum } //相对于基点的位置
}); });
...@@ -286,9 +286,10 @@ class Map3D { ...@@ -286,9 +286,10 @@ class Map3D {
return marker return marker
} }
setEquipmentPoint(item) { setEquipmentPoint(item) {
var name = '大喇叭' var name = '大喇叭',
if(item.clientStyle==2)name = '显示屏' imagestr= 'img/2.png';
if(item.clientStyle==3)name = '北斗' if(item.clientStyle==2)name = '显示屏',imagestr= 'img/1.png';
if(item.clientStyle==3)name = '北斗',imagestr= 'img/3.png';
var html = ` var html = `
<div id=box> <div id=box>
<div id=title>${name}</div> <div id=title>${name}</div>
...@@ -316,7 +317,7 @@ class Map3D { ...@@ -316,7 +317,7 @@ class Map3D {
// 图标尺寸 // 图标尺寸
size: new AMap.Size(20, 20), size: new AMap.Size(20, 20),
// 图标的取图地址 // 图标的取图地址
image: 'img/1.png', image: imagestr,
// 图标所用图片大小 // 图标所用图片大小
imageSize: new AMap.Size(20, 20), imageSize: new AMap.Size(20, 20),
// 图标取图偏移量 // 图标取图偏移量
...@@ -326,7 +327,7 @@ class Map3D { ...@@ -326,7 +327,7 @@ class Map3D {
map: this.map, map: this.map,
clickable: true, clickable: true,
position: new AMap.LngLat(Number(item.lon), Number(item.lat)), //基点位置 position: new AMap.LngLat(Number(item.lon), Number(item.lat)), //基点位置
icon: icon || 'img/1.png', //marker图标，直接传递地址url icon|| icon: icon || imagestr, //marker图标，直接传递地址url icon||
offset: { x: -10, y: -10 } //相对于基点的位置 offset: { x: -10, y: -10 } //相对于基点的位置
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment