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 @@
<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" />
<title>MAP</title>
<link rel="stylesheet" href="css/main.css">
<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>
</head>
......@@ -95,7 +23,7 @@
</div>
<div class="item" onclick="go(2)"><span class="icon"></span>人员</div>
<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>
</div>
......@@ -109,16 +37,35 @@
.amap-logo,.amap-copyright{opacity: 0;display: none!important;}
</style>
<script>
var i1 = 0, i2 = 0
var oldi1 = 0, oldi2 = 0
function go(i1,i2){
console.log(oldi1,oldi2);
console.log(i1,i2);
if( i1 == oldi1 && i2 == oldi2 ){
return false
}
$(".item").removeClass("active")
$(".item").eq(i1).addClass("active")
$(".subnav").hide()
$(".subnav"+i1).show()
$(".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 language=javascript type=module>
//http://106.120.82.243:8080/qxyj/pageHtml/login.html wis 12379
......@@ -126,8 +73,8 @@
import { GetParams } from './js/tools.js';
var urlParams = GetParams()
//成都 重庆 天津 北京 上海 大连 三沙
window.map3d = new Map3D('佛山','container',urlParams,(_map3d)=>{
window.addPoiByApi('./personal.json')
window.map3d = new Map3D('成都','container',urlParams,(_map3d)=>{
window.addPoiByApi('./led.json')
});
window.review = function (params) {
map3d.review()
......@@ -141,6 +88,7 @@
}
window.addPoiByApi = function (api,type) {
console.log(api);
window.delPoi()
window.review()
$.getJSON(api).then(res => {
......
map/js/Map3D.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 div = document.createElement('div');
var Hue = 180 - factor * 180;
......@@ -18,6 +19,9 @@ var _renderClusterMarker = function (context,count) {
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
div.addEventListener('click', () => {
console.log(context.markers.length);
})
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
};
......@@ -47,12 +51,12 @@ class Map3D {
zIndex: 0
});
this.maskLayer = new MaskLayer(Number(params.maskOpacity))
this.init(cityCode, domId).then(()=>{
this.init(cityCode, domId).then(() => {
cb(this)
})
}
delPoi(pois){
delPoi(pois) {
this.cluster.removeMarkers(pois)
this.map.remove(pois)
}
......@@ -72,13 +76,14 @@ class Map3D {
pois.map(item => {
markers.push(this.setPersonalPoint(item))
});
if(this.cluster ){
if (this.cluster) {
this.cluster.addMarkers(markers)
}else{
this.cluster = new AMap.MarkerClusterer(this.map, markers, {
} else {
this.cluster = new AMap.MarkerClusterer(this.map, markers, {
gridSize: 80,
zoomOnClick: false,
renderClusterMarker: function (context) {
_renderClusterMarker(context,markers.length);
_renderClusterMarker(context, markers.length);
}
});
}
......@@ -96,7 +101,7 @@ class Map3D {
// size: new AMap.Size(11,11), // 图标大小
// anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角
// }
// var massMarks = new AMap.MassMarks({
// zIndex: 5, // 海量点图层叠加的顺序
// zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
......@@ -113,21 +118,34 @@ class Map3D {
// // 将海量点添加至地图实例
// massMarks.setMap(map);
if(this.cluster ){
if (this.cluster) {
this.cluster.addMarkers(markers)
}else{
} else {
this.cluster = new AMap.MarkerClusterer(this.map, markers, { gridSize: 80 });
}
return markers
}
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({
map: this.map,
clickable: true,
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 } //相对于基点的位置
});
marker._data = item
marker.on('click', (params) => {
console.log(item, params);
infoWindow.open(this.map, marker.getPosition());
})
return marker
}
......@@ -161,11 +179,11 @@ class Map3D {
this.map.setFitView();
this.initBounds = this.map.getBounds();
this.map.setLimitBounds(this.dragLimitBounds);
this.map.setZooms([this.map.getZoom(),13]);
this.map.setZooms([this.map.getZoom(), 13]);
await this.addSubArea(this.cityDistrict); // 查找子行政区
AMap.event.addListener(this.map, "click", function(e) {
AMap.event.addListener(this.map, "click", function (e) {
console.log(e);
// new AMap.Marker({
// position: e.lnglat,
// 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