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 72 additions and 57 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,6 +54,49 @@ ...@@ -54,6 +54,49 @@
<style> <style>
.amap-logo,.amap-copyright{opacity: 0;display: none!important;} .amap-logo,.amap-copyright{opacity: 0;display: none!important;}
</style> </style>
<script language=javascript type=module>
//http://106.120.82.243:8080/qxyj/pageHtml/login.html wis 12379
import { Map3D } from './js/Map3D.js';
import { GetParams } from './js/tools.js';
window.urlParams = GetParams()
//成都 重庆 天津 北京 上海 大连 三沙 湖北 中国
//350200
//350500
//320300 370100
window.map3d = new Map3D(urlParams.adcode||'610000'||'成都','container',urlParams,(_map3d)=>{
go(1,1)
});
window.review = function (params) {
map3d.review()
}
window.delPoi = function (params) {
try {
map3d.map.clearInfoWindow()
map3d.delPoi(pois)
window.pois = []
} catch (error) {
}
}
window.addPoiByApi = function (api,type,type1) {
console.log(api);
window.delPoi()
window.review()
$.get(api).then(res => {
var currentDetailList =res.data
console.log(currentDetailList);
if(type1 == 'MassMarks'){
map3d.addPoisMassMarks(currentDetailList,type).then(res=>window.pois = res)
}else if(type1 == 'Single'){
map3d.addPoisSingle(currentDetailList,type).then(res=>window.pois = res)
}else{
map3d.addPoisMarkerClusterer(currentDetailList,type).then(res=>window.pois = res)
}
});
}
</script>
<script> <script>
var oldi1 = 0, oldi2 = 0 var oldi1 = 0, oldi2 = 0
function popclose(){ function popclose(){
...@@ -109,48 +152,6 @@ ...@@ -109,48 +152,6 @@
} }
// go(i1,i2) // go(i1,i2)
</script> </script>
<script language=javascript type=module>
//http://106.120.82.243:8080/qxyj/pageHtml/login.html wis 12379
import { Map3D } from './js/Map3D.js';
import { GetParams } from './js/tools.js';
window.urlParams = GetParams()
//成都 重庆 天津 北京 上海 大连 三沙 湖北 中国
//350200
//350500
//320300 370100
window.map3d = new Map3D(urlParams.adcode||'成都','container',urlParams,(_map3d)=>{
go(1,1)
});
window.review = function (params) {
map3d.review()
}
window.delPoi = function (params) {
try {
map3d.map.clearInfoWindow()
map3d.delPoi(pois)
window.pois = []
} catch (error) {
}
}
window.addPoiByApi = function (api,type,type1) {
console.log(api);
window.delPoi()
window.review()
$.get(api).then(res => {
var currentDetailList =res.data
console.log(currentDetailList);
if(type1 == 'MassMarks'){
map3d.addPoisMassMarks(currentDetailList,type).then(res=>window.pois = res)
}else if(type1 == 'Single'){
map3d.addPoisSingle(currentDetailList,type).then(res=>window.pois = res)
}else{
map3d.addPoisMarkerClusterer(currentDetailList,type).then(res=>window.pois = res)
}
});
}
</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