Skip to content

html / MeteorologicalBureau

Go to a project
Commit 0339d798 by hanjixin
Options

icon

parent 33d15abd
Showing with 86 additions and 69 deletions
map/css/main.css
......@@ -29,10 +29,24 @@ body,
float: left;
width: 16px;
height: 16px;
background-image: url(../img/menuicon.png);
background-size: 100% 100%;
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{
position: relative;
width: 153px;
......
map/index.html
......@@ -31,14 +31,14 @@
</div> -->
<div id="container"></div>
<div id=nav>
<div class="item" onclick="go(0)"><span class="icon"></span>预警信息</div>
<div class="item active" onclick="go(1)"><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 icon2"></span>设备</div>
<div class="subnav active subnav1">
<div class=active onclick="go(1,0)">大喇叭</div>
<div onclick="go(1,1)">显示屏</div>
<div onclick="go(1,2)">北斗</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 onclick="go(2,0)">信息员</div>
<div onclick="go(2,1)">应急责任人</div>
......@@ -54,61 +54,7 @@
<style>
.amap-logo,.amap-copyright{opacity: 0;display: none!important;}
</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>
//http://106.120.82.243:8080/qxyj/pageHtml/login.html wis 12379
import { Map3D } from './js/Map3D.js';
......@@ -151,6 +97,61 @@
});
}
</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>
</html>
\ No newline at end of file
map/js/Map3D.js
......@@ -81,7 +81,7 @@ class Map3D {
this.cluster.addMarkers(markers)
} else {
this.cluster = new AMap.MarkerClusterer(this.map, markers, {
gridSize: 80,
gridSize: 20,
zoomOnClick: false,
renderClusterMarker: function (context) {
_renderClusterMarker(context, markers.length);
......@@ -151,7 +151,7 @@ class Map3D {
// 图标尺寸
size: new AMap.Size(20, 20),
// 图标的取图地址
image: 'img/1.png',
image: 'img/3.png',
// 图标所用图片大小
imageSize: new AMap.Size(20, 20),
// 图标取图偏移量
......@@ -161,7 +161,7 @@ class Map3D {
map: this.map,
clickable: true,
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 } //相对于基点的位置
});
......@@ -207,7 +207,7 @@ class Map3D {
// 图标尺寸
size: new AMap.Size(20, 20),
// 图标的取图地址
image: 'img/1.png',
image: 'img/3.png',
// 图标所用图片大小
imageSize: new AMap.Size(20, 20),
// 图标取图偏移量
......@@ -217,7 +217,7 @@ class Map3D {
map: this.map,
clickable: true,
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 } //相对于基点的位置
});
......@@ -286,9 +286,10 @@ class Map3D {
return marker
}
setEquipmentPoint(item) {
var name = '大喇叭'
if(item.clientStyle==2)name = '显示屏'
if(item.clientStyle==3)name = '北斗'
var name = '大喇叭',
imagestr= 'img/2.png';
if(item.clientStyle==2)name = '显示屏',imagestr= 'img/1.png';
if(item.clientStyle==3)name = '北斗',imagestr= 'img/3.png';
var html = `
<div id=box>
<div id=title>${name}</div>
......@@ -316,7 +317,7 @@ class Map3D {
// 图标尺寸
size: new AMap.Size(20, 20),
// 图标的取图地址
image: 'img/1.png',
image: imagestr,
// 图标所用图片大小
imageSize: new AMap.Size(20, 20),
// 图标取图偏移量
......@@ -326,7 +327,7 @@ class Map3D {
map: this.map,
clickable: true,
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 } //相对于基点的位置
});
......
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