uniapp引入arcgis for js

uniapp引入arcgis for js

​ 在前段时间，我刚开始接触uniapp，并接到了在uniapp项目中使用arcgis for js的任务。搜遍了所有的经验帖子也没有一个具体的方法步骤，只有几位大佬分享了可行的结果截图。所以今天写一个小白教程，如有错误，欢迎大家指出。

​ 首先在一个空项目中，引入esri-loader。

npm install--save esri-loader

​ 成功后，在页面中通过renderjs引入esri-loader，注意地图部分需要给出具体高度。

<template>
	<view >
		<view id="myMapView" style=" height: 623px " />
	</view>
</template>

<script module="myMapViews" lang="renderjs">
    //renderjs部分
	import {
		loadModules
	} from 'esri-loader'
	export default {
		name: 'myMapView',
		data() {
			return {};
		},
		mounted() {
			this.createMapView()
		},
		methods: {
			createMapView() {
				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"
				], options).then(([Map, MapView]) => {
					var map = new Map({
						basemap: "topo-vector"
					});
					var view = new MapView({
						container: "myMapView",
						map: map,
						center: [-118.80500, 34.02700], // longitude, latitude
						zoom: 13
					});
				})
			}
		}
	}
</script>


<scrip>
// service 层
</scrip>




<style>
</style>

效果图如下：

​ 同时，在renderjs的script中，是无法获取到service层的数据的，也无法使用uni的相关接口（注意：H5是可以正常使用的，但是APP端就会报错，比如uni.request等），所以要通过一定的方式从service层去传输。

​ 如果要进行网络请求目前有两种思路：

​ 1.自己写一个原生ajax请求，在renderjs部分使用。

​ 2.在service层给后台发请求后，将数据传回renderjs部分

    下面简单给出个renderjs和service层通讯例子：

<template>
	<view>
		<!-- service层mapdata改变就会调用renderjs部分的mapDataChanged方法 -->
		<view id="myMapView" :change:mapData="myMapViews.mapDataChanged" :mapData="mapData" style=" height: 500px " />
		<view>
			<uni-button @click="changeMapData">service点击</uni-button>
		</view>
	</view>

</template>

<script module="myMapViews" lang="renderjs">
	//renderjs部分
	import {
		loadModules
	} from 'esri-loader'
	export default {
		name: 'myMapView',
		data() {
			return {};
		},
		mounted() {
			this.createMapView()
		},
		methods: {
			createMapView() {
				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"
				], options).then(([Map, MapView]) => {
					var map = new Map({
						basemap: "topo-vector"
					});
					var view = new MapView({
						container: "myMapView",
						map: map,
						center: [-118.80500, 34.02700], // longitude, latitude
						zoom: 13
					});
				})
			},
			mapDataChanged(newValue, oldValue, ownerVm, vm) {
				//mapData改变触发
				console.log("newValue:", newValue)
				console.log("oldValue:", oldValue)
				//调用service层的getFromRenderJs方法，并传值
				ownerVm.callMethod('getFromRenderJs', {
					type: 'polyline'
				})
				//这种方法也可以主动调用service层方法
				/*UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
					cid: this._$id,
					method: 'loadingClose',
					args: {


					}
				})*/
			}
	
		}
	}

</script>

<script>
	//service层
	export default {
		data() {
			return {
				mapData: {}
			}
		},
		mounted() {},
		methods: {
			changeMapData() {
				//click事件触发的service层方法
				this.mapData = {
					type: 'point'
				}
			},
			getFromRenderJs(params) {
				//renderjs调用的service层方法
				console.log('getFromRenderJs:', params)
			}


		},
	
	}

</script>

<style>
</style>

结果如下：