使用ArcGis開發地圖
引用ArcGisJS
使用ArcGisJS開發地圖，首先需要引入ArcGis的Js文件和CSS文件，引入方式有兩種，一種是官網JS引用，一種是本地JS引用。如下：
官網JS引用
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.20/"></script>
<link rel="stylesheet" href="http://192.168.1.28:419/arcgis_js_api/javascript/4.19/esri/themes/light/main.css">
<script src="http://192.168.1.28:419/arcgis_js_api/javascript/4.19/init.js"></script>
require內置對象
require是ArcGisJS開發的起點，類似於C#中的引入命名空間的using，不同的是require引入的都是js文件，每個js文件都是一個大的js類。
require有兩個參數，第一個參數接收js文件地址，第二個參數輸出一個函數，函數的參數返回引入js文件的js類，類順序與上面引入js文件的順序的一致。
代碼如下：
<script>
require(["esri/config",
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/Layer"
], function (
esriConfig,
Map,
MapView,
Basemap,
Layer) {
//使用地圖對象
}
);
</script>
下面我們看一個ArcGisJS本地部署的網站下的esri文件夾的結構。
如圖所示，我們上面使用"esri/config"字符串引入的js文件就是esri文件夾下的config.js文件。
地圖開發
基礎開發
地圖開發主要是在require的輸出函數中做的，具體開發邏輯是使用Map類創建地圖，使用View類綁定div元素，然后將Map地圖對象賦值到View類中，實現地圖在div中展示。
Map類與View類各有兩個子類， WebMap，MapView對應二維地圖，SceneMap，SceneView對應三維地圖。
編寫代碼展示地圖
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebArcGis_JS4</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require(["esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/Basemap",
"esri/layers/Layer"
], function (
esriConfig,
Map,
MapView,
MapImageLayer,
Basemap,
Layer) {
esriConfig.apiKey = "YOUR_API_KEY";
let layer = new MapImageLayer({
url: "http://192.168.1.2:6080/arcgis/rest/services/SampleWorldCities/MapServer"
});
const map = new Map({
basemap: new Basemap({ baseLayers: [layer] }),
logo: false, //不顯示Esri的logo
});
const view = new MapView({
map: map,
center: [125.04658531829789, 41.978062677899004],
zoom: 13, // Zoom level
container: "viewDiv" // Div的Id
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
如上代碼所示，我們先定義了一個layer圖層，並指定地圖url（地址來自於ArcGisServer發布），然后定義了一個Map對象，將定義好的圖層定義為底圖（地圖有很多個圖層組成，最下面的圖層為底圖），Map對象初始化時接受basemap參數，其值為圖層對象，含義為設置底圖圖層。
然后定義個view對象，初始化接受兩個主要參數，一個是map，一個是container，map賦值我們上面定義的map對象，container指向一個div的id。
最后，我們再body中定義一個div取名viewDiv。
然后我們運行，界面如下：
監聽事件
基礎地圖使用編寫完后，我們編寫一個監聽事件，代碼如下：
//監聽單擊事件
view.on("click", function (event) {
console.log(event);
console.log("x:" + event.mapPoint.x);
console.log("y:" + event.mapPoint.y);
console.log("longitude:" + event.mapPoint.longitude);
console.log("latitude:" + event.mapPoint.latitude);
});
我們使用view對象的on函數，實現了一個點擊事件的監聽，界面效果如下：
監視屬性
ArcGis里除了監聽，還支持監視，下面我們使用watch函數監視scale（比例尺）屬性。
var handle = view.watch("scale", function (newValue, oldValue, propertyName, target) {
console.log(propertyName + " changed from " + oldValue + " to " + newValue);
});
小部件
ArcGis還提供豐富的小部件，比如比例尺，坐標，指南針等，我們只需要引入對應的js類，就可以使用這些小部件了。
小部件使用代碼如下：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebArcGis_JS4</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require(["esri/config",
"esri/Map",
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/Feature",
"esri/Graphic",
"esri/tasks/support/Query",
"esri/widgets/FeatureTable",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/layers/MapImageLayer",
"esri/layers/BaseDynamicLayer",
"esri/Basemap",
"esri/layers/TileLayer",
"esri/layers/ImageryLayer",
"esri/widgets/Home",
"esri/layers/support/Field",
"esri/geometry/Point",
"esri/widgets/LayerList",
"esri/widgets/Swipe",
"esri/widgets/AreaMeasurement2D",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/BasemapLayerList",
"esri/widgets/Bookmarks",
"esri/widgets/Expand",
"esri/widgets/Compass",
"esri/widgets/CoordinateConversion",
"esri/widgets/Fullscreen",
"esri/widgets/ScaleBar",
"esri/widgets/Print"
], function
(esriConfig,
Map,
WebMap,
MapView,
Feature,
Graphic,
Query,
FeatureTable,
FeatureLayer,
GraphicsLayer,
MapImageLayer,
BaseDynamicLayer,
Basemap,
TileLayer,
ImageryLayer,
Home,
Field,
Point,
LayerList,
Swipe,
AreaMeasurement2D,
DistanceMeasurement2D,
BasemapLayerList,
Bookmarks,
Expand,
Compass,
CoordinateConversion,
Fullscreen,
ScaleBar,
Print
) {
var baseUrl = "http://192.168.1.21:6080/arcgis/rest/services/SampleWorldCities/MapServer";
let layer = new MapImageLayer({
url: baseUrl
});
const map = new Map({
basemap: new Basemap({ baseLayers: [layer] }),
logo: false, //不顯示Esri的logo
});
const view = new MapView({
map: map,
center: [125.04658531829789, 41.978062677899004],
zoom: 3, // Zoom level
container: "viewDiv" // Div的Id
});
//==============坐標小部件
var ccWidget = new CoordinateConversion({
view: view
});
view.ui.add(ccWidget, "bottom-left");
//===============比例尺小部件
let scaleBar = new ScaleBar({
view: view,
style: "ruler"
});
view.ui.add(scaleBar, {
position: "bottom-left"
});
//===============指南針小部件
var compassWidget = new Compass({
view: view
});
view.ui.add(compassWidget, "bottom-right");
//===============圖層小部件
let basemapLayerList = new BasemapLayerList({
basemapTitle: "圖層列表",
view: view
});
var basemapLayerListExpand = new Expand({
view: view,
content: basemapLayerList,
expandTooltip: "圖層",
expanded: false
});
view.ui.add(basemapLayerListExpand, "top-left");
//===============主頁小部件
let homeWidget = new Home({
view: view
});
view.ui.add(homeWidget, "top-left");
//===============全屏小部件
fullscreen = new Fullscreen({
view: view
});
view.ui.add(fullscreen, "top-left");
//===============書簽小部件
const bookmarks = new Bookmarks({
view: view,
editingEnabled: true
});
const bkExpand = new Expand({
view: view,
content: bookmarks,
expandTooltip: "書簽",
expanded: false
});
view.ui.add(bkExpand, "top-left");
//===============測量小部件
let distanceWidget = new DistanceMeasurement2D({
view: view
});
var distanceExpand = new Expand({
view: view,
content: distanceWidget,
expandTooltip: "距離測量",
expanded: false
});
view.ui.add(distanceExpand, "top-left");
let areaWidget = new AreaMeasurement2D({
view: view
});
var areaExpand = new Expand({
view: view,
content: areaWidget,
expandTooltip: "面積測量",
expanded: false
});
view.ui.add(areaExpand, "top-left");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
效果圖如下：
屬性圖層
屬性圖層的類是FeatureLayer，FeatureLayer類有三個比較重要的屬性source（數據源），fields（圖層中可用字段），popupTemplate（點擊彈出模板）。
正確為這三個屬性賦值后，我們就可以實現在地圖上畫兩個圖形（這里畫圓點），並且點擊圖形彈出圖形的屬性。
代碼如下：
var baseUrl = "http://192.168.50.28:6080/arcgis/rest/services/SampleWorldCities/MapServer";
let layer = new MapImageLayer({
url: baseUrl
});
const map = new Map({
basemap: new Basemap({ baseLayers: [layer] }),
logo: false, //不顯示Esri的logo
});
let featuresSource = [
{
geometry: {
type: "point",
x: 61.94658531829789,
y: 41.978062677899004
},
attributes: {
ObjectID: 1,
Name: "Kiba",
MsgTime: Date.now(),
Msg: "Hello Kiba"
}
},
{
geometry: {
type: "point",
latitude: 41.04658531829789,
longitude: 60.978062677899004
},
attributes: {
ObjectID: 2,
Name: "Kiba518",
MsgTime: Date.now(),
Msg: "Hello Kiba518"
}
}
];
// 彈出框設置
const popupTemplate = {
"title": "數據信息",
"content": "<b>Id:</b> {ObjectID}<br><b>姓名:</b> {Name}<br><b>時間:</b> {MsgTime}<br><b>消息:</b> {Msg}"
}
let layer1 = new FeatureLayer({
source: featuresSource,
objectIdField: "ObjectID",//唯一標識字段
fields://定義圖層中可用字段 name字段名 alias別名 type類型
[{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
}, {
name: "Name",
alias: "Name",
type: "string"
},
{
name: "MsgTime",
alias: "MsgTime",
type: "date"
},
{
name: "Msg",
alias: "Msg",
type: "string"
}],
popupTemplate: popupTemplate
});
map.add(layer1);
const view = new MapView({
map: map,
center: [65.04658531829789, 41.978062677899004],
zoom: 13, // Zoom level
container: "viewDiv" // Div的Id
});
實現結果如下：
結語
到此ArcGis實現地圖管理就介紹完了。
PS：很多公司把會給會GIS開發的程序員更高的工資。
----------------------------------------------------------------------------------------------------
到此，到此JArcGisJS地圖管理就已經介紹完了。
代碼已經傳到Github上了，歡迎大家下載。
Github地址： https://github.com/kiba518/ArcGisWebJs
----------------------------------------------------------------------------------------------------
注：此文章為原創，任何形式的轉載都請聯系作者獲得授權並注明出處！
若您覺得這篇文章還不錯，請點擊下方的【推薦】，非常感謝！
https://www.cnblogs.com/kiba/p/15133225.html
