uniapp+arcgis javascript 4.x api

UNIApp 集成ArcGIS JavaScript

由于arcgis js的库文件都比较大，uniapp使用@arcgis/core的方式没有走通，本文主要通过esriload加载本地部署部署的js库实现集成ArcGIS JavaScript

版本

Vue 2

ArcGIS JavaScript 4.22

注意 ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差异较大

环境搭建

部署api

从esri deverlopers官网下载api(需要申请账号，有时候还需要翻墙，很麻烦。小编把4.22,4.23.)

为了节省大家时间，小编已经帮各位大人下载，传送门

nginx.conf

server
        {
         listen 8082;
         server_name localhost;
         root /home/arcgisjs/arcgis_js_v422_api/;
         location / {
                #允许跨域请求的域，* 代表所有
                add_header 'Access-Control-Allow-Origin' *;
                #允许带上cookie请求
                add_header 'Access-Control-Allow-Credentials' 'true';
                #允许请求的方法，比如 GET/POST/PUT/DELETE
                add_header 'Access-Control-Allow-Methods' *;
                 #允许请求的header
                add_header 'Access-Control-Allow-Headers' *;
                index install.html;
                }
        }

注意跨域访问就行

新建uni项目

安装包

npm install --save esri-loader

可以直接配置package.json

{
  "dependencies": {
    "esri-loader": "^3.4.0"
  }
}

新建主页并配置

page.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "地图展示"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

index.vue

<template>
	<view class="container">

		<view class="map" id="map" />
		<view class="btn-draw"  @click="myMapViews.drawaPoint">
		</view>
	</view>
</template>


<!-- RenderJS视图层代码 -->
<script module="myMapViews" lang="renderjs" >
	import {
		loadModules
	} from 'esri-loader'
	export default {
		name: 'myMapView',
		data() {
			return {
				map: null,
				mapView: null,
				draw: null,
				drawaction: null,
				pointLayer: null,
			}
		},

		methods: {
			initMap() {
				let self = this;
				const options = {
					url: 'http://192.168.3.156:8082/arcgis_js_api/javascript/4.22/init.js',
					css: 'http://192.168.3.156:8082/arcgis_js_api/javascript/4.22/esri/themes/light/main.css'
				};
				loadModules([
						'esri/Map',
						'esri/views/MapView',
						'esri/layers/MapImageLayer',
						'esri/geometry/SpatialReference',
						"esri/views/draw/Draw",
						"esri/layers/GraphicsLayer",
						'esri/geometry/Extent',
						"esri/config"
					], options)
					.then(([Map, MapView, MapImageLayer, SpatialReference, Draw, GraphicsLayer, Extent, esriConfig]) => {
						esriConfig.fontsUrl = "http://192.168.3.156:8082/fonts/"
						const layer = new MapImageLayer({
							url: 'http://39.98.44.28:6080/arcgis/rest/services/xiangyangjichang/weijie20230309/MapServer'
						});

						self.map = new Map({
							layers: [layer]
						});
						self.mapView = new MapView({
							container: 'map', // Reference to the scene div created in step 5
							map: self.map, // Reference to the map object created before the scene
							spatialReference: new SpatialReference({
								wkid: 3857
							}),
							rotation: 41.2,
							constraints: {
								minScale: 600000000, // 视图最小比例尺
								maxScale: 1130, // 视图最大比例尺
								rotationEnabled: false // 去掉鼠标右键旋转
							}
						});
						self.mapView.extent = self.extent = new Extent({
							xmin: 12103840.013011543,
							ymin: 4086439.3018860994,
							xmax: 12110502.944852674,
							ymax: 4090051.894284931,
							spatialReference: new SpatialReference({
								wkid: 3857
							})
						})
						self.mapView.ui._removeComponents(['zoom']) // 隐藏放大缩小按钮
						// 清楚默认的地图放大缩小的比例
						self.mapView.ui.remove('zoom')
						self.mapView.ui.remove('attribution')
						self.draw = new Draw({
							view: self.mapView
						})
						self.pointLayer = new GraphicsLayer({
							id: 'pointlayer'
						})
						self.map.layers.push(self.pointLayer)

					})
					.catch(err => {
						console.error(err);
					});
			},
		
			drawaPoint() {
				debugger
				let self = this
				const options = {
					url: 'http://192.168.3.156:8082/arcgis_js_api/javascript/4.22/init.js',
					css: 'http://192.168.3.156:8082/arcgis_js_api/javascript/4.22/esri/themes/light/main.css'
				};
				loadModules([
					"esri/Graphic",
					"esri/layers/GraphicsLayer",
					"esri/views/draw/Draw",
					"esri/config"
				],options).then(([Graphic, GraphicsLayer, Draw, esriConfig]) => {
					esriConfig.fontsUrl = "http://192.168.3.156:8082/fonts/"
					if (!self.pointLayer) {
						self.pointLayer = new GraphicsLayer({
							id: 'pointlayer'
						})
						self.map.layers.push(self.pointLayer)
					}
					if (!self.draw) {
						self.draw = new Draw({
							view: self.mapView
						})
					}

					self.drawaction = self.draw.create('point', {
						mode: 'click'
					})
					self.drawaction.on([
						'draw-complete'
					], function(event) {
						if (event.type === 'draw-complete') {
							const point = {
								type: 'point',
								x: event.coordinates[0],
								y: event.coordinates[1],
								spatialReference: self.mapView.spatialReference
							}
							const markerSymbol = {
								type: 'simple-marker',
								color: [255, 0, 0],
								outline: {
									color: [255, 255, 255],
									width: 2
								}
							}

							const inputPoint = new Graphic({
								geometry: point,
								symbol: markerSymbol
							})
							self.pointLayer.add(inputPoint)
							const textPoint = {
								type: 'point',
								x: event.coordinates[0],
								y: event.coordinates[1] + 20,
								spatialReference: self.mapView.spatialReference
							}
							const textSymbol = {
								type: 'text',
								color: 'rgb(235, 41, 75)',
								text: "这是一个点",
								font: {
									//这个属性一定要设置要不然会从sans-serif这个路径下查找文件
									family: 'Arial Unicode MS',
									weight: 'bold',
									size: '12px'
								}
							}
							const textInfo = new Graphic({
								geometry: textPoint,
								symbol: textSymbol
							})
							self.pointLayer.add(textInfo)

						}
					})


				})
			}
		},
		mounted() {
			this.initMap()
		}

	}
</script>

<style>
	.container {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	/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;
	}

	.map {
		width: 100%;
		height: 100%;
		background-color: rgb(34 50 74);
	}

	.btn-draw {
		position: absolute;
		width: 40px;
		height: 40px;
		right: 20px;
		bottom: 20px;
		background-color: red;
		cursor: pointer;
	}
</style>