BIGEMPA Js API示例中心
圖層適配源代碼展示

代碼編輯區運行下載還原
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
        />
        <!--
        以下CSS地址請在安裝軟件了替換成本地的地址
        CSS地址請使用:
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
        軟件下載地址 http://www.xawiki.com/reader/download/detail201802017.html
    -->
        <link href="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet"/>
    
        <link
            href="http://www.xawiki.com/Public/css/button.min.css"
            rel="stylesheet"
        />
        <!--
        JS地址請使用：
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
    -->
        <script src="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.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: 40px;
            }
        </style>
        <title>圖層適配</title>
    </head>
    <body>
        <p class="tool">
            <a
                id="point"
                class="button button-tiny button-rounded button-primary"
                href="javascript:void (0);"
                >適配點</a
            >
            <a
                id="line"
                class="button button-tiny button-rounded button-primary"
                href="javascript:void (0);"
                >適配線</a
            >
            <a
                id="polygon"
                class="button button-tiny button-rounded button-primary"
                href="javascript:void (0);"
                >適配面</a
            >
            <a
                id="all"
                class="button button-tiny button-rounded button-primary"
                href="javascript:void (0);"
                >適配所有</a
            >
        </p>
        <div id="map"></div>
        <script type="text/javascript">
            // 軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://localhost:9000
            BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
            // 在ID為map的元素中實例化一個地圖，不要設置地圖ID，ID號程序自動生成，無需手動配置，設置中心點，默認的級別和顯示級別控件
            var map = BM.map("map", null, {
                crs: BM.CRS.EPSG4326,
                center: [0, 0],
                zoom: 2,
                zoomControl: true,
                attributionControl: false,
                minZoom: 1,
            });
            let marker = BM.marker([60, 104]).addTo(map);
            let line = BM.polyline([
                [30, 102],
                [28, 104],
            ]).addTo(map);
            let polygon = BM.polygon([
                [10, 102],
                [12, 104],
                [20, 100],
            ]).addTo(map);
            // 創建一個圖層組，可以用于存放點，線，面數據
            let group = BM.featureGroup();
            var arcgis_satellite = BM.tileLayer("bigemap.dc-satellite");
            arcgis_satellite.addTo(map);
            // 適配點
            document
                .querySelector("#point")
                .addEventListener("click", function () {
                    // map.fitBounds(marker.getLatLng());
                    map.setView(marker.getLatLng(), map.getZoom());
                });
            // 適配線
            document
                .querySelector("#line")
                .addEventListener("click", function () {
                    map.fitBounds(line.getBounds());
                });
            //適配面
            document
                .querySelector("#polygon")
                .addEventListener("click", function () {
                    map.fitBounds(polygon.getBounds());
                });
            //適配所有
            document
                .querySelector("#all")
                .addEventListener("click", function () {
                    group.clearLayers();
                    group.addLayer(marker);
                    group.addLayer(line);
                    group.addLayer(polygon);
                    map.fitBounds(group.getBounds());
                });
        </script>
    </body>
</html>