百度地图按行政区、县划分轮廓界限
背景
在物联网行业,用户、决策者通常需要直观地看到不同区域、地点处的设备部署情况,便于了解整体分布。通过在数字地图上动态划分各区、县的边界,同时显示每个区域的设备数量,可实现这一需求。其实,这种技术已经很成熟,并在各大找房网站中得到广泛应用。
这里列出几个参考网站,随便感受下:
- 悟空找房
- 链家网
- 爱屋吉屋
- 安居客
- 巴乐兔
基本上就是根据地图(高德、百度)的不同放大级别,分别显示不同的覆盖物;
项目需求
在百度地图上,分级,按行政区、县划分轮廓界限;
一开始拿到这一需求后,先查阅了相关资料,结果基本都指向了悟空找房,果然不错,随即确认了眼神。向各大找房网站学习~~
效果展示
总结
(1) 自定义覆盖物
主要解决了以下几个问题:
- 标注位置、样式;
- 根据放大级别显示不同的标注覆盖物;
(2) 调用百度API获取指定区域边界数据;
官方Demo
var plys = [];
var bdary = new BMap.Boundary();
bdary.get(省区县名, function (rs) {var count = rs.boundaries.length;//建立多边形覆盖物for (var i = 0; i < count; i++) {var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2,strokeOpacity: 0.8,StrokeStyle: "solid",strokeColor: "#1abc9c",fillColor: "#16a085",fillOpacity: 0.2});plys.push(ply);map.addOverlay(ply); //添加覆盖物}
});
(3) 显示、隐藏轮廓边界;
为避免重复调用接口,并多次渲染地图边界,对边界点调用show()
, hide()
方法,实现轮廓边界的显示与隐藏。
// 显示轮廓
for (var i = 0; i < plys.length; i++) {plys[i].show();
}// 隐藏轮廓
for (var i = 0; i < plys.length; i++) {plys[i].hide();
}
(4) mouseover和mouseout在鼠标悬浮时多次触发;
问题的根源在子元素,一句话说明 mouseover与mouseenter 的区别:
无论鼠标穿过被选元素或其子元素,都会触发 `mouseover` 事件。
仅当鼠标穿过被选元素时,才会触发 `mouseenter` 事件。
所以将 mouseover改为mouseenter
,mouseout改为mouseleave
,即可达到目的。
Reference
Source Code: Github
If you have any questions or any bugs are found, please feel free to contact me.
Your comments and suggestions are welcome!
百度地图按行政区、县划分轮廓界限相关推荐
- 根据经纬度确定行政区域_基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标...
前言 近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GP ...
- nuxt百度地图引入基础使用,百度地图初始化,行政区划划分
如何在nuxt项目中使用百度地图 进入百度地图API 选择javascriptAPI,按照流程注册账号获取ak,复制ak 按照页面提示的,需要引入script标签 这里我们打开nuxt项目中的nuxt ...
- 百度地图获取行政区边界坐标
输入行政区名称,获取相应的行政区边界坐标 <!DOCTYPE html> <html><head><meta http-equiv="Content ...
- 百度地图绘制行政区边界
一般app很少看到有在百度地图上显示行政边界的,本想偷懒一回,拿个现成的,但百度好长时间都没有.还是耐心的去看类参考吧,后来发现挺简单的,所以记录一下方便以后直接拿来用了. 其实就是获取点位生成图层添 ...
- 百度地图的边界/行政划分
根据百度地图开发平台提供的示例代码 function getBoundary(){ var bdary = new BMap.Boundary();bdary.get("北京市海淀区&quo ...
- 百度地图 显示,定位,轮廓图
initMap: function () {var me = this;var map = new BMap.Map(me.gisBaiduMap);//在百度地图容器中创建一个地图//创建和初始化地 ...
- 百度地图坐标点上图,行政区域轮廓的应用
不显示marker,只显示label <script>var map = new BMap.Map('dt') //创建地图实例 dt:地图容器idmap.centerAndZoom(ne ...
- 如何最用最懒的方式获取百度地图的行政区边界坐标范围
1.打开百度js api页面,http://lbs.baidu.com/jsdemo.htm#c1_10 刚好打开这个例子, 2.首先把"北京市海淀区"改为你想要的如" ...
- 利用百度地图进行城市功能区域划分
记录: 使用百度地图api进行各类兴趣点的划分 将研究区域利用arcgismap进行网格的划分和渔网经纬度范围的导出 将网格的范围与兴趣点坐标进行匹配与计算. 利用所获得的区域的兴趣点的频率进行方格区 ...
最新文章
- 专利实力论互联网巨头造车:中美格局初定,百度苹果跨洋辉映
- C语言有符号整数最小值,16位带符号整数为什么是
- 怎么用PHP语句做出增改删查功能,mysql语句实现简单的增、删、改、查操作示例...
- MySQL基础课堂笔记
- C如何将二维数组作为返回值
- sql注入语句示例大全_SQL Order By语句:示例语法
- python计算速度_python中如何提高计算速度?
- bzoj3744: Gty的妹子序列 (BIT 分块)
- knowledge_based topic model - AMC
- Arcgis中的空间数据拓扑理论及规则
- ERP原理:第二节 物料清单(BOM)
- PR视频去水印—中间值
- FrameMaker从零到学习编码
- 收藏|超实用的100个示波器基础知识问答
- 微信小程序云开发获取上传图片后https的url链接地址
- 谷歌AI论文BERT双向编码器表征模型:机器阅读理解NLP基准11种最优(公号回复“谷歌BERT论文”下载彩标PDF论文)
- 一文了解SAP IBP是什么?
- RTOS内功修炼记(九)—— 任务入口函数执行完毕之后去哪里?
- PATA1052 Linked List Sorting (25 分)
- fork 循环创建多个子进程