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>
效果圖：
