使用js地图选点

简介: 使用js地图选点

主要使用到的类:

1. BMap 基类(不多说,自己看文档)

2. Polygon (多边形覆盖物)

3. Marker(热点标注)

4. Polyline (绘制折线)


简单说下思路:

第一步:

对 Map 添加click事件。 获取当前点击的 坐标并生成 热点。 将热点 存储数据中。


第二步:

当点击第二个点时,创建 BMap.Polyline(options,{}) .第一个 options 就是 热点集合,再调用 bmp.addOverlay(polyline).加入到地图中。 注意:(如果后面要做折线删除,就需要调用enableMassClear()【官方解释:允许覆盖物在map.clearOverlays方法中被清除】)、


第三步:

当满足3个以上的点。 就可以闭合,结束绘画区域了。 这里所谓的 闭合,其实是一个假象。

做的操作其实是: 将polyline 里的 点的坐标, 读出来,再生成一个 polygon对象。 然后回来再删除 polyline 对象。


c707c2fe96a549088b4f96c582edcc22.png

a0c69683a7264f3b8704f30232671237.png

相关文章
|
11月前
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
753 0
|
14天前
|
JavaScript 定位技术 API
Js地图路线规划以及点击获取经纬度
Js地图路线规划以及点击获取经纬度
|
1月前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
98 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
11月前
|
JavaScript 定位技术 容器
vue.js实战案例(1):外部直接引入渲染echarts地图的实战案例
vue.js实战案例(1):外部直接引入渲染echarts地图的实战案例
66 0
|
8月前
|
JavaScript 前端开发 定位技术
JavaScript如何操作实现一个地图并标记到自身当前位置(本文从创建key值开始,到实现标点结束)
JavaScript如何操作实现一个地图并标记到自身当前位置(本文从创建key值开始,到实现标点结束)
48 0
JavaScript如何操作实现一个地图并标记到自身当前位置(本文从创建key值开始,到实现标点结束)
|
10月前
|
JavaScript 前端开发 定位技术
js实现地图选点获取经纬度
js实现地图选点获取经纬度
118 0
|
11月前
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
485 0
|
11月前
|
XML 存储 JavaScript
Echarts实战案例代码(18):GIS地图中GeoJson、TopoJson、SVG、SHP、JS常见格式相互转化的基础知识
Echarts实战案例代码(18):GIS地图中GeoJson、TopoJson、SVG、SHP、JS常见格式相互转化的基础知识
371 0
|
11月前
|
JavaScript 数据可视化 定位技术
Echarts实战案例代码(11):利用geojson数据地图map组件生成js本地版直接访问的解决方案
Echarts实战案例代码(11):利用geojson数据地图map组件生成js本地版直接访问的解决方案
335 0
|
JavaScript 定位技术 API
ArcGIS API for JavaScript4.x 之加载2D、3D地图
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/81545607 ArcGIS AP...
1497 0