標簽避讓效果源代碼展示

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

<html>

<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link  rel='stylesheet'/>
    <script src='http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.js'></script>
    <script type="text/javascript" src="/offline_data/newjunbiao/bm-plot.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
    <title>碰撞檢測效果</title>
</head>

<body>
    <div id='map'></div>
    <script>
        BM.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk';
        // 地圖初始化
        var map = BM.map('map', 'bigemap.dc-map', {
            cr1s: BM.CRS.EPSG4326,
            center: { lat: 23.036916832934367, lng: 113.77676094562048 },
            zoom: 18,
            zoomControl: true,
            minZoom:7,
        });

        let svglayer = new BM.Plot.SvgLayer({
            color: 'red',
            maxZoom: 18,
            font: '12px arial',
        }).addTo(map);

        let all = [];

        fetch('/offline_data/newjunbiao/canyin.json').then(r => r.json()).then(data => {

            data.features.map(v => {
                let info = getName(v.properties.name);
                info.latlng = BM.latLng(v.geometry.coordinates[1], v.geometry.coordinates[0]);
                all.push(info);
            });

            let result = calc();

            let markers = result.map(v => {
                let icon = BM.icon({
                    iconUrl: '/offline_data/newjunbiao/canyin.svg',
                    iconSize: BM.point(20, 20),
                    iconAnchor: BM.point(10, 20)
                });
                let item = all[v.index];
                // debugger;
                return new BM.Plot.IconOverlay(icon,
                    BM.latLng(item.latlng),
                    {
                        maxZoom: 22,
                        //行間距
                        lineHeightOffset: 4,
                        //這個是用于控制該圖標的最小展示層級的
                        minZoom: v.start,
                        textOffset: item.offset,
                        text: item.text,
                        color: "#585b60",
                    }
                );
            });
            svglayer.addLayers(markers);
        });

        //處理poi點位的名稱
        function getName(text) {
            text = text.toString().replace(/\(.*?\)/g, '');
            let fontSize = 12;
            let l = text.length;
            if (l <= 6) return {
                text,
                middle: l,
                offset: BM.point(l * fontSize / 2 + 10, -fontSize - 3)
            };
            let middle = Math.ceil(l / 2);
            let p1 = text.toString().substring(0, middle);
            let p2 = text.toString().substring(middle);
            return {
                text: [p1, p2].join("\n"),
                middle,
                offset: BM.point(p1.length * fontSize / 2 + 10, -fontSize * 2 + 1),
            };
        }

        //計算碰撞
        function calc() {
            let result = [];
            for (let i = 5; i <= 22; i++) {
                let has = [];
                result.map(v => {
                    has.push(getRect(all[v.index], i));
                });
                // console.log(`result`,result);
                for (let j = 0; j < all.length; j++) {
                    let rec = getRect(all[j], i);
                    if (!getIntersection(has, rec)) {
                        result.push({ index: j, start: i });
                        has.push(rec);
                    }
                }
            }
            return result;
        }

        function getIntersection(all, current) {
            for (let i = 0; i < all.length; i++) {
                if (check(all[i], current)) {
                    return true;
                }
            }
            return false;
        }

        function check(b1, b2) {
            if (b2.endX < b1.startX || b2.startX > b1.endX || b2.endY < b1.startY || b2.startY > b1.endY) {
                return false;
            }
            return true;
        }

        //計算外接矩形
        function getRect(info, zoom) {
            let xy = map.project(info.latlng, zoom);
            return {
                startX: xy.x,
                endX: xy.x + 20 + info.middle * 12,
                startY: xy.y,
                endY: xy.y + 20 + 2,
            }
        }
    </script>

</body>

</html>
<button id="kseui"></button>
<button id="c8u0m"></button>
国产久_亚欧精品一区_久久亚洲美女_99精品在线观看_日韩成人三级_久久精品久久久久

標簽避讓效果源代碼展示
