BIGEMPA Js API示例中心

遮罩反选源代码展示

代码编辑区 运行 下载 还原
<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
        />
        <link
            href="http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css"
            rel="stylesheet"
        />
        <script src="http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,
            body {
                width: 100%;
                height: 100%;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
        <title>ArcGis Map</title>
    </head>
    <body>
        <div id="map"></div>
        <script>
            window.polygonArr = [];
            window.centerPolygon = [];
            // 软件配置信息地址,软件安装完成之后使用本地地址,如:http://localhost:9000
            BM.Config.HTTP_URL = "http://www.bigemap.com:9000";
            // 在ID为map的元素中实例化一个地图,并设置地图的ID号为bigemap.arcgis-map,ID号程序自动生成,无需手动配置,无需设置地图投影 ,设置中心点,默认的级别和显示级别控件
            window.map = BM.map("map", "bigemap.zhongkexingtu", {
                center: [32.17852128889127, 103.06919018354374],
                zoom: 10,
                zoomControl: true,
                attributionControl: false,
            });
            $.ajax({
                url:"/offline_data/newjunbiao/hs.geojson",
                contentType: "application/json",//必须项
                dataType: "json",//必须项
            }).then((res) => {
                console.log(res, "请求结果");
                BM.geoJSON(res, {
                    style: function () {
                        return {};
                    },
                    onEachFeature: function (feature, layer) {
                        var latlngs = layer.feature.geometry.coordinates;
                        latlngs.forEach((v) => {
                            getCooridnate(v);
                        });
                        // console.log(window.polygonArr);
                        window.polygonArr = [...new Set(window.polygonArr)];
                        var latLngs = [
                            [
                                [-91, -181],
                                [91, -181],
                                [91, 181],
                                [-90, 181],
                            ], // 外环
                            window.polygonArr, // 洞
                        ];
                        var polygon = BM.polygon(latLngs, {
                            fillColor: "black",
                            stroke: true,
                            // weight: 300,
                            fillOpacity: 0.8,
                            color: "aqua",
                            weight: 6,
                            dashArray: [20, 10],
                        }).addTo(map);
                    },
                });
            });
            // 获取行政区域边界数据
            function getCooridnate(arr) {
                // console.log(arr);
                arr.forEach((v, i) => {
                    // console.log(v[1], v[0]);
                    window.polygonArr.push([v[1], v[0]]);
                });
            }
        </script>
    </body>
</html>