uniapp+arcgis系列（一）: uniapp引入ArcGis for JS 4.x，并加载地图服务、显示地图，去除边框、水印和缩放按钮

---

github地址:点击此处跳转

uniapp-arcgis系列目录：

uniapp+arcgis系列（一）: uniapp引入ArcGis for JS 4.x，并加载地图服务、显示地图，去除边框、水印和缩放按钮
uniapp+arcgis系列（二）: 在外部调用arcgis api，地图加载完成事件
uniapp+arcgis系列（三）：逻辑层和视图层RenderJS之间的相互通信
uniapp+arcgis系列（四）: 获取wgs84坐标、获取火星坐标GCJ-02以及当前位置信息的省市街道地址名称、poi兴趣点，点击地图画点和轨迹

---

背景

之前在做uniapp加载arcgis地图服务，很难搜到需要的资料，也找不到做过这个的大佬请教，头都大了。

感觉网上关于arcgis的资料太太太少了，能补充一点是一点吧。

本系列实现的功能大致概括为：uniapp实时获取用户位置，并实时显示在arcgis地图上。

一、uniapp 引入 Arcgis api

ArcGIS API for JavaScript 4.22 api文档地址

使用命令cnpm install esri-loader -S

用npm也是可以的，cnpm是中国版的npm。

二、uniapp 加载arcgis地图服务

需要在视图层RenderJS中加载地图

(RenderJS到底是什么我也不清楚，但是我们需要它来渲染地图）

重点：逻辑层和视图层的的变量方法，不可以直接调来调去，需要通过特定的方式进行通信。

代码：

<template>
	<view>
		<template>
			<view style="width: 400px;height: 800px;" 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() {
				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, // 缩放比例 值越大图越大
					});

					this.myMapObject.map = map;
				})
			},
		},
		mounted() {
			// 页面初始化完成后
			this.createMapView();
		},
	}
</script>

<style>
</style>

效果图：

二、不显示缩放按钮、地图边框和水印

可以看到这里缩放按钮、水印，边框是点击地图的时候会出现，不太好截图。

不显示这些内容，可以在style中进行配置：

<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>

效果图：