LeafletJS 简单使用2 - 地图标点L.marker()、清除标点removeLayer、点击地图标点、清除地图map.remove()、画点线L.polygon()、画圆L.circle()
2024-05-10 04:53:35
目录
- 1. 业务需求
- 2. 代码示例
- 注意的点
- 补充示例：`L.polygon()` 画点线、`L.circle()` 画圆（该文档中未涉及）
- 3. 页面展示
1. 业务需求
现有数据：初始经纬度信息
this.point
打开抽屉层：
- 创建地图
- 将当前初始经纬度信息使用标点方式通过图标展示出来
- 当前经纬度为地图中心点
点击地图：将初始标点进行清除 → 点击位置添加新标点 → 询问用户是否确定该标点位置
- 确定：关闭当前抽屉层，将最新点击的标点数据
this.clickPoint传给父组件- 取消：清除最新标点，展示初始标点
2. 代码示例
<!-- 地图标注弹出框 -->
<template><section id="MarkPoint"><el-drawertitle="地图标注"size="65%":append-to-body="true":before-close="beforeCloseHandler"@close="closeHandler":visible.sync="innerDrawerVisible"><!-- <cdt-map @result="mapInit"></cdt-map> --><div id="map"></div></el-drawer></section>
</template>
<script>
// import CdtMap from '@/components/cdt-map/index'
import { mapGetters } from 'vuex'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { tiledMapLayer } from '@supermap/iclient-leaflet'export default {name: 'MapNew',components: {// CdtMap},data() {return {innerDrawerVisible: false,map: null,point: {}, // 经纬度初始值clickPoint: {}, // 点击地图 - 当前点击位置经纬度mapIcon: require('@/assets/mapIcon.png'), // 地图标点图标layer: null // 标点图层}},computed: {...mapGetters(['sysConfigData'])},watch: {// 侦听点击地图时，当前标点经纬度发生变化clickPoint: {handler(val) {if (!!val.jd) {this.$confirm(`确定标注以下经纬度吗？<br/> 经度 ${val.jd}<br/> 纬度 ${val.wd}`,'提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',dangerouslyUseHTMLString: true}).then((_) => {/**** 确定当前标点 ****/this.$message.success('标点成功')this.innerDrawerVisible = falsethis.$emit('updatePoint', val)}).catch((_) => {/**** 取消当前标点 ****/this.clickPoint = {}// 清除点击处标点this.map.removeLayer(this.layer)// 将标点标回原位置this.setPoint([this.point.wd, this.point.jd])this.$message.info('取消经纬度标注')})}}}},methods: {// 打开抽屉层open(pointer) {this.innerDrawerVisible = truethis.point = pointerthis.$nextTick(() => {this.mapInit()})},// 初始化地图mapInit() {this.map = L.map('map', {center: JSON.parse(this.sysConfigData['gx.arcgis.center']),maxZoom: this.sysConfigData['gx.arcgis.maxZoom'] * 1,zoom: this.sysConfigData['gx.arcgis.zoom'] * 1}).on('click', (ev) => {/**** 点击地图，清除原有坐标，将图标标点在当前点击位置 ****/this.clickPoint = {jd: ev.latlng.lng, // 经度wd: ev.latlng.lat // 纬度}this.map.removeLayer(this.layer) // 移除原有图标图层this.setPoint([ev.latlng.lat, ev.latlng.lng]) // 添加当前点击位置为新标点位置})tiledMapLayer(this.sysConfigData['gx.arcgis.mapUrl']).addTo(this.map) // 生成地图/**** 判断有没有经纬度，有的话标点 start ****/if (this.point.jd && this.point.wd) {// 画点线// // this.layer = L.polygon([JSON.parse(this.sysConfigData['gx.arcgis.center'])], {// this.layer = L.polygon([JSON.parse(this.sysConfigData['gx.arcgis.center']), [22, 108]], {// color: 'blue',// fillColor: 'none',// opacity: 0.2// })// 画圆// this.layer = L.circle([22, 108], {// color: 'green',// fillColor: '#f03',// fillOpacity: 0.5,// radius: 10000// // }).addTo(this.map)// })// this.map.addLayer(this.layer)this.setPoint([this.point.wd, this.point.jd]) // 初始位置标点this.map.panTo(new L.LatLng(this.point.wd, this.point.jd)) // 当前图标位置为地图中心点}/**** 判断有没有经纬度，有的话标点 end ****/},// 标点setPoint(latlngArr) {/*** latlngArr数组：[纬度， 经度]*/this.layer = new L.marker(latlngArr, {title: 'iconTitle',clickable: false,draggable: false,icon: L.icon({iconUrl: this.mapIcon, // 标点图标iconSize: [30, 36]})})this.map.addLayer(this.layer)},beforeCloseHandler(done) {this.$confirm('还有未保存的工作，确定关闭吗？').then((_) => {done()}).catch((_) => {})},closeHandler() {this.layer = nullif (this.map) this.map.remove() // 移除原有地图// this.map = null}}
}
</script><style lang='scss' scoped>
#map {position: absolute;top: 47px;bottom: 0;height: calc(100% - 47px);width: 100%;margin: 0 -30px;border: 2px solid red;
}
</style>
注意的点
- 清除现有地图
if (this.map) this.map.remove() - 移除指定标点图层
this.map.removeLayer(this.layer)
补充示例：L.polygon() 画点线、L.circle() 画圆（该文档中未涉及）
示例1 - 画点
this.layer = L.polygon([JSON.parse(this.sysConfigData['gx.arcgis.center'])], {color: 'blue',fillColor: 'none',opacity: 0.2 }) this.map.addLayer(this.layer)
示例2 - 画线
this.layer = L.polygon([JSON.parse(this.sysConfigData['gx.arcgis.center']), [22, 108]], {color: 'blue',fillColor: 'none',opacity: 0.2 }) this.map.addLayer(this.layer)示例3 - 画圆
this.layer = L.circle([22, 108], {color: 'green',fillColor: '#f03',fillOpacity: 0.5,radius: 10000 }).addTo(this.map) // this.map.addLayer(this.layer) /* L.circle().addTo(this.map) 或者 this.map.addLayer(this.layer)都可以将图层添加到地图 */
3. 页面展示
- 打开抽屉层页面展示
- 用户点击地图后，页面展示
LeafletJS 简单使用2 - 地图标点L.marker()、清除标点removeLayer、点击地图标点、清除地图map.remove()、画点线L.polygon()、画圆L.circle()相关推荐
- vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录 一.需求 二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码 其他: 一.需求 因为不知 ...
- LeafletJS 简单使用1 - 地图标点 L.marker()、清除标点 layerGroup.clearLayers() 【SuperMap iClient for Leaflet】超图的使用
目录 一.业务需求 二.参考文档 三.实现思路 四.参考代码 4.1 安装依赖 4.2 生成一张地图 4.3 标点_自定义标点图标 4.4 清除标点 五.用到的 API 六.整体代码 + 页面展示 七 ...
- 高德地图js API实现多点标记marker，多点marker移除和鼠标滑入标点显示提示框
官方API:https://lbs.amap.com/api/javascript-api/guide/abc/prepare 先说下需求吧,我就不往外一段一段的摘了: 分全部和三家运营商,按钮点击, ...
- GIS（四）——为js版搜狗地图添加边界+Marker和Brand的最终美化版
在<GIS(三)--优化js版搜狗地图的brand标牌样式>中,分享了一下Brand样式的修改.现在把这几次Marker和Brand的修改统一再美化一下,算作一个终极优化版吧. 这次优化的 ...
- android 百度map 一个layout加载多个mapview,android 百度地图API 使用Marker和InfoWindow
前言:在android开发过程中,百度地图的使用是比较普遍的,但是如何使用,使用什么版本的百度API还是需要一些讲究. 在项目过程中,需要用到百度地图的marker和InfoWindow的功能. 标注 ...
- 只用一个marker 替换 高德_Android基于高德地图完全自定义Marker的实现方法
前言 相信做地图社交类APP开发的大家都知道,一般情况下,为了整体的美观和用户体验度,我们需要定制化Marker的样式.本文中实现的方式都是基于高德地图的,百度地图也类似,大家可以照葫芦画瓢,废话不多 ...
- 高德地图开发：Marker 与 Polyline
高德地图:Marker 与 Polyline 项目场景: 效果展示: 解决思路: 详细设计: MARKER 不同标记物的形状 Polyline 的动态路径显示或者隐藏 代码展示: 解决思路分析: 路径 ...
- 完美解决百度地图MarkerClusterer 移动地图时，Marker 的Label 丢失的问题
完美解决百度地图MarkerClusterer 移动地图时,Marker 的Label 丢失的问题 参考文章: (1)完美解决百度地图MarkerClusterer 移动地图时,Marker 的Lab ...
- android高德marker添加点击,高德地图上添加marker，给每一个marker添加点击事件。...
高德地图上添加marker,给每一个marker添加点击事件. 高德地图上添加marker,给每一个marker添加点击事件.javascript var watch = [] $.ajax({ ty ...
最新文章
- 生成对抗网络（Generative Adversarial Network，GAN）
- JavaScript,JS如何控制input输入字符限制
- Java泛型的不变性和作用域
- [Python图像处理] 十九.图像分割之基于K-Means聚类的区域分割
- 关于重构之Switch的处理【二】
- Oracle新建数据库和用户及表空间
- 基于JAVA+SpringMVC+Mybatis+MYSQL的家校通管理系统
- 安全云盘项目（四）4.1： 云盘原型系统详细设计
- AD原理图编译WARNING：Net XXX has no driving source
- 请求帮助--访问被拒绝:“Interop.jmail”
- 20个常用模拟电路（嵌入式硬件篇）
- 兄弟们，以后不能愉快的抽烟
- DDNS设置（自用）
- 【打印机配置】斑马打印机配置步骤
- [Python]第一章(建议收藏)
- Pycharm 字体大小调整
- Vue中keep-alive用法
- 加拿大政府贯彻量子技术重要性，221万美元资助量子算法研究所
- word里贴代码神器（不需要下载）
- 明年9月，南京大学苏州校区将正式招生！