ArcGIS for Vue3 - 技术栈

二维：

1、创建vue项目

复制代码

npm create vite@latest

2、安装ArcGIS JS API依赖包

复制代码

npm install @arcgis/core

3、引入ArcGIS API for JavaScript模块

复制代码

<script setup>
import "@arcgis/core/assets/esri/themes/light/main.css";
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';
import TileLayer from '@arcgis/core/layers/TileLayer.js'
import WebTileLayer from '@arcgis/core/layers/WebTileLayer.js'
import Locate from "@arcgis/core/widgets/Locate.js";
import Compass from "@arcgis/core/widgets/Compass.js";
import { onMounted } from "vue";

***
***
</script>

4、创建vue组件

复制代码

<template>

	<view id="mapView"></view>
	
</template>

5、创建一个初始化函数initArcGisMap()用于创建Map实例和MapView实例

复制代码

<script setup>

***
***

onMounted(()=>{
	//initMap();
	initTDTMap();
});

// geo地图加载
const initMap = () =>{
	const map = new Map({
		basemap:{
			baseLayers:[
				new TileLayer({
					url:"http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer"
				})
			]	
		}
	});
	
	const mapView = new MapView({
		// 长春坐标系
		center:[125.331345,43.8328],
		// 初始层级
		zoom:10,
		container:"mapView",
		map:map,
		constraints: {
			minZoom: 10,// 最小层级
			maxZoom: 19 // 最大层级
		}
	});

}
	
// 天地图加载
const initTDTMap = () =>{
	
	let webLayer = new WebTileLayer({
		urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=352d4b1313777a8643542046a28d17e5",
		subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
	});
	
	
	const map = new Map({
		basemap:{
			baseLayers:[webLayer]
		}
	});
	
	 const mapView = new MapView({
		// 默认中心点位
		center: [125.338, 43.882],
		map: map,
		// 初始层级
		zoom: 10,
		container: "mapView",
		constraints: {
			minZoom: 9,// 最小层级
			maxZoom: 17// 最大层级
		},
	});
	
	let compass = new Compass({
			view: mapView
		});

	let locateWidget = new Locate({
		view: mapView, // Attaches the Locate button to the view
	});


	// 移动默认的放大缩小按钮
    mapView.ui.move("zoom", "bottom-right");

	mapView.ui.add([compass, locateWidget], "bottom-left");
	
	mapView.ui.padding = {top:0,left:0,right:10,bottom:60}	
}
	
</script>

<style lang="scss" scoped>

	#mapView{
		width: 100%;
		height:100vh;
	}
	
	

</style>

三维：

创建一个初始化函数initArcGisMap()用于创建Map实例和SceneView实例(三维场景)

注意：三维和二维引入的东西不一样

复制代码

<template>
	<view id="sceneView">
		
</view>
</template>

<script setup>
import "@arcgis/core/assets/esri/themes/light/main.css";
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';
import SceneView from '@arcgis/core/views/SceneView.js';
import { onMounted } from "vue";
	onMounted(()=>{
		initArcGisMap();
	})
	
	const initArcGisMap = () => {
		const map = new Map({
			basemap:"topo-vector"
		});
		
		const sceneView = new SceneView({
			 center: [-118.80500, 34.02700],
				zoom: 4,
				container: "sceneView",
				map: map
		});
		
		sceneView.ui.components = []
	
	}
	
</script>

<style lang="scss" scoped>
	#sceneView{
		width: 100%;
		height: 100vh;
	}

</style>