mapbox js创建一个简单的demo

最新推荐文章于 2024-06-26 09:41:56 发布
最新推荐文章于 2024-06-26 09:41:56 发布
阅读量4.6k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houdabiao/article/details/78011146
版权

注意定位坐标的图片marker是自己下载的

geojson.features..foreach()是操作数据的方法,

popup点击显示弹窗的事件

<!DOCTYPE html>

<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }


      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
.marker {
 background-image: url('mapbox-icon.png');
 background-size: cover;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 cursor: pointer;
}
.mapboxgl-popup {
 max-width: 200px;
}


.mapboxgl-popup-content {
 text-align: center;
 font-family: 'Open Sans', sans-serif;
}
    </style>
</head>
<body>


<div id='map'></div>


<script>
var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-77.032, 38.913]
    },
    properties: {
      title: 'Mapbox',
      description: 'Washington, D.C.'
    }
  },
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-122.414, 37.776]
    },
    properties: {
      title: 'Mapbox',
      description: 'San Francisco, California'
    }
  }]
};
mapboxgl.accessToken = 'pk.eyJ1IjoiaG91YmlhbyIsImEiOiJjajdnNjVicDYxNHAzMndvMmI4NGgzaTZrIn0.ZvpHO1bVunIhgsBq_nVYFQ';


var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [-96, 37.8],
  zoom: 3
});
// add markers to map
geojson.features.forEach(function(marker) {


  // create a HTML element for each feature
  var el = document.createElement('div');
  el.className = 'marker';


  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);
 new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
  .setLngLat(marker.geometry.coordinates)
  .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
  .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
  .addTo(map);
});


// code from the next step will go here!
</script>
</body>

</html>

样式规范中的Layers。
发布会文章介绍mapbox的强大
http://www.pingwest.com/demo/mapbox/


官方文档的----中文版本(来自微信公众号)
https://www.mapbox.cn/mapbox-gl-js/api/
基本api的使用情况



