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="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css" rel="stylesheet">
<link href="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet"/>
<script src="http://www.cnhrsm.com/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;
}
.tool{
position: absolute;
z-index: 10;
right: 10px;
top:40px;
}
</style>
<div id="container">
<div id='map'></div>
<p class="tool">
<button id="satellite" onclick="showF()" class="button button-tiny button-rounded button-primary" href="javascript:void (0);">邊界顯示</button>
<button id="street" onclick="hideF()" class="button button-tiny button-rounded button-primary" href="javascript:void (0);">邊界隱藏</button>
</p>
</div>
<svg>
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
</svg>
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.js"></script>
</body>
</html>
<script>
BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
var map = BM.map('map', 'bigemap.dc-satellite', {
crs: BM.CRS.EPSG4326,
center: [ 22.309190530853357,113.63727145828308],
zoom: 10,
zoomControl: true,
attributionControl: true,
doubleClickZoom: false,
trackResize: true,
});
var cone;
var offset;
//自動加載方法
window.onload = function () {
chons();
}
//加載地圖方法
function chons() {
//加載偏移邊界（需要主動處理文件數據 向右下角偏移） 先添加在底層
$.get('http://www.cnhrsm.com/public/offline/district/偏移廣東.geojson', function (data) {
//樣式文檔 可以參考 http://www.cnhrsm.com/offlinemaps/api/#path
data=JSON.parse(data)
offset = BM.geoJSON(data, {
style: function () {
return {
color: 'white', //邊框顏色
fillColor: 'black', //填充色
weight: 1, //邊框寬度
// fillOpacity: 0,//填充透明度
};
},
}).addTo(map)
//加載正常經緯度邊界 后添加在高層
$.get('http://www.cnhrsm.com/public/offline/district/普通廣東.geojson', function (data) {
//樣式文檔 可以參考 http://www.cnhrsm.com/offlinemaps/api/#path
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;
try {
rel = e.layer.feature.properties;
} catch (error) {
rel = Object.values(e.layer._eventParents)[0].feature.properties;
}
e.layer.setStyle({
color: '50e3c2',
fillColor: 'white',
weight: 1,
fillOpacity: 0.9,
className: 'find'
});
//組裝參數
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
});
// e.layer.closePopup()
}).on('click', function (e) {
console.log(e, '點擊');
}).addTo(map)
//讓地圖自適應邊界
// map.fitBounds(cone.getBounds())
})
})
}
function showF() {
//先疊加陰影圖層 后疊加正常圖層
offset.addTo(map)
cone.addTo(map)
}
function hideF() {
cone.remove()
offset.remove()
}
</script>