042：vue+leaflet 的DivIcon使用技巧，个性化Marker

已于 2024-05-11 09:42:13 修改
阅读量1.2k 收藏 17
点赞数 17
CC 4.0 BY-SA版权
分类专栏： # leaflet综合教程150+ 文章标签： leaflet示例 leaflet DivIcon 大剑师 leaflet基础教程
于 2022-11-21 22:39:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/127974149
本文由大剑师兰特分享，详细介绍了如何在Vue与Leaflet结合的项目中使用DivIcon，以div元素替代图片作为Marker。通过设置className和html内样式实现个性化图标，并提供89行源代码供读者快速实现效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 042个示例

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+leaflet中使用DivIcon。 它是轻量级的icon,用div元素替换图片作为Marker。在使用的过程中，发现className这个选项不太好使，最好使的手段就是在html中添加自己的s

了解本专栏 订阅专栏 解锁全文
086：vue+leaflet 加载geojson数据,随机显示不同颜色的circleMarker
大剑师兰特的GIS世界
02-21 975
第086个本示例的目的是介绍演示如何在vue+leaflet项目中加载geojson数据,随机显示不同颜色的circleMarker.
131：vue+leaflet实现波动的marker效果
大剑师兰特的GIS世界
04-07 1660
第131个本示例的目的是介绍如何在vue+leaflet中显示波动的marker效果。
Leaflet 文字标注
CycleByle的博客
08-12 1233
【代码】Leaflet 文字标注。
源码分析之Leaflet中DivIcon
最新发布
Jinuss的博客
04-28 311
源码分析之Leaflet中DivIcon
使用Leaflet加载GeoJSON数据并随机显示不同颜色的CircleMarker
LdfcLoop的博客
09-16 697
在本文中，我将向您展示如何使用Leaflet加载GeoJSON数据，并在地图上随机显示不同颜色的CircleMarker。通过将HTML文件在浏览器中打开，您将看到一个地图，其中显示了加载的GeoJSON数据，并且每个要素都以随机颜色的CircleMarker进行了标记。在上面的代码中，我们引入了Leaflet的CSS和JavaScript文件，并创建了一个带有id为"map"的div元素，该元素将用于显示地图。在上面的代码中，我们首先创建了一个地图对象，并设置其初始视图。的函数，该函数用于生成随机颜色。
leaflet篇（2）divIcon自定义class类名
weixin_68317479的博客
08-21 361
在style样式中记得把你自定义的类名写在前custom-marker。
Leaflet 入门教程（七）：markers 篇
大剑师兰特的GIS世界
05-08 2788
在Leaflet中，`Markers`（标记）是最基本的图元之一，用于在地图上的特定坐标位置显示信息或图标。。
【OpenCV 图像基础】2.2图像基本处理：图像几何变换
尊新必威的博客
09-24 1397
1.图像平移 代码： import cv2 import numpy as np img = cv2.imread('img2.png') # 构造移动矩阵H # 在x轴方向移动多少距离，在y轴方向移动多少距离 H = np.float32([[1, 0, 50], [0, 1, 25]]) rows, cols = img.shape[:2] print(img.shape) print(rows, cols) # 注意这里rows和cols需要反置，即先列后行 res = cv2.warpAf.
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)
03-01
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在...
066：vue+leaflet 设置多个marker，导出为一个geojson文件
大剑师兰特的GIS世界
02-15 595
第066个本示例的目的是介绍演示如何在vue+leaflet中使用L.marker设置多个markers， 通过数据重组，导出为geojson文件。这里面是一个很重要的判断条件，可以灵活地去运用。
013：vue+leaflet使用circleMarker画圆形
大剑师兰特的GIS世界
09-14 1098
本示例的目的是介绍演示如何在vue+leaflet中画圆形，这里使用的是circleMarker的api方法。点击查看本专栏内容目录列表。
leaflet-地图文字标注
10-30
可以在leaflet地图上添加文字标注，可以自己设置样式，有背景色或者无背景色
Leaflet.geojsonCSS, Leaflet的Geojson CSS实现.zip
09-18
Leaflet.geojsonCSS, Leaflet的Geojson CSS实现 Leaflet.geojsonCSSGeojson CSS Leaflet的实现。现场演示插件 使用 L.GeoJSON.CSS 或者 L.GeoJSON.CSS 而不是 L.GeoJSON 和 L.GeoJSON:L.g
vue2中使用Leaflet实现单个或多个marker图标
weixin_39405946的博客
09-04 6707
vue2中使用Leaflet实现单个或多个marker图标初始化一个vue项目在 vue 中安装 Leaflet在main.js中引入leaflet加载一个简单的地图框架添加一个或多个Marker 因为公司gis工程师离职了，只能让前端来做gis功能了，看着leaflet的官网和各家大神的文章把标记点这些搞出来了，现在总结一下实现步骤。 初始化一个vue项目 vue init webpack le...
Leaflet自定义svg图标——divIcon
qq_45059900的博客
11-06 1515
添加自定义svg图标 addMarker (latlon,liquidIcon=false,flowIcon=false,qualityIcon=false,JgIcon=false) { let iconType; if(liquidIcon){ iconType = 'liquid' }else if(flowIcon){ iconType = 'flow' }else if(qualityI..
LeafletJS-Markers
专注GIS软件开发。
06-03 1274
为了在地图上标记单个位置，传单提供了标记。这些标记使用标准符号，并且可以自定义这些符号。在本章中，我们将看到如何添加标记以及如何自定义，动画化和删除它们。 添加一个简单的标记 要使用Leaflet JavaScript库将标记添加到地图，请遵循以下步骤- 步骤1-通过传递<div>元素（字符串或对象）和地图选项（可选）来创建地图对象。 步骤2-通过传递所需图块的URL创建一个Layer对象。 第3步-使用Map类的addLayer（）方法将图层对象添加到地图。 步骤4-通过传...
leaflet marker设置 地图 图像（geoJson）
Bruce_byan的博客
12-16 951
map地图定义及添加图层 setMap1(){ //到 mapbox 官网注册并创建下面的access token都是免费的，不过有5w次的浏览限制 var url = 'http://124.163.214.106:18065/arcgis/rest/services/shenjie_bg/MapServer/tile/{z}/{y}/{x}'; //初始化 地图 //map = L.map('mapid').setView([35.717, 112.633
jq获取循环数据与随机颜色，重组生成json数组
weixin_40431771的博客
05-07 593
//获取所有原始数据长度 var len = $(".list").length; //生成json数组 var jsonString = []; for (var i=0; i < len; i++){ var json= {}; //数组里每一组的格...
leaflet—marker总结
热门推荐
孙霸天的专栏
01-02 1万+
今天公司的app需要完成一个需求： 在地图上通过自己手动添加一个marker点，然后将坐标等数据(经纬度)传给另个方法中，去获取地理编码信息。最后将坐标信息和地理编码信息以及手动添加的相关点数据一起传给后台去存储。并且在查看信息的时候定位到该坐标位置。 分析： 0.按钮触发 1.需要在地图上获取人手点击的位置(经纬度) 2.将经纬度传给marker并在地图上生成 3.并且marker点...
vue+leaflet写一个网页
10-19
import { Map, TileLayer, Marker } from 'vue-leaflet'; Vue.use(Map); Vue.use(TileLayer); ``` 3. **创建地图组件**： 创建一个名为`MapComponent.vue`的组件，展示基本的地图和初始化设置： ```html ...
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值