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://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;
    }
</style>
<div id="container">
    <div id='map'></div>
</div>
<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: [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>
BIGEMAP卫星地图_高清卫星地图_北斗高清地图_地图软件_矢量地图数据_专题地图

行政區域下鉆源代碼展示
