當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

【一】ArcGIS API for JavaScript 4.x之地图显示

發布時間：2023/12/16 javascript 17 豆豆

生活随笔收集整理的這篇文章主要介紹了【一】ArcGIS API for JavaScript 4.x之地图显示小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

博客目錄

- 1、ArcGIS API for JavaScript 4簡介
- 2、API本地部署
- 3、二維地圖
- 4、三維地圖
- ArcGIS API for JavaScript 4版本的開發教程會陸續更新，感興趣的可以關注丫！

1、ArcGIS API for JavaScript 4簡介

當前ArcGIS API for JavaScript 4版本已更新到4.11，4版本最大的特點就是通過引入全新設計的 map 、view對象，開發者可以快速構建一個二維、三維模式（或者同時渲染）的Web應用程序。操作三維視圖與操作二維相類似，兩者共用了相同的 Layers、Geometry、Symbol、Navigation、 Renderers、Tasks、Pop-ups等。不同的是，在三維中新增了一部分特有的特性，例如環境environment與光照Lighting，鏡頭Camera等等。

本篇博客內容主要介紹API 的本地部署以及使用API實現地圖顯示。

2、API本地部署

本地部署的過程與3版本相同，這里可以參照3版本的部署過程【一】ArcGIS API for JavaScript之API的使用和部署

此外，在測試時會遇到微件圖標顯示的問題，可以參照ArcGIS API For JavaScript4.x本地部署微件圖標顯示問題的解決方案

當然，除了本地部署的方式，我們也可以使用ArcGIS托管于CDN的方式來引用：

3、二維地圖

我們以加載OSM地圖為例，下圖為青島市二維地圖的顯示效果：

Map
在實例化Map時，常用到兩個屬性：basemap和ground
basemap用來指定地圖的底圖，即一組切片圖層；其屬性值可以是Basemap的實例，也可以是官方列出的服務鏈接。

ground用來指定地圖的曲面屬性，只有當地圖添加到 SceneView時，此屬性才有意義。它使用ElevationLayer的集合渲染地圖表面上現實世界中的地形或地形變化。
此值可以是Ground的實例，也可以是以下字符串之一：

world-elevation 對于使用Terrain3D服務的默認地面實例

world-topobathymetry 對于使用TopoBathy3D服務結合表面高程和水深測量的地面實例

MapView
用于渲染二維地圖，實例化時需要定義map和container，map為地圖對象，container為對應的DOM元素ID
MapView還處理用戶和地圖之間的交互：設置比例尺、視圖范圍等。

//設置比例尺 view.scale = 24000; //設置地圖視圖中心位置和縮放級別 view.center = [-112, 38]; view.zoom = 13; //設置地圖初始化顯示范圍 view.extent = new Extent({xmin: -9177882,ymin: 4246761,xmax: -9176720,ymax: 4247967,spatialReference: {wkid: 102100} });

.when() 可以調用MapView實例上的方法來執行只能在加載地圖后運行的進程：

view.when(function(){// 所有資源都已加載完成 }, function(error){// 為正確加載console.log("The view's resources failed to load: ", error); });

下面是完整代碼：

<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>二維地圖</title><link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/4.11/esri/css/main.css"/><style>html,body,#viewDiv{width:100%;height:100%;padding:0;margin:0}</style> </head> <body> <div id="viewDiv"></div> <script type="text/javascript" src="http://localhost/arcgis_js_api/library/4.11/init.js"></script> <script>require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {var map = new Map({basemap: "osm"});var view = new MapView({container: "viewDiv",map: map,center:[120.36, 36.1],zoom:12});}); </script> </body> </html>

4、三維地圖

同樣以加載OSM地圖為例，下圖為青島市三維地圖的顯示效果：

SceneView
SceneView 使用WebGL顯示Map或WebScene實例的三維視圖，實例化時需要定義map和container，map為地圖對象，container為對應的DOM元素ID。
此外，Camera屬性可以用來指定SceneView的可見部分（或透視圖）的觀察點，包括當前視圖的高程，傾斜tilt和朝向heading（以度為單位）

camera: {position: [-122, // 經度38, // 緯度50000 // 高程（米）],heading: 95,tilt: 65 }

environment可以設置顯示環境的各種屬性，如背景顏色、天空、星星、大氣層、光照時間等：

environment: {background: {type: "color",color: [255, 252, 244, 1]},starsEnabled: false, //不啟用星星可視化atmosphereEnabled: false //不啟用大氣可視化 }

下面是三維地圖的完整代碼：

<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>三維地圖</title><link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/4.11/esri/css/main.css"/><style>html,body,#viewDiv{width:100%;height:100%;padding:0;margin:0}</style> </head> <body> <div id="viewDiv"></div> <script type="text/javascript" src="http://localhost/arcgis_js_api/library/4.11/init.js"></script> <script>require(["esri/Map", "esri/views/SceneView"], function(Map, SceneView) {var map = new Map({basemap: "osm",ground: "world-elevation"});var view = new SceneView({container: "viewDiv",map: map,camera:{ //設置鏡頭參數position: {x: 120.36,y: 35.9,z: 15000},tilt: 50},zoom:9});}); </script> </body> </html>

ArcGIS API for JavaScript 4版本的開發教程會陸續更新，感興趣的可以關注丫！

總結

以上是生活随笔為你收集整理的【一】ArcGIS API for JavaScript 4.x之地图显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：笔试题集锦
下一篇： JavaScript中的symbol对象