BIGEMPA Js API示例中心
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--瀏覽器兼容-->
<meta name="renderer" content="webkit">
<!--文檔兼容模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--網頁大小適應-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<link href='http://m.bjxdny.cn:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet'/>
<script src="http://m.bjxdny.cn/Public/common/js/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bigemap-popup-content-wrapper, .map-legends, .map-tooltip {
border-radius: 8px;
box-shadow: 5px 5px 5px rgb(0 0 0);
}
#container {
width: 100%;
background-color: #f2f2f2;
}
</style>
<div id="container">
<div id='map'></div>
</div>
<script src='http://m.bjxdny.cn:9000/bigemap.js/v2.1.0/bigemap.js'></script>
</body>
</html>
<script>
BM.Config.HTTP_URL = 'http://m.bjxdny.cn:9000';
var map = BM.map('map', 'bigemap.zhongkexingtu', {
center: [30, 104],
zoom: 7,
zoomControl: true,
attributionControl: true,
doubleClickZoom: false,
trackResize: true,
});
var latlngcon = map.getBounds();
var latlngs = [[[latlngcon._northEast.lat, latlngcon._northEast.lng], [latlngcon._southWest.lat, latlngcon._southWest.lng]]];
var cone = {};
var zoom = 4;
var time;
//自動加載方法
window.onload = function () {
var code = 510000;
sessionStorage.clear();
sessionStorage.setItem('latlngs', JSON.stringify(latlngs));
chons(code);
}
map.on('dblclick', function (e) {
//在雙擊事件中，先清除前面click事件的時間處理
clearTimeout(time);
var diqu = sessionStorage.getItem('diqu');
var diqup = JSON.parse(diqu);
var latlng = sessionStorage.getItem('latlngs');
var latlngp = JSON.parse(latlng);
if (diqup == null || diqup.length == 0) {
return false;
} else {
var result = diqup.pop();
sessionStorage.setItem('diqu', JSON.stringify(diqup));
var resultl = latlngp.pop();
sessionStorage.setItem('latlngs', JSON.stringify(latlngp));
}
cone.remove();
chons(result);
console.log(latlngp.slice(-1));
if(latlngp.slice(-1).length!=0)map.fitBounds(latlngp.slice(-1));
});
//加載地圖方法
function chons(code) {
$.get('/Public/offline/chad/' + code + '.geojson', function (data) {
data = JSON.parse(data);
cone = BM.geoJSON(data, {
style: function () {
return {
color: 'white',
fillColor: '#50e3c2',
weight: 1,
fillOpacity: 0.9
};
},
}).on('mouseover', function (e) {
var rel = e.layer.feature.properties;
e.layer.setStyle({
color: '50e3c2',
fillColor: 'white',
weight: 1,
fillOpacity: 0.9
});
//顯示彈窗信息坐標
var x = rel.center['1'];
var y = rel.center['0'];
var coordinate = [[x, y]];
//組裝參數
var adcode = rel.adcode;
var name = rel.name;
var level = rel.level;
var cont =
"<div>acode ：" + adcode + "</div>" +
"<div>name <span style='margin-left: 2px'>：</span>" + name + "</div>" +
"<div>level <span style='margin-left: 7px'>：</span>" + level + "</div>";
//顯示彈窗
if (!e.layer.getPopup()) {
e.layer.bindPopup(cont);
}
e.layer.openPopup();
}).on('mouseout', function (e) {
e.layer.setStyle({
color: 'white',
fillColor: '#50e3c2',
weight: 1,
fillOpacity: 0.9
});
}).on('click', function (e) {
console.log(e);
var rel = e.layer.feature.properties;
var zb = e.layer._bounds;
if (code == rel.adcode) {
return false;
} else {
//定時器
clearTimeout(time);
time = setTimeout(function () {
//重新加載
chons(rel.adcode);
cone.remove();
//臨時緩存
sessionStorage.setItem('diqu', JSON.stringify(rel.acroutes));
var latadd = sessionStorage.getItem('latlngs');
var lataddp = JSON.parse(latadd);
lataddp.push([[zb._northEast.lat, zb._northEast.lng], [zb._southWest.lat, zb._southWest.lng]]);
sessionStorage.setItem('latlngs', JSON.stringify(lataddp));
if(lataddp.slice(-1).length!=0)map.fitBounds(lataddp.slice(-1));
}, 300);
}
}).addTo(map);
})
}
</script>