当前位置：首页 > news >正文

ArcGIS for js 4.x 加载图层

news 来源：原创 2024/9/20 8:00:34

二维：

1、创建vue项目

npm create vite@latest

2、安装ArcGIS JS API依赖包

npm install @arcgis/core

3、引入ArcGIS API for JavaScript模块

<script setup>
import "@arcgis/core/assets/esri/themes/light/main.css";
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';
import TileLayer from '@arcgis/core/layers/TileLayer.js'
import WebTileLayer from '@arcgis/core/layers/WebTileLayer.js'
import Locate from "@arcgis/core/widgets/Locate.js";
import Compass from "@arcgis/core/widgets/Compass.js";
import ScaleBar from "@/pages/demo9/scaleBar.js"
import { onMounted } from "vue";***
***
</script>

4、创建vue组件

<template><view id="mapView"></view></template>

5、创建一个初始化函数initArcGisMap()用于创建Map实例和MapView实例

	
<script setup>***
***onMounted(()=>{//initMap();initTDTMap();
});// geo地图加载
const initMap = () =>{const map = new Map({basemap:{baseLayers:[new TileLayer({url:"http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer"})]	}});const mapView = new MapView({// 长春坐标系center:[125.331345,43.8328],// 初始层级zoom:10,container:"mapView",map:map,constraints: {minZoom: 10,// 最小层级maxZoom: 19 // 最大层级}});}// 天地图加载
const initTDTMap = () =>{let webLayer = new WebTileLayer({urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=352d4b1313777a8643542046a28d17e5",subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']});const map = new Map({basemap:{baseLayers:[webLayer]}});const mapView = new MapView({// 默认中心点位center: [125.338, 43.882],map: map,// 初始层级zoom: 10,container: "mapView",constraints: {minZoom: 9,// 最小层级maxZoom: 17// 最大层级},});let compass = new Compass({view: mapView});let locateWidget = new Locate({view: mapView, // Attaches the Locate button to the view});// 移动默认的放大缩小按钮mapView.ui.move("zoom", "bottom-right");// 恢复方向和定位按钮mapView.ui.add([compass, locateWidget], "bottom-left");// 恢复方向和定位按钮位置mapView.ui.padding = {top:0,left:0,right:10,bottom:60}	// 清除底部powered by ESRImapView.ui.remove("attribution");// 比例尺方法调用ScaleBar(mapView);
}</script><style lang="scss" scoped>#mapView{width: 100%;height:100vh;}</style>

比例尺设置（scaleBar.js文件）：

import ScaleBar from "@arcgis/core/widgets/ScaleBar";
// 比例尺
const scale = ((mapView) =>{let scaleBar = new ScaleBar({view:mapView});// Add widget to the bottom left corner of the viewmapView.ui.add(scaleBar, {position: "bottom-left"});});export default scale;

三维：

创建一个初始化函数initArcGisMap()用于创建Map实例和SceneView实例(三维场景)

注意：三维和二维引入的东西不一样

<template><view id="sceneView"></view>
</template><script setup>
import "@arcgis/core/assets/esri/themes/light/main.css";
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';
import SceneView from '@arcgis/core/views/SceneView.js';
import { onMounted } from "vue";onMounted(()=>{initArcGisMap();})const initArcGisMap = () => {const map = new Map({basemap:"topo-vector"});const sceneView = new SceneView({center: [-118.80500, 34.02700],zoom: 4,container: "sceneView",map: map});sceneView.ui.components = []}</script><style lang="scss" scoped>#sceneView{width: 100%;height: 100vh;}</style>