SEO優(yōu)化之如何做網(wǎng)站URL優(yōu)化sem廣告
文章目錄
- 0.引言
- 1.ArcGIS創(chuàng)建點(diǎn)要素
- 2.ArcGIS Server發(fā)布點(diǎn)要素
- 3.ArcgisForJS將ArcGIS創(chuàng)建的點(diǎn)要素渲染為熱力圖
0.引言
ArcGIS For JS 是一個(gè)強(qiáng)大的地理信息系統(tǒng)（GIS）工具，它允許開(kāi)發(fā)者使用 JavaScript 語(yǔ)言來(lái)創(chuàng)建各種 GIS 應(yīng)用。ArcGIS Server 是 ArcGIS For JS 的一個(gè)組件，它提供了一個(gè)強(qiáng)大的服務(wù)，用于發(fā)布和處理地理空間數(shù)據(jù)。在 ArcGIS For JS 中，你可以使用 ArcGIS Server API 發(fā)布點(diǎn)要素?cái)?shù)據(jù)，并通過(guò) ArcGIS Server API 的熱力圖功能將其渲染為熱力圖。
1.ArcGIS創(chuàng)建點(diǎn)要素
（1）新建一個(gè)mxd地圖文檔，命名為renderHeatmap；
??
（2）雙擊連接地理數(shù)據(jù)庫(kù)和ArcGIS Server
??
（3）點(diǎn)要素創(chuàng)建并注冊(cè)
??
??
??
??
??
??
??
（4）添加編輯要素的底圖
??
（5）編輯點(diǎn)要素并添加屬性值
??
（6）移除底圖圖層
??
2.ArcGIS Server發(fā)布點(diǎn)要素
??
??
??
??
??
??
??
??
在ArcGIS Server中查看。
??
??
REST URL：http://localhost:6080/arcgis/rest/services/renderHeatmap/FeatureServer
3.ArcgisForJS將ArcGIS創(chuàng)建的點(diǎn)要素渲染為熱力圖
（1）實(shí)現(xiàn)代碼
<html lang="en">
<head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Intro to heatmap | Sample | ArcGIS Maps SDK for JavaScript 4.28</title> <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" /> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script src="https://js.arcgis.com/4.28/"></script> <script> require(["esri/Map", "esri/layers/FeatureLayer", "esri/views/MapView", "esri/widgets/Legend"], ( Map, FeatureLayer, MapView, Legend ) => { const url="http://localhost:6080/arcgis/rest/services/renderHeatmap/FeatureServer"; // Paste the url into a browser's address bar to download and view the attributes // in the CSV file. These attributes include: // * mag - magnitude // * type - earthquake or other event such as nuclear test // * place - location of the event // * time - the time of the event const template = { title: "標(biāo)題", content: "值為{va}。" }; // The heatmap renderer assigns each pixel in the view with // an intensity value. The ratio of that intensity value // to the maxPixel intensity is used to assign a color // from the continuous color ramp in the colorStops property const renderer = { type: "heatmap", field: "va", colorStops: [ { color: "rgba(63, 40, 102, 0)", ratio: 0 }, { color: "#472b77", ratio: 0.083 }, { color: "#4e2d87", ratio: 0.166 }, { color: "#563098", ratio: 0.249 }, { color: "#5d32a8", ratio: 0.332 }, { color: "#6735be", ratio: 0.415 }, { color: "#7139d4", ratio: 0.498 }, { color: "#7b3ce9", ratio: 0.581 }, { color: "#853fff", ratio: 0.664 }, { color: "#a46fbf", ratio: 0.747 }, { color: "#c29f80", ratio: 0.83 }, { color: "#e0cf40", ratio: 0.913 }, { color: "#ffff00", ratio: 1 } ], maxDensity: 0.01, minDensity: 0 }; const layer = new FeatureLayer({ url: url, title: "test heatmap", popupTemplate: template, renderer: renderer, labelsVisible: true, labelingInfo: [ { symbol: { type: "text", // autocasts as new TextSymbol() color: "white", font: { family: "Noto Sans", size: 8 }, haloColor: "#472b77", haloSize: 0.75 }, labelPlacement: "center-center", labelExpressionInfo: { expression: "Text($feature.va, '#.0')" }, where: "va > 4" } ] }); const map = new Map({ basemap: "gray-vector", layers: [layer] }); const view = new MapView({ container: "viewDiv", center: [106.49446091380375, 29.559187456407138], zoom: 10, map: map }); view.ui.add( new Legend({ view: view }), "bottom-left" ); 點(diǎn)擊地圖獲取經(jīng)緯度坐標(biāo) //view.on("click", evt => { // let mapPoint = evt.mapPoint; // alert(`經(jīng)度：${mapPoint.longitude},緯度${mapPoint.latitude}`); //}); }); </script>
</head> <body> <div id="viewDiv"></div>
</body>
</html>
（2）實(shí)現(xiàn)結(jié)果
??
參考資料：
[1] 一入GIS深似海. 不一樣的前端，JavaScript之a(chǎn)rcgis api教程; 2020-11-02 [accessed 2024-02-24].
[2] HPUGIS. ArcGIS API For JS 之render（符號(hào)渲染); 2018-07-03 [accessed 2024-02-24].
[3] 風(fēng)衡. JS API 4.0地圖渲染之符號(hào)（一）; 2016-08-22 [accessed 2024-02-24].
[4] GIS_KHF. JS API 4.x地圖渲染之符號(hào)（二）(轉(zhuǎn)載); 2016-11-10 [accessed 2024-02-24].
[5] 不睡覺(jué)的怪叔叔. ArcGIS API For JavaScript官方文檔（二十）之圖形和要素圖層——③符號(hào)和渲染器; 2018-04-13 [accessed 2024-02-24].