BIGEMPA Js API示例中心
KML糾偏源代碼展示

代碼編輯區運行下載還原
<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <!--
        以下CSS地址請在安裝軟件了替換成本地的地址
        CSS地址請使用:
        http://192.168.1.222:9000/bigemap.js/v2.1.0/bigemap.css
        軟件下載地址 http://www.xawiki.com/reader/download/detail201802017.html
    -->
    <link href='http://www.xawiki.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
    <link href="http://www.xawiki.com/Public/css/button.min.css" rel="stylesheet">
    <!--
        JS地址請使用：
        http://192.168.1.222:9000/bigemap.js/v2.1.0/bigemap.js
    -->
    <script src='http://www.xawiki.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
    <!--
        引入加載KML的JS插件
    -->
    <script type="text/javascript" src="http://www.xawiki.com/mapoffline/js/togeojson.js"></script>
    <!-- 引入Geojson轉換KML的js插件 -->
    <script src="http://demo.bigemap.com/static/map/js/tokml.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .tool {
            position: absolute;
            z-index: 10;
            right: 10px;
            top: 60px;
        }

        .info {
            position: fixed;
            top: 40px;
            color: #8a6d3b;
            z-index: 99;
            margin: 0;
            background-color: #fcf8e3;
            border-color: #faebcc;
            left: 0;
            right: 0;
            text-align: center;
        }

        #ceng {
            position: absolute;
            top: 120px;
            left: 0;
            z-index: 10;

        }

        #ceng::before {
            content: '當前地圖源:';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -10px;
            padding: 5px 10px;
            top: -40px;
            background-color: #369;
            border-radius: 5px;
            font-size: 14px;
            color: #fff;
            z-index: -1;
        }

        #checkExport {
            display: none;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            height: 400px;
            background-color: skyblue;
            border: slategrey 1px solid;
            z-index: 10000;
            padding: 10px 0 0 10px;
        }

        #checkExport>div {
            padding: 10px;
            outline: turquoise 1px solid;
        }

        #checkExport>button {
            position: absolute;
            right: 0;
            top: 0;
            margin: 5px 5px 0 0;
        }
    </style>
    <title>切換圖層</title>
</head>

