文章目錄
- 0.引言
- 1.加載底圖
- 2.獲取點要素的坐標
- 3.添加含圖片樣式的幾何要素
- 4.完整實現
0.引言
ArcGIS API for JavaScript 是一個用于在Web和移動應用程序中創建交互式地圖和地理空間分析應用的庫。本文在ArcGIS For JavaScript中使用Graphic對象來創建包含圖片樣式的點要素。
1.加載底圖
（1）實現代碼
<!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create Map</title> <link rel="stylesheet" href="http://localhost:8099/arcgis_js_api/javascript/4.28/esri/themes/light/main.css" /> <script src="http://localhost:8099/arcgis_js_api/javascript/4.28/init.js"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script type="text/javascript"> require(["esri/Map", "esri/Basemap", "esri/layers/TileLayer", "esri/views/MapView", "esri/layers/GraphicsLayer", "esri/Graphic" ], ( Map, Basemap, TileLayer, MapView, GraphicsLayer, Graphic )=>{ //添加底圖 var lyTile = new TileLayer({ url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer" }); var baseMap = new Basemap({ baseLayers: [lyTile] }); var map = new Map({ basemap: baseMap }); var view = new MapView({ container: "viewDiv", map: map, zoom: 16, center: [106.56657791438427, 29.679927608558902] }); }); </script>
</head> <body> <div id="viewDiv"></div>
</body> </html>
（2）實現結果
??
2.獲取點要素的坐標
（1）實現代碼
??
//點擊地圖獲取經緯度坐標
view.on("click", evt => { let mapPoint = evt.mapPoint; alert(`經度：${mapPoint.longitude},緯度${mapPoint.latitude}`);
});
（2）實現結果
??
以上獲取的坐標作為點要素的坐標，為（經度：106.56651354136791,緯度29.68001149992497）。
3.添加含圖片樣式的幾何要素
（1）實現代碼
??
//添加含圖片樣式的幾何要素
var graphic = new Graphic({ geometry: point, symbol: symbol
});
var graphicsLayer = new GraphicsLayer();
graphicsLayer.visible = true;
var point = { type: "point", x: 106.56657791438427, y: 29.679927608558902, SpatialReference: 3857
};
var symbol = { type: "picture-marker", url:"http://img14.360buyimg.com/n1/jfs/t2149/268/1108858690/251183/f7d770d0/5678c41eN59e3de7f.jpg",//訪問小車圖片 width: "50px", height: "50px", outline: { style: "solid" },
};
var attributes = { name: '小車', content: '真是一輛漂亮的小車' };
var popupTemplate1 = { title: "標題:" + attributes.name, content: "內容:" + attributes.content
};
var graphic = new Graphic({ geometry: point, symbol: symbol, popupTemplate: popupTemplate1,
});
graphicsLayer.graphics.add(graphic);
map.add(graphicsLayer);
（2）實現結果
??
4.完整實現
（1）完整代碼
<!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create Map</title> <link rel="stylesheet" href="http://localhost:8099/arcgis_js_api/javascript/4.28/esri/themes/light/main.css" /> <script src="http://localhost:8099/arcgis_js_api/javascript/4.28/init.js"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script type="text/javascript"> require(["esri/Map", "esri/Basemap", "esri/layers/TileLayer", "esri/views/MapView", "esri/layers/GraphicsLayer", "esri/Graphic" ], ( Map, Basemap, TileLayer, MapView, GraphicsLayer, Graphic )=>{ //添加底圖 var lyTile = new TileLayer({ url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer" }); var graphic = new Graphic({ geometry: point, symbol: symbol }); //創建一個圖層 var graphicsLayer = new GraphicsLayer(); //設置可見 graphicsLayer.visible = true; //創建一個面 var point = { type: "point", x: 106.56657791438427, y: 29.679927608558902, SpatialReference: 3857 }; var symbol = { type: "picture-marker", url:"http://img14.360buyimg.com/n1/jfs/t2149/268/1108858690/251183/f7d770d0/5678c41eN59e3de7f.jpg",//訪問小車圖片 width: "50px", height: "50px", outline: { style: "solid" }, }; var attributes = { name: '小車', content: '真是一輛漂亮的小車' }; var popupTemplate1 = { title: "標題:" + attributes.name, content: "內容:" + attributes.content }; var graphic = new Graphic({ geometry: point, symbol: symbol, popupTemplate: popupTemplate1, }); graphicsLayer.graphics.add(graphic); var baseMap = new Basemap({ baseLayers: [lyTile] }); var map = new Map({ basemap: baseMap }); map.add(graphicsLayer) var view = new MapView({ container: "viewDiv", // Reference to the DOM node that will contain the view map: map, // References the map object created in step 3 zoom: 16, center: [106.56657791438427, 29.679927608558902] }); //點擊地圖獲取經緯度坐標 //view.on("click", evt => { // let mapPoint = evt.mapPoint; // alert(`經度：${mapPoint.longitude},緯度${mapPoint.latitude}`); //}); }); </script>
</head> <body> <div id="viewDiv"></div>
</body> </html>
（2）實現結果
??
參考資料：
[1] 一入GIS深似海. 不一樣的前端，JavaScript之arcgis api教程; 2020-11-02 [accessed 2024-02-22].
[2] 半個GIS半個前端. arcgis api（三）arcgis api for js 4.x 加載高德地圖、谷歌地圖、天地圖; 2018-08-17 [accessed 2024-02-22].
[3] 前端三腳貓. js中的變量聲明（var、let、const的區別和解析）; 2021-03-08 [accessed 2024-02-22].
之SpringCloud Gateway)
 Object Pascal 學習筆記---第5章第3節（自定義托管記錄）)
