Skip to content

html / MeteorologicalBureau

Go to a project
Commit 2c3e8671 by hanjixin
Options

map

parent 49a2e600
Showing with 140 additions and 94 deletions
map/css/main.css 0 → 100644
*{
padding: 0;
margin: 0;
}
body,
html,
#container {
margin: 0;
width: 100%;
height: 100%;
}
#nav{
position: fixed;
left: 40px;
top:200px;
z-index: 9999;
color: #fff;
}
#nav .item,.subnav div{
cursor:pointer;
}
.icon{
display: block;
float: left;
width: 16px;
height: 16px;
background-image: url(../img/menuicon.png);
background-size: 100% 100%;
}
.item{
position: relative;
width: 100px;
height: 20px;
margin-bottom:20px;
background-image: url(../img/menu.png);
background-size: 100% 100%;
}
.item.active::after{
content: " ";
z-index:-1;
display: block;
width: 100px;
height: 200px;
background-image: url(../img/menuactive.png);
background-repeat: no-repeat;
background-size: 100% auto;
position: absolute;
top:-25%;
}
.subnav{
display: none;
margin-left: 20px;
}
.subnav.active{
display: block;
}
.subnav div{
position: relative;
margin-bottom:20px;
background-image: url(../img/menu.png);
background-size: 100% 100%;
width: 80px;
height: 16px;
}
.subnav div.active::after{
content: " ";
z-index:-1;
display: block;
width: 80px;
height: 200px;
background-image: url(../img/menuactive.png);
background-repeat: no-repeat;
background-size: 100% auto;
position: absolute;
top:-25%;
}
\ No newline at end of file
map/index.html
...@@ -5,81 +5,9 @@ ...@@ -5,81 +5,9 @@
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0" /> <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MAP</title> <title>MAP</title>
<link rel="stylesheet" href="css/main.css">
<style> <style>
body,
html,
#container {
margin: 0;
width: 100%;
height: 100%;
}
#nav{
position: fixed;
left: 40px;
top:200px;
z-index: 9999;
color: #fff;
}
#nav .item,.subnav div{
cursor:pointer;
}
.icon{
display: block;
float: left;
width: 16px;
height: 16px;
background-image: url(img/menuicon.png);
background-size: 100% 100%;
}
.item{
position: relative;
width: 100px;
height: 20px;
margin-bottom:20px;
background-image: url(img/menu.png);
background-size: 100% 100%;
}
.item.active::after{
content: " ";
z-index:-1;
display: block;
width: 100px;
height: 200px;
background-image: url(img/menuactive.png);
background-repeat: no-repeat;
background-size: 100% auto;
position: absolute;
top:-25%;
}
.subnav{
display: none;
margin-left: 20px;
}
.subnav.active{
display: block;
}
.subnav div{
position: relative;
margin-bottom:20px;
background-image: url(img/menu.png);
background-size: 100% 100%;
width: 80px;
height: 16px;
}
.subnav div.active::after{
content: " ";
z-index:-1;
display: block;
width: 80px;
height: 200px;
background-image: url(img/menuactive.png);
background-repeat: no-repeat;
background-size: 100% auto;
position: absolute;
top:-25%;
}
</style> </style>
</head> </head>
...@@ -95,7 +23,7 @@ ...@@ -95,7 +23,7 @@
</div> </div>
<div class="item" onclick="go(2)"><span class="icon"></span>人员</div> <div class="item" onclick="go(2)"><span class="icon"></span>人员</div>
<div class="subnav subnav2"> <div class="subnav subnav2">
<div onclick="go(2,0)">人员1</div> <div onclick="go(2,0)">联络人</div>
<div onclick="go(2,1)">人员2</div> <div onclick="go(2,1)">人员2</div>
</div> </div>
</div> </div>
...@@ -109,16 +37,35 @@ ...@@ -109,16 +37,35 @@
.amap-logo,.amap-copyright{opacity: 0;display: none!important;} .amap-logo,.amap-copyright{opacity: 0;display: none!important;}
</style> </style>
<script> <script>
var i1 = 0, i2 = 0 var oldi1 = 0, oldi2 = 0
function go(i1,i2){ function go(i1,i2){
console.log(oldi1,oldi2);
console.log(i1,i2);
if( i1 == oldi1 && i2 == oldi2 ){
return false
}
$(".item").removeClass("active") $(".item").removeClass("active")
$(".item").eq(i1).addClass("active") $(".item").eq(i1).addClass("active")
$(".subnav").hide() $(".subnav").hide()
$(".subnav"+i1).show() $(".subnav"+i1).show()
$(".subnav"+i1).find("div").removeClass("active") $(".subnav"+i1).find("div").removeClass("active")
$(".subnav"+i1).find("div").eq(i2).addClass("active") if(typeof(i2) !='undefined'){
$(".subnav"+i1).find("div").eq(i2).addClass("active")
}
if( i1 == 0 && typeof(i2)=='undefined'){
// addPoiByApi('./预警接口.json')
}
if( i1 == 2&& i2 == 0){
addPoiByApi('./personal.json')
}
if( i1 == 1&& i2 == 1){
addPoiByApi('./led.json','Single')
}
oldi1 = i1, oldi2 = i2
} }
go(i1,i2) // go(i1,i2)
</script> </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
...@@ -126,8 +73,8 @@ ...@@ -126,8 +73,8 @@
import { GetParams } from './js/tools.js'; import { GetParams } from './js/tools.js';
var urlParams = GetParams() var urlParams = GetParams()
//成都 重庆 天津 北京 上海 大连 三沙 //成都 重庆 天津 北京 上海 大连 三沙
window.map3d = new Map3D('佛山','container',urlParams,(_map3d)=>{ window.map3d = new Map3D('成都','container',urlParams,(_map3d)=>{
window.addPoiByApi('./personal.json') window.addPoiByApi('./led.json')
}); });
window.review = function (params) { window.review = function (params) {
map3d.review() map3d.review()
...@@ -141,6 +88,7 @@ ...@@ -141,6 +88,7 @@
} }
window.addPoiByApi = function (api,type) { window.addPoiByApi = function (api,type) {
console.log(api);
window.delPoi() window.delPoi()
window.review() window.review()
$.getJSON(api).then(res => { $.getJSON(api).then(res => {
......
map/js/Map3D.js
import { bounds2Path, MaskLayer } from "./tools.js" import { bounds2Path, MaskLayer } from "./tools.js"
var _renderClusterMarker = function (context,count) { var _renderClusterMarker = function (context, count) {
// var count = context.markers.length
var factor = Math.pow(context.count / count, 1 / 18); var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div'); var div = document.createElement('div');
var Hue = 180 - factor * 180; var Hue = 180 - factor * 180;
...@@ -18,6 +19,9 @@ var _renderClusterMarker = function (context,count) { ...@@ -18,6 +19,9 @@ var _renderClusterMarker = function (context,count) {
div.style.color = fontColor; div.style.color = fontColor;
div.style.fontSize = '14px'; div.style.fontSize = '14px';
div.style.textAlign = 'center'; div.style.textAlign = 'center';
div.addEventListener('click', () => {
console.log(context.markers.length);
})
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div) context.marker.setContent(div)
}; };
...@@ -47,12 +51,12 @@ class Map3D { ...@@ -47,12 +51,12 @@ class Map3D {
zIndex: 0 zIndex: 0
}); });
this.maskLayer = new MaskLayer(Number(params.maskOpacity)) this.maskLayer = new MaskLayer(Number(params.maskOpacity))
this.init(cityCode, domId).then(()=>{ this.init(cityCode, domId).then(() => {
cb(this) cb(this)
}) })
} }
delPoi(pois){ delPoi(pois) {
this.cluster.removeMarkers(pois) this.cluster.removeMarkers(pois)
this.map.remove(pois) this.map.remove(pois)
} }
...@@ -72,13 +76,14 @@ class Map3D { ...@@ -72,13 +76,14 @@ class Map3D {
pois.map(item => { pois.map(item => {
markers.push(this.setPersonalPoint(item)) markers.push(this.setPersonalPoint(item))
}); });
if(this.cluster ){ if (this.cluster) {
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: 80,
zoomOnClick: false,
renderClusterMarker: function (context) { renderClusterMarker: function (context) {
_renderClusterMarker(context,markers.length); _renderClusterMarker(context, markers.length);
} }
}); });
} }
...@@ -96,7 +101,7 @@ class Map3D { ...@@ -96,7 +101,7 @@ class Map3D {
// size: new AMap.Size(11,11), // 图标大小 // size: new AMap.Size(11,11), // 图标大小
// anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角 // anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角
// } // }
// var massMarks = new AMap.MassMarks({ // var massMarks = new AMap.MassMarks({
// zIndex: 5, // 海量点图层叠加的顺序 // zIndex: 5, // 海量点图层叠加的顺序
// zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层 // zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
...@@ -113,21 +118,34 @@ class Map3D { ...@@ -113,21 +118,34 @@ class Map3D {
// // 将海量点添加至地图实例 // // 将海量点添加至地图实例
// massMarks.setMap(map); // massMarks.setMap(map);
if(this.cluster ){ if (this.cluster) {
this.cluster.addMarkers(markers) this.cluster.addMarkers(markers)
}else{ } else {
this.cluster = new AMap.MarkerClusterer(this.map, markers, { gridSize: 80 }); this.cluster = new AMap.MarkerClusterer(this.map, markers, { gridSize: 80 });
} }
return markers return markers
} }
setPersonalPoint(item) { setPersonalPoint(item) {
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: "<div style='color:#fff'>" + (item.clientaddress || item.name) + "</div>",
offset: new AMap.Pixel(16, -45)
});
let marker = new AMap.Marker({ let marker = new AMap.Marker({
map: this.map, map: this.map,
clickable: true,
position: new AMap.LngLat(Number(item.lon), Number(item.lat)), //基点位置 position: new AMap.LngLat(Number(item.lon), Number(item.lat)), //基点位置
icon:'img/1.png', //marker图标，直接传递地址url icon: 'img/1.png', //marker图标，直接传递地址url
offset: { x: -8, y: -34 } //相对于基点的位置 offset: { x: -8, y: -34 } //相对于基点的位置
}); });
marker._data = item
marker.on('click', (params) => {
console.log(item, params);
infoWindow.open(this.map, marker.getPosition());
})
return marker return marker
} }
...@@ -161,11 +179,11 @@ class Map3D { ...@@ -161,11 +179,11 @@ class Map3D {
this.map.setFitView(); this.map.setFitView();
this.initBounds = this.map.getBounds(); this.initBounds = this.map.getBounds();
this.map.setLimitBounds(this.dragLimitBounds); this.map.setLimitBounds(this.dragLimitBounds);
this.map.setZooms([this.map.getZoom(),13]); this.map.setZooms([this.map.getZoom(), 13]);
await this.addSubArea(this.cityDistrict); // 查找子行政区 await this.addSubArea(this.cityDistrict); // 查找子行政区
AMap.event.addListener(this.map, "click", function(e) { AMap.event.addListener(this.map, "click", function (e) {
console.log(e); console.log(e);
// new AMap.Marker({ // new AMap.Marker({
// position: e.lnglat, // position: e.lnglat,
// map: map // map: map
......
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