实现百度地图-区域高亮展示

String可以被继承

已于 2023-06-13 10:15:32 修改

阅读量1.1k

点赞数 2

文章标签： java 数学建模开发语言

于 2023-06-13 09:26:27 首次发布

本文链接：https://blog.csdn.net/goodipip/article/details/131181127

版权

一、功能步骤

1. 创建springboot项目，并导入以下依赖

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

2. 创建程序入口，用于测试，代码如下：

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * @author: XXX
 * @time: 2023/6/5
 * @description:
 */
@Controller
public class HighlightController {

    @GetMapping("/")
    public String page(){

        return "highlight";
    }

}

3. 创建展示页面，代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<style>
    .bmap {
        height: 100vh;
    }
</style>

<!-- 百度 -->
<script src="https://api.map.baidu.com/api?v=3.0&ak=QWGGPemjw9qOUPok5FviGDZWZ8pvBI76&styleId="></script>
<!-- echarts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- 扩展地图插件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>

<div id="bmap" class="bmap"></div>
<script>

    class MapHightLight {
        constructor(BMap, bmapInstance) {
            this.BMap = BMap
            this.bmapInstance = bmapInstance
        }
        /**
         *  设置高亮区域坐标位置
         */
        #getDistrict(distirct) {
            const bdary = new this.BMap.Boundary();
            return new Promise((resolve, reject) => {
                bdary.get(distirct.name, function (res) {
                    resolve({
                        ...distirct,
                        points: res.boundaries.reduce((pre, next) => {
                            pre.push('114.550083, 38.009341;114.550636, 38.009341;114.550663, 38.008847;114.5505, 38.008858;114.550455, 38.009043;114.550437, 38.009071;114.550401, 38.009089;114.550113, 38.009135;114.550082, 38.009157')
                            return pre
                        }, [])
                    })
                });
            })
        }


        #drawBoundary(districts) {
            const pointArray = [];
            for (const district of districts) {
                const { name, color } = district
                for (const point of district.points) {
                    const ply = new this.BMap.Polygon(point, {
                        strokeWeight: 1, //边框宽度
                        strokeColor: "red", //边框颜色
                        fillColor: color //填充颜色
                    }); //建立多边形覆盖物
                    ply.name = name;
                    this.bmapInstance.addOverlay(ply);
                    const path = ply.getPath();
                    pointArray.push(...path);
                }
            }
            this.bmapInstance.setViewport(pointArray)
        }

        /**
         * @description: 获取当前区域的路径坐标
         * @param { Array<any> } distirct
         * @return {*}
         */
        getDistricts(distirctList) {
            const promiseList = distirctList.reduce((pre, distirct) => {
                pre.push(this.#getDistrict(distirct))
                return pre
            }, [])

            Promise.all(promiseList).then(res => {
                this.#drawBoundary(res)
            })
        }

    }


    var myChart = echarts.init(document.getElementById('bmap'))
    option = {
        title: {
            text: '',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: function (res) {
                return res.name + ':' + res.value[2]
            }
        },
        bmap: {
            center: [114.550152, 38.009271,10],
            zoom: 10,
            roam: true,
            mapStyle: {
            },
        },
        series: [
            {
                name: '中冶盛世广场',
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: [
                    { name: '中冶盛世广场', value: [114.550152, 38.009271,10] }
                ],
                symbolSize: function (val) {
                    return val[2]
                },
                rippleEffect: {
                    brushType: 'stroke'
                },
                itemStyle: {
                    normal: {
                        color: '#ff0000', //“点” -- 颜色
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                }
            }
        ]
    }
    myChart.setOption(option)
    var bmap = myChart.getModel().getComponent('bmap').getBMap();
    bmap.setMapStyleV2({
        styleId: '5c067ea626775da3d2131d4b41d04363'
    });

    // getBoundary()

    const distirctList = [{ name: '石家庄裕华区', color: 'black' }]

    const mapHightLight = new MapHightLight(BMap, bmap)

    mapHightLight.getDistricts(distirctList)
</script>
</body>

</html>

二、页面说明

注明：以下为上述代码说明，及配置。

1.要想使用百度API需注册百度地图账号，并获取AK。

可以访问以下链接来进行注册：注册百度帐号

2. 在我的应用中申请，步骤如下：

（1）点击应用管理--->我的应用--->创建应用，应用类别为浏览器端即可。

3. 将申请的AK复制到该位置

<!-- 百度 -->
<script src="https://api.map.baidu.com/api?v=3.0&ak=你的AK&styleId="></script>

4. 通过“拾取坐标系统”获取我们要实现高亮区域的经纬度拾取坐标系统

5. 设置页面加载首先显示的位置

 bmap: {
            center: [114.550152, 38.009271,10],
            zoom: 10,
            roam: true,
            mapStyle: {
            },
        }

6. 设置区域以及区域点的形状

series: [
            {
                name: '测试',
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: [
                    { name: '中冶盛世广场', value: [114.550152, 38.009271,10] }
                ],
                symbolSize: function (val) {
                    return val[2]
                },
                rippleEffect: {
                    brushType: 'stroke'
                },
                itemStyle: {
                    normal: {
                        color: '#ff0000', //“点” -- 颜色
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                }
            }
        ]

7. 设置高亮以及轮廓的颜色

    //设置所在位置的市级与高亮部位的颜色
    const distirctList = [{ name: '石家庄', color: 'black' }]

8. 设置高亮区域

        /**
         *  设置高亮区域坐标位置
         */
        #getDistrict(distirct) {
            const bdary = new this.BMap.Boundary();
            return new Promise((resolve, reject) => {
                bdary.get(distirct.name, function (res) {
                    resolve({
                        ...distirct,
                        points: res.boundaries.reduce((pre, next) => {
                            pre.push('114.550083, 38.009341;114.550636, 38.009341;114.550663, 38.008847;114.5505, 38.008858;114.550455, 38.009043;114.550437, 38.009071;114.550401, 38.009089;114.550113, 38.009135;114.550082, 38.009157')
                            return pre
                        }, [])
                    })
                });
            })
        }