024：Mapbox GL加载image图像文件

第024个

点击查看专栏目录

本示例的目的是介绍演示如何在vue+mapbox中加载image图像文件。图像源。 “url”值包含图像位置。“坐标”数组包含按顺时针顺序列出的图像角的 [longitude, latitude] 对：左上角、右上角、右下角、左下角。

直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果

示例效果

配置方式

1）查看基础设置：https://xiaozhuanlan.com/topic/9327810546
或者同样查看：https://dajianshi.blog.csdn.net/article/details/130108713
2）将上述的源代码，粘贴到src/views/Home.vue中，npm run serve 运行即可。

示例源代码（共87行）

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @First published in xiaozhuanlan.com
* @Second published in CSDN
* @First published time: 2023-04-23
*/
<template>
	<div class="container">
		<h3>vue+mapbox：加载image图像文件</h3>
		<p>大剑师兰特, 还是大剑师兰特</p>
		<h4>
			<el-button type="primary" size="mini" @click="addImage()">加载图像</el-button>
		</h4>
		<div id="vue-mapbox"></div>
	</div>
</template>

<script>
	import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');"
	import 'mapbox-gl/dist/mapbox-gl.css';
	import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
	export default {
    
    
		name: 'mapboxMap',
		data() {
    
    
			return {
    
    
				map: null,
			}
		},
		mounted() {
    
    
			this.initMap();
		},
		methods: {
    
    
			addImage() {
    
    
				this.map.addSource('myImage', {
    
    
					'type': 'image',
					'url': '/data/icon.png',
					'coordinates': [
					[-101, 32],
					[-100, 32],
					[-100, 31],
					[-101, 31]
					]
				});

				this.map.addLayer({
    
    
						'id': 'image11',
						'type': 'raster',
						'source': 'myImage',
					},
				);


			},

			initMap() {
    
    
				mapboxgl.accessToken = this.$root.mapboxToken; //自己的token
				this.map = new mapboxgl.Map({
    
    
					container: 'vue-mapbox', // container ID
					style: 'mapbox://styles/mapbox/streets-v12', // style URL
					center: [-100, 32], // starting position [lng, lat]
					zoom: 5, // starting zoom
					attributionControl: false, //停用             
				});

			}
		}
	}
</script>
<style>
	.container {
    
    
		width: 840px;
		height: 600px;
		margin: 50px auto;
		border: 1px solid #42B983;
		position: relative;
	}

	#vue-mapbox {
    
    
		width: 800px;
		height: 430px;
		margin: 0 auto;
		border: 1px solid #42B983;
		position: relative;
	}
</style>

相关API参考：

https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#image

专栏目标

在vue和mapbox联合技术栈的操控下，本专栏提供行之有效的源代码示例。专栏在不断增加，目前设定目标是做出如下的示例
（1）提供各种地图的加载示例：baidu、高德、google，bing，OSM，stamen,maptiler,天地图，mapbox等
（2）提供地图控件的展示示例：比例尺、鹰眼、自定义版权、旋转地图、缩放地图、缩放滑块、全屏显示等
（3）提供各种数据的加载示例：geojson、JSON、KML、WKT、WMTS、SHP、WKB、GPX、CSV、MVT、geoserver数据等
（4）提供上传解析和导出示例：上传KML、KMZ、Geojson、shp、zip等，导出Image、pdf、geojson、GML、polyline等
（5）提供各种图形的绘画示例：画点、线、圆、多边形、正方形、矩形、六星芒、自由线段、自由多边形等。
（6）提供路线轨迹相关的示例：画带有箭头的线段、实现轨迹路线动画、画闪闪发光的点划线、实现风场快速移动效果等。
（7）提供地图交互事件的示例：draw、modify、snap、select、pointermove、click、dblclick、singleclick、postrender
（8）提供页面基本控制的示例：zoom控制、extent控制、feature适配、添加网格线、拖拽放大，拖拽旋转等
（9）提供测量相关的代码示例：测量面积、测量距离、显示当前zoom、显示某点经纬度等。
（10）提供综合应用相关代码：切换地图、聚合数据、列表图层双向交互显示、显示楼层信息、右键菜单、GPS定位、卷帘效果等。