mapbox-gl:创建Marker
mapbox-gl提供了两种在地图上创建poi方式:使用图层(Layers)中的symbol样式,另一种是使用Marker的形式,图层的数据源是geojson数据,Marker是以坐标点的形式加载到地图上。
这两者的区别是:图层(Layers)适用于批量加载poi数据,poi只能在地图显示成图标或者文字,或者是两者的混合,poi加载的数据量可以达到很多;Marker是一个一个的根据坐标加载到地图上,poi的样式比较丰富,完全根据html中排版和css样式进行设计,poi的加载数据量比较小。
在地图上创建一个基本自带Marker:
var marker = new mapboxgl.Marker()
.setLngLat([30.5, 50.5])
.addTo(map);
通过浏览的开发调试,可以发现在页面上加载了一个html元素,在地图移动时,通过css中的translate rotate等变换参数进行变化,达到跟随上地图相应的坐标点。
在Marker的api中,通过element的属性,可以设置自定义的html元素,从页面文档中选取,或者通过createElement进行元素创建:
var el = document.createElement('div');
el.className = 'marker';
同时,在html的元素上加载css3,能实现一些更良好的效果,同时能加上动态的标签效果。
毕竟Marker是通过html元素的形式进行加载的,当同一地方聚集很多的时候,页面会有些卡顿,而使用图层就不会存在这种问题。
参考文档:
https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker
更多文章请关注公众号查看!
mapbox-gl:创建Marker相关推荐
- Mapbox gl tile瓦片渲染点以及图片Icon
Mapbox gl tile瓦片渲染点以及图片Icon 1. 效果图 2. 源码 参考 1. 效果图 点效果图如下: 以图标渲染效果图如下: 注意图片要不能跨域,需要下载的下来才能正常展示. 2. 源 ...
- 初识mapbox GL
一.概述 最近由于项目的需求,借此机会对mapbox GL做了一个系统的学习,同时也对整个学习过程做一个记录,一方面留作自用,另一方面也希望看到此文的人在学习mapbox GL的时候,能够有所启发.有 ...
- Mapbox GL JS介绍及使用
Mapbox GL JS介绍及使用:(以web端基本交互实现为例) Mapbox GL JS 是一个 JavaScript 库,它使用 WebGL,以 vector tiles 和 Mapbox st ...
- 进阶mapbox GL之paint和filter
概述 通过前面的文章初识mapbox GL我们对mapbox GL有了一个相对比较全面的认识,本节结合一些示例,重点讲述一下mapbox GL里面的filter和paint的用法. 说明 本文中的示例 ...
- Mapbox GL JS 表达式概述
表达式(expressions)是Mapbox GL JS的一个高级功能,它为数据的添加和渲染展示提供了更多的灵活性. 表达式的功能包括: 数据驱动样式:根据一个或多个数据属性指定样式规则. 算术:对 ...
- GIS开发:推荐Mapbox gl解决方案
在二维地图的开发中,实现类似于百度.高德地图那样加载简体的模型,使用mapbox gl是一个比较好的解决方案. https://docs.mapbox.com/mapbox-gl-js/api/ 类似 ...
- Mapbox GL JS 地图英文转中文的解决办法
Mapbox GL JS地图框架的使用者已经越来越多了.不仅仅是因为它支持矢量瓦片,它里面内置了一些非常精美的地图,并且支持自定义搭配地图.对于个人开发者而言,一般都不具备自己搭建地图服务的硬件资源, ...
- GIS开发:mapbox gl几种底图的加载
mapbox gl除了加载客户端可控制样式的底图,也能够加载常规的影像底图. 这里指发布的影像或者矢量地图切片,在线经常使用的有天地图,谷歌地图.高德百度等,底图的加载,mapbox gl中,主要是修 ...
- Mapbox GL可视化之热力图
本篇使用Mapbox GL JS实现数据的热力图可视化,以截止到2020-03-01日的新冠疫情作为示例数据. 一 什么是热力图 热力图使用颜色的深浅表示数值的变化,从而表示数据的分布情况,这使得用户 ...
- 喜大普奔——Mapbox GL JS支持多种投影了
1. 写在前面 Mapbox GL JS 在v2.6.0之前不支持投影,默认地图是Mercator投影方式,如果项目中使用其他类型的投影(比如加载经纬度直投4326的地图切片),必须通过修改源码的方式 ...
最新文章
- 在ASP.NET Web API中使用OData的Action和Function
- 非常棒的jQuery排版用插件
- 数字图像处理之边缘检测,图像分割
- [USACO1.5]回文质数 Prime Palindromes
- 五种方法提高你的智力
- php上传文件损坏,PHP 上传文件故障排除
- mysql8安装目录linux7.5_Linux系统下 MySQL 5.7和8.0 版本安装指南
- Hibernate之Criteria查询
- [vb]利用WScript.Shell对象隐藏cmd命令行运行
- 移动手机病毒的进化历程
- 【Lazada新手开店】Lazada开店费用有哪些?
- 【Network篇<Day02>】——华为模拟器eNSP、交换机命令、路由器命令
- 基于Unity引擎的RPG3D项目开发笔录
- ai形状生成工具机器人_一名大学生使用一种语言生成AI工具来创建病毒博客文章...
- Kotlin相关博客资源
- 留学Paper写作中的门道怎么讲解?
- Linux Shred命令
- 【Python】(2022.07.03)在Jupyter Notebook中调用Stata17并绘制3D图展示回归结果的边际效应
- Romberg算法(Matlab实现)
- 九点手眼标定的原理及方法,视觉引导必知必会。