原文思路來自DEV社區(qū)Esri的開發(fā)者倡導者Courtney Yatteau
如何利用Qwen3.5大語言模型和ArcGIS Maps SDK for JavaScript結(jié)合，將簡單的文本查詢轉(zhuǎn)化為動態(tài)地圖高亮。那么，讓我們來探討一下我是如何用幾步、最少的代碼構(gòu)建出那個GIS網(wǎng)頁應(yīng)用的——從提示到地圖。
為什么是Qwen+WebGIS？
最近我在一臺具有4GB顯存顯卡的計算機上通過LM Studio安裝了Qwen3.5 4B量化模型。在http://localhost:1234提供了與OpenAI兼容的API
我喜歡用有趣的方式把我學到的東西和我已經(jīng)知道的東西結(jié)合起來。在這種情況下，我想讓用戶輸入任何問題（“列出人口最多的三個國家”、“顯示人口>1億的國家”等），并立即在世界地圖上高亮結(jié)果。Qwen負責自然語言解析，ArcGIS負責空間查詢和渲染。
1. 項目設(shè)置
1.1 創(chuàng)建你的文件
在 VS Code 中，創(chuàng)建一個新文件夾，并在其中創(chuàng)建以下文件：
index.html
scripts.js
interceptors.js
styles.css
1.2 HTML 骨架
使用VSCode來搭建你的HTML架構(gòu)。然后，將你的CSS和JS本地文件鏈接起來：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Qwen3.5 + ArcGIS Demo</title>
<link rel="stylesheet" href="styles.css" />
<script ?type="module" src="scripts.js" defer></script>
<script??type="module"?src=" interceptors .js" defer></script>
</head>
<body></body>
</html>
1.3 包含 ArcGIS JS SDK 和 Calcite。
在styles.css之前把這些引用JS SDK 和 Calcite 放進去。
2. 構(gòu)建用戶界面
2.1 地圖布局與控制
在 中，創(chuàng)建兩列——地圖在左，控件在右：<body>
<div class="main-container">
????<div class="left-column">
????????<arcgis-map id="map" zoom="2">
????????????<arcgis-zoom position="top-left"></arcgis-zoom>
????????</arcgis-map>
????</div>
????<div class="right-column">
????????<calcite-input id="userInput" placeholder="e.g. List the top 3 hottest countries"></calcite-input>
????????<calcite-button id="submitQuery">Submit</calcite-button>
????????<ul id="countryList"></ul>
????????<div id="explanation"></div>
????</div>
</div>
2.2 用于布局的CSS
styles.css中添加最小的CSS：
html, body, arcgis-map { ? padding:0;? margin:0;? height:100%;? width:100%; }
.main-container { ? display:flex;? height:100%; }
.left-column {? flex:1; }
.right-column {
? position:absolute;
? top:10px;
? right:10px;
? background:rgba(255,255,255,0.9);
? padding:1rem;
? border-radius:4px;
? max-width:250px;}
#countryList {
? margin:0.5rem 0;
? padding-left:1rem;
}
3. 底圖配置
scripts.js。首先，獲得Map元素對象mapEL，指定用到的底圖。這里用的世界影像底圖。"satellite"
const Map = await $arcgis.import("@arcgis/core/Map.js");
const mapEl = document.querySelector("arcgis-map");
mapEl.map = new Map({ basemap:"satellite"});
interceptors.js。然后，設(shè)置全局請求過濾器，由于底圖的默認域名被國內(nèi)墻了，用另一個沒被墻的域名代替。海外項目無需本步驟。
4. Qwen查詢邏輯
scripts.js。首先，存儲你的要素圖層URL，然后新建fetchCountriesFromQuery方法。功能如下
1.向Qwen發(fā)送查詢+指令
2.將返回的文本按行拆分
3.提取返回的國家名稱及說明
5.地圖上高亮
仍在scripts.js，創(chuàng)建highlightCountries方法。功能如下：
1.移除所有已有的高亮圖層
2.從國家列表構(gòu)建SQL WHERE子句
3.查詢特征層
4.創(chuàng)建帶有紅色填充的圖形圖層
6.連接用戶交互
在提交按鈕上附加一個事件監(jiān)聽器：
7.測試與迭代
1.在瀏覽器中打開index.html。
2.輸入“人口最多的三個國家”這樣的查詢。
3.點擊提交。
4.看名單逐漸出現(xiàn)，地圖會高亮這些國家。
?? 專業(yè)提示：使用瀏覽器控制臺檢查國家和解釋數(shù)組——這有助于調(diào)試解析邏輯。
歡迎調(diào)整提示說明、樣式或符號顏色。你現(xiàn)在構(gòu)建了一個完全交互式的WebGIS應(yīng)用，由自然語言驅(qū)動！
結(jié)論
僅僅用大約100行代碼，你就將Qwen的自然語言處理能力與ArcGIS的地圖可視化能力結(jié)合起來，將用戶文本轉(zhuǎn)化為地理空間洞察。這種模式——自然語言→結(jié)構(gòu)化數(shù)據(jù)→空間可視化——為動態(tài)、用戶驅(qū)動的地圖打開了無數(shù)可能性。
