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"/>
        <!--
        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>
        <script src="/offline_data/newjunbiao/bm-plot.min.js"></script>
        <script src="/offline_data/newjunbiao/turf.min.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
        <title>Google Map Streets</title>
    </head>
    <body>
        <div id="map"></div>
        <script>
            // 軟件配置信息地址，軟件安裝完成之后使用本地地址，如：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: 3,
                zoomControl: true,
                attributionControl: false,
                preferCanvas: true,
                minZoom: 3,
                // 設置地圖的最大放大級別
                maxZoom:24,
            });

            let m1 = BM.tileLayer("bigemap.dc-satellite").addTo(map)
            m1.on("loading",(e)=>{
                Object.assign(m1.options,{
                    maxZoom:24,
                     // 設置圖層超過配置指定的級別后就進行地圖圖片的放大
                    maxNativeZoom:18
                })
            })
            // 用于保存文字的對象
            let layer = new BM.Plot.SvgLayer({
                // 配置SvgLayer屬于的pane層
                pane: "tooltipPane",
                // 聚合配置
                cluster: {
                    // 是否開啟聚合
                    enable: true,
                    // 聚合半徑,像素距離
                    radius: 50,
                    // 設置超過多少級別，就不進行聚合
                    disableZoom:20,
                    
                },
            });
            layer.addTo(map);
            let group = BM.featureGroup();

            //發請求獲取土地數據
            fetch("/offline_data/newjunbiao/tudi.geojson")
                .then((res) => {
                    return res.json();
                })
                .then((res) => {
                    console.log(res);
                    let fs = res.features;
                    fs.forEach((v, i) => {
                        // console.log("vvvv", v);
                        let pos = v.geometry.coordinates[0];
                        let polygonPosArr = pos.slice(0).map((vv) => {
                            return [vv[1], vv[0]];
                        });
                        pos.push(pos[0]);
                        // 計算多邊形的質心
                        let center = turf.centerOfMass(turf.polygon([pos]));
                        // 獲取質心坐標
                        let mass = center.geometry.coordinates;
                        // 創建文字標簽對象
                        let text = new BM.Plot.TextOverlay(
                            `${v.properties
                            .name}`,
                            BM.latLng(mass[1], mass[0]),{
                                color:"red",
                                // backgroundColor:"white",
                                font:"16px 楷體",
                            }
                        );
                        // 將文字添加到layer中
                        layer.addLayer(text)
                        let f1 = BM.polygon(polygonPosArr, {}).addTo(map);
                        group.addLayer(f1);
                    });
                    map.fitBounds(group.getBounds())
                });
        </script>
    </body>
</html>