024: Mapbox GL が画像ファイルを読み込みます

No.024

クリックして列ディレクトリを表示

この例の目的は、vue+mapbox でイメージ イメージ ファイルをロードする方法を紹介し、デモンストレーションすることです。画像ソース。「url」値には画像の場所が含まれます。'coordinates' 配列には、左上、右上、右下、左下の時計回りの順序でリストされた [経度、緯度] の画像コーナーのペアが含まれています。

以下の 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、Gaode、google、bing、OSM、stamen、maptiler、Tiantu、mapbox など。
(2) 提供します。マップ コントロールの表示例: 縮尺、イーグル アイ、カスタム著作権、マップの回転、ズーム マップ、ズーム スライダー、全画面表示など (3) さまざまなデータの読み込み例を提供: geojson、JSON、KML、WKT、WMTS、
SHP 、WKB、GPX、CSV、MVT、ジオサーバー データなど
(4) アップロード分析とエクスポートの例を提供します。KML、KMZ、Geojson、shp、zip などをアップロードし、画像、pdf、geojson、GML、ポリラインなどをエクスポートします
。 . さまざまな図形の描画例: 点、線、円、多角形、四角形、四角形、六つ星、自由線分、自由多角形などを描く。
(6) ルート軌道に関連する例を提供する: 矢印で線分を描く、軌道アニメーションを実現する、きらめく点線を描く、高速で移動する風場の効果を実現するなど。
(7) マップ操作イベントの例を提供します: draw、modify、snap、select、pointermove、click、dblclick、singleclick、postrender (
8) 基本的なページ コントロールの例を提供します: ズーム コントロール、範囲コントロール、機能の適応、およびグリッドの追加 Line 、ドラッグして
ズームイン、ドラッグして回転など。
(10) 包括的なアプリケーション関連コードの提供: マップの切り替え、データの集約、リスト レイヤーの双方向インタラクティブ表示、フロア情報の表示、右クリック メニュー、GPS ポジショニング、ローリング シャッター効果など。