mapbox-gl开发教程（十）：创建marker

–mapbox-gl是一个开源、基于webgl技术的前端地图类库–
mapbox-gl提供了两种在地图上创建点数据的方式，一种是上一章讲的符号图层（symbol），另一种是本章讲的marker，这两种方式有各自的适用场景。
符号图层（symbol）是以webgl的形式进行创建加载，数据源是geojson或矢量切片，适合大规模的数据加载，同时数据显示的样式不能过于复杂；
marker是以html dom元素的形式进行创建加载，数据源是坐标点，加载的数据量不能太多，要不然会出现卡顿，不过，数据样式很丰富，完全根据html中排版和css样式进行设计。
地图上创建一个基础的marker：

实现代码：

var marker = new mapboxgl.Marker()
.setLngLat([30.5, 50.5])
.addTo(map);

通过设置marker的element属性，可以设置自定义的html元素，从页面文档中选取，或者通过createElement进行元素创建：

var el = document.createElement('div');
el.className = 'marker';

开发时，过浏览的开发调试，可以发现在页面上加载了一个html元素，在地图移动时，通过css中的translate rotate等变换参数进行变化，达到跟随地图相应的坐标点。

marker的关键属性说明：
options.anchor：锚点位置，marker整个dom和地图上坐标点对齐的方式；
options.draggable：是否可以拖拽，设置为true时，marker能够随着鼠标在地图上拖拽移动；
options.offset：marker和地图上坐标点的像素偏移量；

marker的api说明：
https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker

mapbox-gl开发是讲述如何从基础到实际应用进行地图开发的教程，不定时进行持续进行更新，如有疑问，公众号留言进行讨论。
mapbox-gl官网地址：
https://docs.mapbox.com/mapbox-gl-js/guides/

mapbox-gl开发教程（十）：创建marker相关推荐

iOS 9应用开发教程之创建iOS 9项目与模拟器介绍
iOS 9应用开发教程之创建iOS 9项目与模拟器介绍编写第一个iOS 9应用本节将以一个iOS 9应用程序为例,为开发者讲解如何使用Xcode 7.0去创建项目,以及iOS模拟器的一些功能.编辑 ...
Wear OS手表应用开发教程之-创建应用
本文目录点击直达 Wear OS手表应用开发系列教程点击直达本文标签 `路过的年轻人啊,你是要用左手点个赞呢,还是要右手点个关注呢` 前言: Android Studio自动创建: 创建应用: ...
Abp vnext Web应用程序开发教程 1 —— 创建服务器端
文章目录关于本教程下载源代码创建解决方案创建书籍实体 BookType枚举将图书实体添加到DbContext 将图书实体映射到数据库表添加数据库迁移添加样本种子数据更新数据库创建应用 ...
Abp vnext Web应用程序开发教程 3 —— 创建、更新和删除书籍
文章目录关于本教程下载源代码创建新书创建模态表单添加"新书"按钮更新书 EditModal.cshtml.cs 从BookDto映射到CreateUpdateBookD ...
Luat 功能开发教程(十六) LittleVGL
目录 LittleVGL 简介控件API说明实现流程示例 image控件 Canvas控件 button控件 Arc控件(加载器) page控件 label控件 Slider控件 switch控 ...
Luat 功能开发教程(十八) 阿里云
目录阿里云简介 API说明实现流程示例阿里云操作产品操作设备操作其他说明 LUAT方式连接概述一机一密LUAT方式连接一型一密LUAT方式连接发布消息订阅消息 OTA升级常见 ...
Odoo 8.0深入浅出开发教程(十) 附录
13 附录 13.1 Odoo里老的API _name 点号记法对应具体SQL表名 _columns { } 表述SQL表头 _defaults 字典值描述默认值 _inherit _inheri ...
[实例开发教程] Unity3D 创建迷你地图中文教程附源码
打开你的 Unity project: 1.选择 GameObject -> Create Other -> Camera, 重命名为你想要的 2.选择 Assets -> Crea ...
jQuery MiniUI 开发教程 TreeGrid 创建TreeGrid（一）
[b]TreeGrid[/b] [img]http://www.miniui.com/docs/api/images/treegrid.gif[/img] 参考示例: [url=http://www. ...
DuiVision开发教程(1)-创建DuiVision工程
DuiVision的源代码工程有两种类型:主程序和插件工程,可以通过人工方式创建DuiVision工程,也可以通过Visual Studio向导自动创建工程. 人工创建主程序的方法 1.创建一个基于D ...

mapbox-gl开发教程（十）：创建marker

mapbox-gl开发教程（十）：创建marker相关推荐

最新文章

热门文章