![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Mapbox
文章平均质量分 85
龙虾天天
未来看现在,是否无遗憾
展开
-
[Mapbox GL]添加一个视频
在顶端添加卫星栅格基础层 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken = '';var video翻译 2016-12-21 10:10:56 · 825 阅读 · 0 评论 -
[Mapbox GL]创建一个可拖拽的点
拖拽一个点到地图上的新位置然后显示它的坐标位置 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .coordinates { backgro翻译 2016-12-27 15:49:42 · 1793 阅读 · 1 评论 -
[Mapbox GL]测量距离
点击地图上的点来创建线条,使用turf.lineDistance测量距离 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .distance-con翻译 2016-12-27 10:52:12 · 5565 阅读 · 0 评论 -
[Mapbox GL]高亮有限区域特性
使用queryRenderedFeatures,按住shift并拖拽地图查询特性 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .boxdraw翻译 2016-12-27 09:48:00 · 2781 阅读 · 0 评论 -
Mapbox中style specification框架
Mapbox中最重要的两类style:sources和layers,前者可以认为是数据,后者可以认为是数据的显示形式,下图是Mapbox中style specification的思维导图原创 2016-12-19 18:15:30 · 2253 阅读 · 0 评论 -
[Mapbox GL]改变地图风格
body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } #menu { position: absolute; background: #fff; padding: 10px;翻译 2016-12-19 17:12:27 · 2675 阅读 · 0 评论 -
[Mapbox GL]显示/隐藏layer
创建一个通用的图层转换器显示不同的数据集 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } #menu { background:翻译 2016-12-19 17:25:28 · 6251 阅读 · 0 评论 -
[Mapbox GL]切换交互方式
使能或者去使能地图的UI处理器 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .listing-group { font:翻译 2016-12-26 18:23:03 · 1429 阅读 · 0 评论 -
[Mapbox GL]限制地图可以拖拽到的区域
通过设置maxBounds可以阻止地图拖拽到一个不同的地方。 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessTok翻译 2016-12-26 18:17:14 · 3886 阅读 · 0 评论 -
[Mapbox GL]高亮包含相似数据的特性
鼠标悬停在某个郡上面时,高亮使用相同郡名的其他郡 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .map-overlay { font: 12翻译 2016-12-27 23:38:33 · 1278 阅读 · 0 评论 -
[Mapbox GL]调整LineString使其适应地图边界
将LineString对象的第一个坐标传递给mapboxgl.LngLatBounds,然后连接extend包含最后一个坐标来获取它的边界 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; wid翻译 2016-12-28 11:01:04 · 3206 阅读 · 0 评论 -
[Mapbox GL]绘制GeoJSON数据点
从GeoJSON集合中获取数据然后在地图上绘制点 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken = '翻译 2016-12-20 17:10:55 · 13326 阅读 · 0 评论 -
[Mapbox GL]从一个GeoJSON资源添加多个几何图形
从相同的GeoJSON资源添加一个多边形和圆形layer,通过filter属性对数据进行过滤,不同的layer仅仅显示自己感兴趣的数据 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width翻译 2016-12-20 16:55:47 · 6005 阅读 · 0 评论 -
[Mapbox GL]添加GeoJSON多边形
使用fill类型的layer添加多边形 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken = '';va翻译 2016-12-20 11:24:10 · 5233 阅读 · 0 评论 -
[Mapbox GL]添加GeoJSON线
在地图上添加GeoJSON线 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } /* 用来放置map的div容器 */mapb翻译 2016-12-20 10:54:32 · 4962 阅读 · 0 评论 -
[Mapbox GL]在标签下方新增layer
使用addLayer函数的第二个参数可以更加精确的处理新增的layer。 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessT翻译 2016-12-20 10:47:23 · 4775 阅读 · 0 评论 -
[Mapbox GL]使用按钮修改layer的颜色
body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .map-overlay { font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; position:翻译 2016-12-20 10:25:46 · 4654 阅读 · 3 评论 -
[Mapbox GL]创建热点图
使用Mapbox GL JS将点数据聚类为热点图 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken =翻译 2016-12-20 10:12:35 · 1800 阅读 · 1 评论 -
[Mapbox GL]创建并设计clusters
使用Mapbox GL JS中内置函数来将点集合成簇 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken翻译 2016-12-19 18:25:16 · 1951 阅读 · 2 评论 -
[Mapbox GL]展示一张地图
展示一张地图 使用Mapbox GL JS在一个HTML元素中初始化一张地图。 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; }翻译 2016-12-19 16:55:07 · 2362 阅读 · 0 评论 -
[Mapbox GL]通过输入过滤标志
根据输入的图标名字过滤标志 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .filter-ctrl { posit翻译 2016-12-26 15:39:40 · 1078 阅读 · 0 评论 -
[Mapbox GL]使用3D展示建筑物
使用extrusion展示3D建筑物高度 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken = '';v翻译 2016-12-22 18:10:31 · 14386 阅读 · 2 评论 -
[Mapbox GL] 3D室内效果的多边形挤压面
使用fill-extrude-height绘画属性创建3D效果的室内地图 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.acce翻译 2016-12-22 17:43:36 · 2966 阅读 · 0 评论 -
[Mapbox GL]调整layer的透明度
通过拖拽范围条调整地图顶层的栅格layer透明度 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .map-overlay { font:bol翻译 2016-12-22 17:13:48 · 4231 阅读 · 0 评论 -
[Mapbox GL]根据缩放水平更新等值线图
根据2014年的人口普查数据,展示不同缩放水平下的国家或州的人口 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .legend { back翻译 2016-12-22 16:40:49 · 2317 阅读 · 0 评论 -
[Mapbox GL]实现一系列图片的动画效果
使用一些图片资源实现动画效果 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken = '';var map =翻译 2016-12-22 16:26:50 · 3926 阅读 · 0 评论 -
[Mapbox GL]点的动画效果
更新每帧的GeoJSON资源实现点的动画效果 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken = '';v翻译 2016-12-22 16:13:09 · 3334 阅读 · 0 评论 -
[Mapbox GL]使用键盘控制标记移动
使用键盘快捷键控制和旋转标记 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken = '';var map翻译 2016-12-21 15:06:58 · 1113 阅读 · 0 评论 -
[Mapbox GL]使用data-driven风格绘制圆形
使用分类的circle-color属性函数实现可视化 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken =翻译 2016-12-21 14:35:00 · 2379 阅读 · 0 评论 -
[Mapbox GL]添加第三方矢量瓦片资源
使用Mapzen提供的外部OpenStreetMap矢量资源数据渲染地图 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.acc翻译 2016-12-22 18:34:12 · 8820 阅读 · 0 评论 -
[Mapbox GL]添加实时数据
使用实时GeoJSON数据流移动地图上的标志 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken = ''翻译 2016-12-23 16:35:44 · 5524 阅读 · 0 评论 -
[Mapbox GL]地图视图内过滤特性
移动地图查询矢量瓦片层的可视化特性并且通过输入过滤 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } #map { position:abso翻译 2016-12-26 14:32:15 · 4376 阅读 · 0 评论 -
[Mapbox GL]通过切换列表过滤标志
基于数据中属性值过滤一组标志 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .filter-group { fon翻译 2016-12-26 13:54:57 · 1395 阅读 · 0 评论 -
[Mapbox GL]获取鼠标悬停位置的特性
使用queryRenderedFeatures API来显示地图元素上的鼠标悬停位置特性 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } #翻译 2016-12-26 11:25:23 · 2441 阅读 · 0 评论 -
[Mapbox GL]获取鼠标位置的坐标
展示鼠标悬停位置的像素和经纬度坐标 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } #info { display: blo翻译 2016-12-26 10:54:31 · 7152 阅读 · 0 评论 -
[Mapbox GL]创建悬停效果
使用queryRenderedFeatures和filter来改变悬停样式 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.ac翻译 2016-12-26 10:27:00 · 2543 阅读 · 0 评论 -
[Mapbox GL]点击标志改变地图视图中心
使用queryRenderedFeatures和flyTo使某个标志成为地图中心 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl翻译 2016-12-23 17:37:24 · 4506 阅读 · 0 评论 -
[Mapbox GL]改变地图语言
使用.setLayoutProperty来动态转化语言 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } #buttons {翻译 2016-12-23 17:12:42 · 4635 阅读 · 0 评论 -
[Mapbox GL]创建时间滑动条
拖拽范围滑动条将2015年发生的大于5.9震级的地震数据可视化 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .map-overlay {翻译 2016-12-23 16:44:13 · 1390 阅读 · 0 评论 -
[Mapbox GL]添加一张图片
带有雷达气象图overlay的黑色矢量baselayer body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken翻译 2016-12-20 17:50:18 · 3125 阅读 · 0 评论