彪哥的文章
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Mapbox GL在Vue项目中的应用（综合demo）
tigerhhzz的博客
05-30 1923
MapboxGL是一个强大的JavaScript库，用于创建交互式和可自定义的地图。它基于WebGL构建，能够在浏览器中高效地渲染矢量地图。地图样式：Mapbox GL支持自定义地图样式，允许您设计和定制地图的外观。您可以定义地图的图层、样式、颜色和标签，以创建独特的视觉效果。交互性：使用Mapbox GL，您可以轻松地为地图添加交互性。您可以添加标记、弹出窗口、工具提示和交互式控件，使用户可以与地图及其要素进行交互。
一、mapbox搭载vue3测试demo（1-10）
Bidding
08-08 1165
添加custom point、添加icon point、添加circle point、添加marker、添加line...
mapbox搭载vue3测试demo 总共20个具体案例
05-30
mapbox搭载vue3测试demo 总共20个具体案例 1、[行政边界查询地址](https://lbs.amap.com/demo/javascript-api/example/district-search/draw-district-boundaries) 2、[坐标拾取系统地址](http://api.map.baidu.com/lbsapi/getpoint/)
引领地图开发新潮流：Vue 3 Mapbox GL —— 打造您的下一代地理信息应用
最新发布
gitblog_00032的博客
06-26 416
引领地图开发新潮流：Vue 3 Mapbox GL —— 打造您的下一代地理信息应用 项目地址:https://gitcode.com/studiometa/vue-mapbox-gl 在当今快速发展的Web开发领域中，地图组件已成为众多应用程序不可或缺的一部分。不论是位置服务、路线规划还是数据分析，一张精准的地图总能带来直观的用户体验和深度的数据洞察。今天，我们向您隆重介绍一款极具潜力的开源项目...
Mapbox GL JS介绍及使用
weixin_45697971的博客
03-03 6116
Mapbox GL JS介绍及使用： Mapbox GL JS 是一个 JavaScript 库，它使用 WebGL，以 vector tiles 和 Mapbox styles 为来源，将它们渲染成互动式地图。 想要了解更多如何使用mapbox GL JS实现各个图层进行交互与基于mapbox的数据可视化，请参考mapbox web端开发文档http://www.mapbox.cn/mapbox-gl-js/api/和mapbox基本原理http://www.mapbox.cn/tutorials/glj
android mapbox地图新手基础 demo
09-07
Android世界地图，替代国内谷歌地图不可用，详情介绍可以在 http://blog.csdn.net/zhayunbiao/article/details/51072284#reply 查看
mapbox加载3dtiles倾斜摄影模型demo
07-06
总的来说，这个demo展示了如何利用现代Web技术（如Mapbox、deck.gl和3DTiles）来创建一个高性能、交互式的倾斜摄影模型展示应用。这样的技术方案对于城市规划、房地产、环境监测等领域都有广泛的应用价值。通过深入...
mapbox_3dbar_demo.rar
11-09
Mapbox GL是一个强大的地图渲染库，它提供了丰富的自定义选项，使用户能够创建交互式、高性能的地图。在本示例中，我们将探讨如何利用Mapbox GL实现地图上的3D柱状图效果，这将涉及到fill-extrusion功能，一种无需...
mapbox_polygon_demo.rar
03-31
总的来说，Mapbox Polygon Demo是一个很好的学习资源，可以帮助你掌握Mapbox GL JS的基本用法，以及如何在地图上创建和操作多边形。通过实践此项目，你可以提升自己的地图开发技能，实现更多复杂的地图应用。
vue结合mapbox的案例demo
05-30
在案例中，可能会有一个`MapComponent`用于封装Mapbox地图的创建和管理，使得地图作为一个独立的功能模块存在，方便在整个应用中复用。 2. **Mapbox GL JS集成**： Mapbox GL JS是Mapbox提供的JavaScript库，用于...
mapbox_three_3D_bubble_demo.rar
10-16
"mapbox_three_3D_bubble_demo"是一个实际的项目实例，它展示了如何将mapbox-gl和Three.js结合起来，创建一个3D气泡图。项目源代码包含了地图的初始化、3D气泡的生成、动画效果的实现以及3D元素与地图的同步。 总结...
MapboxDemo:使用 Mapbox 网络映射的演示页面
06-02
Leaflet.js 或 Mapbox.js 简单地图教程（CicLAvia:Pasadena Edition） 在本教程中，我们将使用示例地理数据（适用于即将于 5 月 31 日在帕萨迪纳举行的 ！）使用 Leaflet.js 构建一个简单的地图，并使用相同的数据使用 Mapbox.js 构建一个。 这将突出 Mapbox.js 如何构建在 Leaflet.js 之上的一些领域，并有一个会议讨论它们的用途或将这些工具用于不同目的。 评论和讨论将有助于进一步迭代本教程，以便为每个人阐明这些工具的用途/相似之处/不同之处。 地理数据（geojson 和 shapefile）是活动路线/枢纽/和地标的近似值（基于活动的 PDF 地图和路线指南），并按原样提供，供您查看、访问、复制、分发和以其他方式使用信息由您自行决定。 所需工具 ，需要运行您自己的地图。 克隆这个 repo（不要在 2
mapbox 地图使用
随风潜入夜，不白头
10-11 1517
中文版（各种例子、文档、style等） 国际版（注册、登录，创建属于自己的token、地图，token还可以绑定指定域名使用） 目前我的静态足迹图已经实现（以下两种都已实现，最后只差后台的数据CRUD，并将数据整理生成json文件） 1、参照实现足迹图： 2、个人实现足迹图： 后续会把部分代码带上 ...
mapbox-gl-js接入GeoJSON大文件的优化策略
liuchao120的专栏
11-22 747
mapbox-gl-js可以接受GeoJSON数据，在前端动态地绘制GeoJSON数据。需要说明的是，mapbox-gl-js并不能直接渲染GeoJSON数据，而是通过geojson-vt这个库，在前端动态地将GeoJSON数据转换为矢量瓦片后渲染。至于为什么不支持直接渲染GeoJSON数据，我猜想是因为mapbox-gl-js对于点、线、面、符号、注记等要素的绘制规则都是基于矢量瓦片的，为GeoJSON另外实现一套绘制规则，不仅增大了实现成本，而且两套规则可能会出现冲突。
五、mapbox搭载vue3测试demo（41-50）
Bidding
05-15 471
3D模型、 视频播放图层、 鼠标悬停效果、 高亮包含相似数据的部分、切换列表筛选符号...
Mapbox教程：一个简单Demo
pyluyuan的专栏
04-11 451
Mapbox 第一个Demo
Mapbox GL JS学习之路（一）：初识 Mapbox GL JS
孙悟空
07-18 3953
初识 Mapbox GL JS
地图引擎(WebGIS)之MapBox的基础使用
qq_44930306的博客
05-17 3824
addLayer可以单独使用，也可以结合addSource一起使用；BoxGeoJSON.vue代码：geojson加载-点击事件漫游。注意：这些只是基础使用，其他的属性和方法自行查找官网，慢慢研究。跟随鼠标操作可以放大缩小、俯仰角观看，左右摇摆式观看。地球自转本质：每间隔一段时间经度累加，通过。相当于地图中的山脉形状也清晰可见了。其实就是设置不同的setFog；
Mapbox GL JS介绍和简单使用
weixin_39676449的博客
02-01 3637
可以显示立体地图并且支持移动端，是一款十分优秀的WEB GIS开发框架。Mapbox GL JS 是Mapbox的一个开源客户端库，用于渲染 Web 端的可交互地图。作为 Mapbox 生态系统的一部分，它通常与 Mapbox 提供的其他服务集成在一起，统一对外使用。WebGL渲染意味着高性能，MapboxGL能够渲染大量的地图要素，拥有流畅的交互以及动画效果、可以显示立体地图并且支持移动端，是一款十分优秀的WEB GIS开发框架。
mapbox创建多个地图浏览器会将第一个地图对象销毁
05-17
如果您在使用 Mapbox 的 JavaScript API 创建多个地图浏览器时遇到第一个地图对象被销毁的问题，可能是因为您没有正确管理地图对象。在创建多个地图时，每个地图对象应该具有唯一的 ID，并且应该使用这些 ID 来管理它们。 例如，您可以使用以下代码创建两个地图对象： ```js const map1 = new mapboxgl.Map({ container: 'map1', style: 'mapbox://styles/mapbox/streets-v11', center: [0, 0], zoom: 1 }); const map2 = new mapboxgl.Map({ container: 'map2', style: 'mapbox://styles/mapbox/satellite-streets-v11', center: [0, 0], zoom: 1 }); ``` 在这个例子中，我们为每个地图对象指定了不同的容器 ID（'map1' 和 'map2'）。这样，每个地图对象都有自己独立的容器，并且可以被单独管理。 如果您需要在后续操作中访问这些地图对象，可以将它们存储在一个对象或数组中： ```js const maps = { map1: new mapboxgl.Map({ container: 'map1', style: 'mapbox://styles/mapbox/streets-v11', center: [0, 0], zoom: 1 }), map2: new mapboxgl.Map({ container: 'map2', style: 'mapbox://styles/mapbox/satellite-streets-v11', center: [0, 0], zoom: 1 }) }; ``` 现在，您可以使用 `maps.map1` 和 `maps.map2` 来分别访问这两个地图对象，并进行操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值