uniapp+arcgis系列目錄：
uniapp+arcgis系列（一）: uniapp引入ArcGis for JS 4.x，並載入地圖服務、顯示地圖，去除邊框、水印和縮放按鈕

一、地圖載入完成事件

arcgis api for js 4.x的事件和3.x有所不同。

3.x的載入完成事件是繫結在map上的，4.x的事件是繫結在mapView上的,這裡的view就是我們定義的mapView噢。

像這樣：

					// 地圖載入完成事件
					view.when(function() {
						console.log("地圖載入完成了！");
					});
					

為了保證外部在呼叫地圖相關的方法和屬性時，地圖已經載入完畢，建議把createMapView寫成promise，在then()裡執行後續的操作。

程式碼放和下面的內容合併放出來

二、在外部呼叫arcgis api

系列一解釋瞭如何載入地圖和api，這是在renderJS的method的方法createMapView()中載入的，也就是隻能在createMapView()內部才能呼叫arcgis 的api。

當我們需要在createMapView()方法外部呼叫arcgis api的時候：

• 在render JS的data{return{}}裡定義全域性變數，myMapObject

• 在createMapView()中為這個物件定義方法 this.myMapObject.myMapMethod = function(){...}

• 外部呼叫的時候，this.myMapObject.myMapMethod()這樣呼叫就好了

注意： Render事Render畢，這裡只針對RenderJS內部，需要從邏輯層直接調RenderJS內部的方法，那是另外的價錢hhh

上程式碼：

<template>
	<view>
		<template>
			<view style="width: 350px;height: 600px;" id="myMapView" />
		</template>
	</view>
</template>

<!-- 邏輯層程式碼 -->
<script>
	export default {
		data() {
			return {}
		},
		methods: {}
	}
</script>

<!-- RenderJS檢視層程式碼 -->
<script module="myMapViews" lang="renderjs">
	import {
		loadModules
	} from 'esri-loader'
	export default {
		name: 'myMapView',
		data() {
			return {
				myMapObject: {}, // 物件，儲存關於地圖的圖層、方法、屬性等
			}
		},
		methods: {
			createMapView() {
				var this_ = this;
				return new Promise(function(resolve){
					const options = {
						url: 'https://js.arcgis.com/4.14/init.js',
						css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'
					};
					loadModules([
						"esri/Map",
						"esri/views/MapView",
						"esri/Basemap",
						"esri/layers/Layer",
						"esri/layers/TileLayer",
					], options).then(([Map, MapView, Basemap, Layer, TileLayer]) => {
					
						// 地圖的底圖
						var url =
							"http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer";
						var basemaplayer = new TileLayer({
							url: url,
							visible: true,
						});
					
						// 地圖物件
						var map = new Map({
							basemap: "", // 底圖置空
							layers: [basemaplayer], // 新增自定義的layer為底圖
						});
					
						// 建立一個mapView並繫結頁面元素
						var view = new MapView({
							container: "myMapView",
							map: map,
							zoom: 1, // 縮放比例 值越大圖越大
						});
						
						// 地圖載入完成事件
						view.when(function() {
							console.log("地圖載入完成了！");
							resolve();
						});
						
						// 定義myMapObject的方法供外部呼叫
						this_.myMapObject.methodForOutSide = function(val){
							console.log("methodForOutSide方法被呼叫了："+val);
						}
						
						this_.myMapObject.map = map;
					})
				})
			},
		},
		mounted() {
			// 頁面初始化完成後
			var this_ = this;
			this.createMapView().then(function(){
				console.log("載入地圖的promise執行結束了....")
				// 列印地圖物件
				console.log(this_.myMapObject.map);
				// 呼叫createMapView()內部的方法
				this_.myMapObject.methodForOutSide();
			});
		},
	}
</script>

<style>
	/deep/.esri-widget--button {
		display: none;
	}

	/deep/.esri-attribution__powered-by {
		display: none;
	}

	/deep/.esri-view .esri-view-surface--inset-outline:focus::after {
		outline: none;
	}
</style>
 

控制檯輸出：