BIGEMPA Js API示例中心

d3 行政边界展示源代码展示

代码编辑区 运行 下载 还原
                                    <!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.bigemap.com/reader/download/detail201802017.html
    -->
    <link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
    <!--
        JS地址请使用:
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
    -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <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.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/d3/5.16.0/d3.min.js"></script>
    <style>
        .my_tooltip {
            color: red;
            background: transparent;
            border: none;
            font-size: 18px;
        }

        .my_tooltip::before {
            display: none;
        }

        body {
            margin: 0;
            padding: 0;
        }

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

        .d3 {
            height: 100vh;
            width: 600px;
            position: absolute;
            background-color: black;
            opacity: .7;
            left: 0;
            cursor: pointer;
        }

        .tip {
            position: absolute;
            top: 2px;
            color: #eae5db;
            z-index: 10;
            left: 51px;
        }
           .loading {
            position: absolute;
            top: 140px;
            z-index: 99;
            width: 599px;
            height: 500px;
            background: white;
        }

        img {
            margin-left: 152px;
            margin-top: 90px;
        }
    </style>
    <title>Google Map Streets</title>
</head>

<body>
    <div class="tip">
        <h3>点击四川省查看效果</h3>
        <h3>展示部分数据 如需更多数据展示,请前往Bigemap下载器下载</h3>
    </div>
    <div id='map'></div>
    <div class="d3"></div>
      <div class="loading" style="display: block;">
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3028672281,4280382655&fm=26&gp=0.jpg" alt="">
    </div>
    <script>
        //软件配置信息地址,软件安装完成之后使用本地地址,如:http://localhost:9000
        BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
        // 在ID为map的元素中实例化一个地图,并设置地图的ID号为 bigemap.googlemap-streets,ID号程序自动生成,无需手动配置,并设置地图的投影为百度地图 ,中心点,默认的级别和显示级别控件
        var map = BM.map('map', 'bigemap.googlemap-streets', { center: [33, 80], zoom: 4, zoomControl: true, attributionControl: false });
        $.get('/Public/offline/bounds/100000.geojson', function (data) {
            data = JSON.parse(data);
             if (data) {
                $(".loading").css('display', 'none')
            }
            var all = ["#f7acbc", "#deab8a", "#817936", "#444693", "#ef5b9c", "#fedcbd", "#7f7522", "#2b4490", "#feeeed", "#f47920", "#80752c", "#2a5caa", "#f05b72", "#905a3d", "#87843b", "#224b8f", "#f15b6c", "#8f4b2e", "#726930", "#003a6c", "#f8aba6", "#87481f", "#454926", "#102b6a", "#f69c9f", "#5f3c23", "#2e3a1f", "#426ab3", "#f58f98", "#6b473c", "#4d4f36", "#46485f", "#ca8687", "#faa755", "#b7ba6b", "#4e72b8", "#f391a9", "#fab27b", "#b2d235", "#181d4b", "#bd6758", "#f58220", "#5c7a29", "#1a2933", "#d71345", "#843900", "#bed742", "#121a2a", "#d64f44", "#905d1d", "#7fb80e", "#0c212b", "#d93a49", "#8a5d19", "#a3cf62", "#6a6da9", "#b3424a", "#8c531b", "#769149", "#585eaa", "#c76968", "#826858", "#6d8346", "#494e8f", "#bb505d", "#64492b", "#78a355", "#afb4db", "#987165", "#ae6642", "#abc88b", "#9b95c9", "#ac6767", "#56452d", "#74905d", "#6950a1", "#973c3f", "#96582a", "#cde6c7", "#6f60aa", "#b22c46", "#705628", "#1d953f", "#867892", "#a7324a", "#4a3113", "#77ac98", "#918597", "#aa363d", "#412f1f", "#007d65", "#6f6d85", "#ed1941", "#845538", "#84bf96", "#594c6d", "#f26522", "#8e7437", "#45b97c", "#694d9f", "#d2553d", "#69541b", "#225a1f", "#6f599c", "#b4534b", "#d5c59f", "#367459", "#8552a1", "#ef4136", "#cd9a5b", "#007947", "#543044", "#c63c26", "#cd9a5b", "#40835e", "#63434f", "#f3715c", "#b36d41", "#2b6447", "#7d5886", "#a7573b", "#df9464", "#005831", "#401c44", "#aa2116", "#b76f40", "#006c54", "#472d56", "#b64533", "#ad8b3d", "#375830", "#45224a", "#b54334", "#dea32c", "#274d3d", "#411445", "#853f04", "#d1923f", "#375830", "#4b2f3d", "#840228", "#c88400", "#27342b", "#402e4c", "#7a1723", "#c37e00", "#65c294", "#c77eb5", "#a03939", "#c37e00", "#73b9a2", "#ea66a6", "#8a2e3b", "#e0861a", "#72baa7", "#f173ac", "#8e453f", "#ffce7b", "#005344", "#fffffb", "#8f4b4a", "#fcaf17", "#122e29", "#fffef9", "#892f1b", "#ba8448", "#293047", "#f6f5ec", "#6b2c25", "#896a45", "#00ae9d", "#d9d6c3", "#733a31", "#76624c", "#508a88", "#d1c7b7", "#54211d", "#6d5826", "#70a19f", "#f2eada", "#78331e", "#ffc20e", "#50b7c1", "#d3d7d4", "#53261f", "#fdb933", "#00a6ac", "#999d9c", "#f15a22", "#d3c6a6", "#78cdd1", "#a1a3a6", "#b4533c", "#c7a252", "#008792", "#9d9087", "#84331f", "#dec674", "#94d6da", "#8a8c8e", "#f47a55", "#b69968", "#afdfe4", "#74787c", "#f15a22", "#c1a173", "#5e7c85", "#7c8577", "#f3704b", "#dbce8f", "#76becc", "#72777b", "#da765b", "#ffd400", "#90d7ec", "#77787b", "#c85d44", "#ffd400", "#009ad6", "#4f5555", "#ae5039", "#ffe600", "#145b7d", "#6c4c49", "#6a3427", "#f0dc70", "#11264f", "#563624", "#8f4b38", "#fcf16e", "#7bbfea", "#3e4145", "#8e3e1f", "#decb00", "#33a3dc", "#3c3645", "#f36c21", "#cbc547", "#228fbd", "#464547", "#b4532a", "#6e6b41", "#2468a2", "#130c0e", "#b7704f", "#596032", "#2570a1", "#281f1d", "#de773f", "#525f42", "#2585a6", "#2f271d", "#c99979", "#5f5d46", "#1b315e", "#1d1626"];
            BM.geoJSON(data, {
                style: function () {
                    return { color: 'white', fillColor: all[Math.floor(Math.random() * all.length)], weight: 1, fillOpacity: 0.9 };
                },
                onEachFeature: function (feature, layer) {
                    feature.properties && feature.properties.name && layer.bindTooltip(feature.properties.name, { direction: 'bottom', className: 'my_tooltip', permanent: true });
                    layer.on('click', (e) => {
                           $(".loading").css('display', 'block')
                        if (feature.properties.name == '四川省') {
                            drawpic()
                             setTimeout(() => {
              $(".loading").css('display', 'none')
        }, 1000);
                           
                        }
                    })
                }
            }).on('mouseover', function (e) {
                e.layer.setStyle({ color: 'white', fillColor: all[Math.floor(Math.random() * all.length)], weight: 1, fillOpacity: 0.9 });
            }).on('mouseout', function (e) {
                e.layer.setStyle({ color: 'white', fillColor: all[Math.floor(Math.random() * all.length)], weight: 1, fillOpacity: 0.9 });
            }).addTo(map);
        })

        //---------------------------------------------------------------------------------------------------
        //d3 画图
        //定义墨卡托投影
        var height = 600
        var width = 600
        var svg = d3.select('.d3').append('svg').attr('height', height).attr('width', width).attr('transform', 'translate(-13,30)')

        var color = d3.scaleOrdinal(d3.schemeCategory10);

        drawmap()
        function drawmap() {
            var projection = d3.geoMercator()
                .center([103, 37])
                .scale(height * 0.9)
                .translate([width / 2, height / 2]);
            //定义绘制path
            path = d3.geoPath()
                .projection(projection);
            //获取原始数据
            d3.json("/Public/offline/bounds/100000.geojson").then(function (geo) {
                console.log(geo);
                var g = svg.append('g').attr('class', 'maptu')

                let Province = g.selectAll("path")
                    .data(geo.features)
                    .enter()
                    .append("path")
                    .attr("class", "province").style("fill", function (d, i) {
                        return color(i);
                    })

                    .attr("d", path);
                //处理数据 使用此数据生成文字和圆
                var price = []
                geo.features.map((d, i) => {
                    // console.log(d.properties);
                    price.push([
                        {
                            'name': d.properties.name,
                            'log': d.properties.center[0],
                            'lat': d.properties.center[1]
                        },
                    ])
                })
                console.log(price);
                //通过转换的坐标来给svg添加g元素进行定点:
                var location = g.selectAll('.location')
                    .data(price)
                    .enter()
                    .append('g')
                    .attr('class', 'location')

                    .attr('transform', (d) => {
                        console.log(d[0]);
                        var coor = projection([d[0].log, d[0].lat]);
                        return 'translate(' + coor[0] + ',' + coor[1] + ')';
                    });
                //通过定的点给svg的g元素添加circle元素,并填充颜色画圆。
                location.append('circle')
                    .attr('r', 5)
                    .attr('fill', '#e91e63')
                    .attr('class', 'location');
                //添加文字
                location.append('g').append('text').text(d => d[0].name).attr('font-size', 15)
                    .attr('transform', 'translate(-8,2)').attr('fill', 'snow')
                //缩放事件
                var zoom = d3.zoom()
                    .scaleExtent([1, 8])
                    .on("zoom", zoomed);
                function zoomed() {
                    g.attr('transform', d3.event.transform)
                }
                svg.call(zoom)
            });
        }
        function drawpic() {
            var projection = d3.geoMercator()
                .center([103, 31])
                .scale(height * 5)
                .translate([width / 2, height / 2]);
            //定义绘制path
            path = d3.geoPath()
                .projection(projection);
            //消除之前画的图形
            d3.select('.maptu').remove()
            var price = []
            d3.json("/Public/d3json/sichuan.json").then(function (geo) {
                console.log(JSON.parse(JSON.stringify(geo)));
                BM.geoJSON(geo, {
    
                    onEachFeature: function (feature, layer) {

                        var latlngs = layer.getBounds().getCenter()
                        price.push([
                            {
                                'name': feature.properties.name,
                                'log': latlngs.lng,
                                'lat': latlngs.lat
                            },
                        ])
                    }
                })

                console.log(price);

                var g = svg.append('g').attr('class', 'maptu')

                let Province = g.selectAll("path")
                    .data(geo.features)
                    .enter()
                Province
                    .append("path")
                    .attr("class", "province").style("fill", function (d, i) {
                        return color(i);
                    })
                    .attr("d", path)
                //通过转换的坐标来给svg添加g元素进行定点:
                var location = g.selectAll('.location')
                    .data(price)
                    .enter()
                    .append('g')
                    .attr('class', 'location')

                    .attr('transform', (d) => {
                        console.log(d[0]);
                        var coor = projection([d[0].log, d[0].lat]);
                        return 'translate(' + coor[0] + ',' + coor[1] + ')';
                    });
                // 通过定的点给svg的g元素添加circle元素,并填充颜色画圆。
                location.append('circle')
                    .attr('r', 5)
                    .attr('fill', '#e91e63')
                    .attr('class', 'location');
                //添加文字
                location.append('g').append('text').text(d => d[0].name).attr('font-size', 15)
                    .attr('transform', 'translate(-8,2)').attr('fill', 'snow')
                // 缩放事件
                var zoom = d3.zoom()
                    .scaleExtent([1, 8])
                    .on("zoom", zoomed);
                function zoomed() {
                    g.attr('transform', d3.event.transform)
                }
                svg.call(zoom)
            });
        }
    </script>
</body>

</html>