vue中使用mapboxGL，并添加marker

布满荆棘的人生 2024-04-17 20:17 21阅读 0赞

1、 **npm install mapbox-gl --save**  
2、以组件形式引入

<template>
      <div>
        <div ref="basicMapbox" style="height:100%;width:100%;"></div>
      </div>
    </template>

<script>
    import mapboxgl from 'mapbox-gl' // 引入mapboxgl
    export default { 
    	data () { 
    		return { 
    			map: null,
    			positionLocation:  [117, 36]
    		}
    	},
    	mounted () { 
    		this.init()
    	},
    	methods: { 
    		init () { 
    			mapboxgl.accessToken = '******' // 地图秘钥，自行获取 https://docs.mapbox.com/mapbox-gl-js/api/
    	      	this.map = new mapboxgl.Map({ 
    	        	container: this.$refs.basicMapbox, // 获取当前dom元素
    		        style: { 
    		          version: 8,
    		          name: 'Mapbox Streets',
    		          sprite: 'http://60.191.72.104:11009/mapbox/images/iocMapIocn',
    		          glyphs: 'http://60.191.72.104:11009/mapbox/font/{fontstack}/{range}.pbf',
    		          sources: { 
    		            'osm-tiles': { 
    		              type: 'raster',
    		              tiles: [
    		                'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
    		              ],
    		              tileSize: 256
    		            }
    		          },
    		          layers: [
    		            { 
    		              id: 'simple-tiles',
    		              type: 'raster',
    		              source: 'osm-tiles',
    		              minzoom: 0,
    		              maxzoom: 16
    		            }
    		          ]
    		        },
    		        // style: 'http://60.191.72.104:11009/mapbox/images/style1.json',
    		        center: [116.67014887634832, 34.63229347905002],
    		        zoom: 12,
    		        bearing: 0,
    		        pitch: 45
    		      })
    	      	this.map.on('load', () => {  // 地图加载完毕显示相应配置（地图打点、addLayer等等）
    	       	 	this.loadData()
    	      	})
    		}
    	},
    	loadData () { 
    		const el1 = document.createElement('div')
    		el1.className = 'marker'
    		el1.style.backgroundImage = `url(http://60.191.72.104:11009/mapbox/images/iocMapIocn.png)`
    		el1.style.backgroundPosition = '-42px -26px'
    		el1.style.width = '42px'
    		el1.style.height = '90px'
    		// 地图上设置图片
    		this.endMarker = new mapboxgl.Marker({ 
    			element: el1,
    			offset: [0, 13],
    			anchor: 'bottom'
    		}).setLngLat(this.positionLocation).addTo(this.map)
    	} 
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中使用mapboxGL，并添加marker

、 **npm install mapbox-gl --save** 2、以组件形式引入 <template> <div> <d...

布满荆棘的人生/ 2024年04月17日 20:17/ 0 赞/ 22 阅读

相关 105：vue+openlayers 引用组件来添加marker （示例代码）

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第105个 [点击查看专栏目录][Link 1]

╰半橙微兮°/ 2024年04月08日 12:16/ 0 赞/ 27 阅读

相关 leaflet添加多个marker方法1（一一添加）示例教程006

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第006个 [点击查看专栏目录][Link 1]

深藏阁楼爱情的钟/ 2024年04月07日 15:23/ 0 赞/ 69 阅读

相关 leaflet 设置marker，并可以任意拖动每一个marker（071）

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第071个 [点击查看专栏目录][Link 1]

一时失言乱红尘/ 2024年03月27日 17:49/ 0 赞/ 39 阅读

相关 013：Mapbox GL添加marker

![在这里插入图片描述][bf6d528f641048c2924d88e7dc1e25f4.png_pic_center] 第013个 [点击查看专栏目录][Link 1]

Love The Way You Lie/ 2024年03月23日 12:11/ 0 赞/ 18 阅读

相关 ROS中marker的mesh_resource的使用案例

在rviz中可以加载visualization\_msgs::MarkerArray类型，这其中可以加载mesh\_resource类型的marker，例子如下： v

叁歲伎倆/ 2022年12月17日 15:54/ 0 赞/ 15 阅读

相关 vue中引入公共方法并使用

1、在utils文件夹中新建utils.js / 通用js方法封装处理两种方式 Copyright (c) 2019 ruoyi

Myth丶恋晨/ 2022年12月10日 07:14/ 0 赞/ 319 阅读

相关 Vue中splice的使用：删除替换添加

解释 splice(index,len,\[item\])它也可以用来替换/删除/添加数组内某一个或者几个值（该方法会改变原始数组） index:数组开始下标 le

落日映苍穹つ/ 2022年11月22日 12:42/ 0 赞/ 170 阅读

相关 vue项目中使用mint-ui添加loading

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

灰太狼/ 2022年03月10日 15:54/ 0 赞/ 256 阅读

相关使用Webstorm建立vue.js工程并添加vuetify组件

.. ![813478-20190108141137843-532315571.png][] .. ![813478-20190108141203760-84786887

港控/mmm°/ 2022年01月06日 07:55/ 0 赞/ 158 阅读