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://www.bjxdny.cn:9000/bigemap.js/v2.1.0/bigemap.css"
rel="stylesheet"
/>
<script src="http://www.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://www.bjxdny.cn:9000/bigemap.js/v2.1.0/bigemap.js"></script>
</body>
</html>
<script>
BM.Config.HTTP_URL = "http://www.bjxdny.cn:9000";
var map = BM.map("map", null, {
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(
"http://www.bjxdny.cn/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,
};
},
onEachFeature: function (feature, layer) {
feature.properties &&
feature.properties.name &&
layer.bindTooltip(feature.properties.name, {
direction: "bottom",
className: "my_tooltip",
permanent: true,
});
},
})
.on("mouseover", function (e) {
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>