一、功能步骤

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 = BMapthis.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 } = districtfor (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}, [])})});})}

三、问题及解决

当访问地址出现以下错误

这是因为百度地图安全设置导致，解决方案就是进入百度地图开放平台，控制台下，切换到“应用管理”，“我的应用”，选择我们使用的应用进入到“设置”界面：

在设置页面中将Referer白名单选项，设置为“*”，表示允许所有的referer。

之后再次访问，访问成功，大功告成，告辞！！

实现百度地图-区域高亮展示相关推荐

百度地图行政区域高亮
最近接着个需求,需要在地图上将行政区域高亮,在网上找了几个方法,都是自己算的点顺序,总结了一下,出现过以下几个问题 1.行政区域边线画出来了,但是遮罩不准,应该是点顺序的问题,导致总是有显示或者不显示 ...
【定制项目】【M14 监测预警平台】百度地图区域绘制(时间轴）/柱状图/仪表图 - 关键技术 python flask + echarts
一.项目需求项目名称:[某监测预警平台]. 项目需求:气候数据:雨量,温湿度,PM,雷达回波,雷电预报等展示到可视化大屏. 项目工期:10个工作日. 二.项目架构运行环境支持Windows,Lin ...
百度地图js轨迹展示
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak= ...
百度地图实现只展示某一个省份地图，点击市以后高亮
一.弯路记录刚开始走了弯路,各种百度以后使用的以下方法. 实现效果是将地图上当前省份以外的地方添加覆盖物,当前省份的地图可以缩小放大,遇到的问题是地图div边缘始终有一道细细的白边,未找到方法去除, ...
百度地图和solr展示资源和附近等功能的实现二
这里 solr 这块主要说说如何实现附近功能,主要实现的方法有下面几种 1.使用LatLonType(用于平面坐标,而不是大地坐标)版本比较老好像不怎么用了 2.SpatialRecursivePr ...
地图统计_博客城市访问量统计并且通过Echarts+百度地图展示
本篇讲解一下如何在Vue 中使用 Echarts + 百度地图统计博客访问量并且通过QQWry 解析 ip 地址利用Echarts 展示出来效果图如下: 1.纯真Ip地址库 QQWry 这 ...
数据视化Echarts+百度地图API实现市县区级下钻
开始这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
百度地图坐标系相关学习总结
百度地图API详解之地图坐标系统我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需要一个转换过程,这个过程就叫做投影(Projection).在地球上我们通过 ...
navigator.geolocation的应用 - 将定位信息显示在百度地图上
在学习navigator.geolocation的时候,有一个实例是获取坐标后显示在谷歌地图上.众所周知,谷歌地图国内并不能直接访问,得用特殊手段,那我要测试的时候还要开着梯子挺麻烦的,想给别人用也得 ...

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

一、功能步骤

二、页面说明

三、问题及解决

实现百度地图-区域高亮展示相关推荐

最新文章

热门文章