<body>
    <p class="info">
        數據保存在本地，刷新會消失，僅僅用作測試,左側僅供糾偏效果展示使用，切換會清楚當前覆蓋物
    </p>
    <p class="tool">
        <a id="satellite" class="button button-tiny button-rounded button-primary" href="javascript:void (0);">導入KML</a>
        <a id="export" class="button button-tiny button-rounded button-primary" href="javascript:void (0);">導出</a>
        <input type="file" accept=".kml,.json,.geojson" style="display: none" id="upload">
    </p>
    <div id="ceng">
        <a href="javascript:void(0)" data-type="zhongkexingtu" data-map="arcgis"
            class="button button-tiny button-rounded">arcgis(wgs 84)</a>
        <a href="javascript:void(0)" data-type="baidu-map" data-map="baidu"
            class="button button-tiny button-rounded">百度(bd09)</a>
        <a href="javascript:void(0)" data-type="amap-map" data-map="amap"
            class="button button-tiny button-rounded button-primary">高德(gcj02)</a>
    </div>
    <div id="checkExport">
        <div>
            <span>導入數據坐標系</span>
            <select name="" id="from">
                <option value="">請選擇</option>
                <option value="WGS84">WGS84(無偏移)</option>
                <option value="Gcj-02">火星坐標系(Gcj-02)</option>
                <option value="BD-09">百度坐標系(BD-09)</option>
            </select>
        </div>
        <div>
            <span>導出數據源</span>
            <select name="" id="to" autofocus>
                <option value="">請選擇</option>
                <option value="WGS84">WGS84(無偏移)</option>
                <option value="Gcj-02">火星坐標系(Gcj-02)</option>
                <option value="BD-09">百度坐標系(BD-09)</option>
            </select>
        </div>
        <div>
            <span>導出格式</span>
            <select name="" id="form" autofocus>
                <option value="">請選擇</option>
                <option value="geoJSON">geoJSON</option>
                <option value="kml">kml</option>
            </select>
        </div>
        <a href="javascript:void(0)" class="button button-tiny button-rounded button-primary"
            download="javascript:void(0)">確認導出</a>
        <button>x</button>
    </div>
    <a download="" style="display: none;" id="download"></a>
    <div id='map'></div>
    <script src="http://www.xawiki.com/Public/common/js/jquery.min.js"></script>
    <script src="http://demo.bigemap.com/static/map/js/tokml.js"></script>
    <script src="http://www.xawiki.com/Public/js/jiup.min.js"></script>
    <script type="text/javascript">
        // 軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://192.168.1.222:9000
        BM.Config.HTTP_URL = 'http://www.xawiki.com:9000';
        var map = BM.map('map', 'bigemap.amap-map', {
            center: [30.66, 104.001],
            zoom: 15,
            zoomControl: true,
            attributionControl: false,
            preferCanvas: true, //適用于數據量大時 地圖反應速度加快
        });
        var btns = document.querySelectorAll('#ceng a');
        var geo
        $('#ceng').on('click', 'a', function () {
            $('#ceng a').removeClass('button-primary');
            $(this).addClass('button-primary');
            var type = $(this).data('map');
            var crs = type === 'baidu' ? BM.CRS.Baidu : BM.CRS.EPSG3857;
            geo && geo.remove(), geo = null;
            map.remove();
            map = BM.map('map', 'bigemap.{id}'.replace('{id}', $(this).data('type')), {
                crs,
                center: [30.66, 104.001],
                zoom: 15,
                preferCanvas: true,
                zoomControl: true
            });

            if (cacheData) {
                geo = BM.geoJSON(cacheData, {
                    style: function (feature) {}
                }).bindPopup(function (layer) {
                    return `<div><h4>${layer.feature.properties.name}</h4>
             <p>${layer.feature.properties.description}</p></div>`
                }).addTo(map);
                map.fitBounds(geo.getBounds());
            }
        });
        var blob, href, geo, cacheData, geo_copy;
        var bdcj = {
                features: [],
                type: "FeatureCollection"
            },
            cjbd = {
                features: [],
                type: "FeatureCollection"
            };
        var filename;
        var ccdata
        $('#upload').on('change', function () {
            var file = this.files[0];
            var extension = file.name.split('.');
            filename = extension[0];
            extension = extension.pop();
            if (extension !== 'kml' && extension !== 'json'&&extension !== 'geojson') {
                alert('只能是KML或json格式');
                return;
            }
            var reader = new FileReader();
            reader.readAsText(file);
            reader.onload = function () {
                var dom, geojsonFeature ;
                if (extension == 'kml') {
                    dom =
                        (new DOMParser()).parseFromString(this.result, 'text/xml');
                    geojsonFeature =
                        toGeoJSON.kml(dom);
                }else{
                    geojsonFeature=JSON.parse(this.result)
                }
                cacheData = geojsonFeature;

                geo && geo.remove();
                geo = BM.geoJSON(geojsonFeature, {
                    style: function (feature) {},
                }).bindPopup(function (layer) {
                    return `<div><h4>${layer.feature.properties.name}</h4>
            <p>${layer.feature.properties.description}</p></div>`
                }).addTo(map);
                map.fitBounds(geo.getBounds());
            }
        });
        $('#satellite').on('click', function () { //顯示上傳
            $('#upload').click();
        });
        $('#export').click(function () {
            $('#checkExport').show();
        })
        $('#checkExport>button').click(function () {
            $('#from').val('');
            $('#to').val('');
            $('#form').val('');
            $('#checkExport').hide();
        })
        $('#checkExport>a').click(function () {

            let from = $('#from').val(); //從
            let to = $('#to').val(); //到
            let form = $('#form').val(); //格式
            if (from && to && form && geo) {
                let fn
                if (from == to) {
                    fn = (lat, lng) => {
                        return [lat, lng]
                    }
                    transform(fn);
                } else {
                    if (from == 'WGS84') {
                        if (to == 'Gcj-02') {
                            fn = wgs84togcj02;
                            transform(fn);
                        } else {
                            fn = (lat, lng) => {
                                return gcj02tobd09(...wgs84togcj02(lat, lng))
                            }
                            transform(fn);
                        }
                    } else if (from == 'Gcj-02') {
                        if (to == 'WGS84') {
                            fn = gcj02towgs84
                            transform(fn);
                        } else {
                            fn = gcj02tobd09
                            transform(fn);
                        }
                    } else {
                        if (to == 'WGS84') {
                            fn = (lat, lng) => {
                                return gcj02towgs84(...bd09togcj02(lat, lng))
                            }
                            transform(fn);
                        } else {
                            fn = bd09togcj02
                            transform(fn);
                        }
                    }
                }

                $('#checkExport>button').click(); //清空選項

                if (form == 'kml') {

                    var blob = new Blob([tokml(geo1.toGeoJSON())]);
                    var href = URL.createObjectURL(blob);
                    $('#download').prop('href', href);
                    $('#download').prop('download', `${filename}.kml`);
                    document.querySelector('#download').click();
                } else {
                    var blob = new Blob([JSON.stringify(geo1.toGeoJSON())]);
                    var href = URL.createObjectURL(blob);
                    $('#download').prop('href', href);
                    $('#download').prop('download', `${filename}.geojson`);
                    document.querySelector('#download').click();
                }
            } else {
                alert('巧婦難為無米之炊哦，把數據和選項整好再點唄')
            }
        })

        function transform(fn) {
            geo1 = BM.geoJSON(cacheData, {
                coordsToLatLng(feature, index) {
                    let latlng = fn(feature[1], feature[0]);
                    return BM.latLng(latlng[0], latlng[1]);
                }
            })
        }

    </script>
</body>

</html>