uniapp+arcgis系列（二）: 在外部調用arcgis api，地圖加載完成事件

---

github地址:點擊此處跳轉

uniapp-arcgis系列目錄：

uniapp+arcgis系列（一）: uniapp引入ArcGis for JS 4.x，並加載地圖服務、顯示地圖，去除邊框、水印和縮放按鈕
uniapp+arcgis系列（二）: 在外部調用arcgis api，地圖加載完成事件
uniapp+arcgis系列（三）：邏輯層和視圖層RenderJS之間的相互通信
uniapp+arcgis系列（四）: 獲取wgs84坐標、獲取火星坐標GCJ-02以及當前位置信息的省市街道地址名稱、poi興趣點，點擊地圖畫點和軌跡

---

一、地圖加載完成事件

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>

控制台輸出：