原文思路来自DEV社区Esri的开发者倡导者Courtney Yatteau
如何利用Qwen3.5大语言模型和ArcGIS Maps SDK for JavaScript结合，将简单的文本查询转化为动态地图高亮。那么，让我们来探讨一下我是如何用几步、最少的代码构建出那个GIS网页应用的——从提示到地图。
为什么是Qwen+WebGIS？
最近我在一台具有4GB显存显卡的计算机上通过LM Studio安装了Qwen3.5 4B量化模型。在http://localhost:1234提供了与OpenAI兼容的API
我喜欢用有趣的方式把我学到的东西和我已经知道的东西结合起来。在这种情况下，我想让用户输入任何问题（“列出人口最多的三个国家”、“显示人口>1亿的国家”等），并立即在世界地图上高亮结果。Qwen负责自然语言解析，ArcGIS负责空间查询和渲染。
1. 项目设置
1.1 创建你的文件
在 VS Code 中，创建一个新文件夹，并在其中创建以下文件：
index.html
scripts.js
interceptors.js
styles.css
1.2 HTML 骨架
使用VSCode来搭建你的HTML架构。然后，将你的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. 构建用户界面
2.1 地图布局与控制
在 中，创建两列——地图在左，控件在右：<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。然后，设置全局请求过滤器，由于底图的默认域名被国内墙了，用另一个没被墙的域名代替。海外项目无需本步骤。
4. Qwen查询逻辑
scripts.js。首先，存储你的要素图层URL，然后新建fetchCountriesFromQuery方法。功能如下
1.向Qwen发送查询+指令
2.将返回的文本按行拆分
3.提取返回的国家名称及说明
5.地图上高亮
仍在scripts.js，创建highlightCountries方法。功能如下：
1.移除所有已有的高亮图层
2.从国家列表构建SQL WHERE子句
3.查询特征层
4.创建带有红色填充的图形图层
6.连接用户交互
在提交按钮上附加一个事件监听器：
7.测试与迭代
1.在浏览器中打开index.html。
2.输入“人口最多的三个国家”这样的查询。
3.点击提交。
4.看名单逐渐出现，地图会高亮这些国家。
💡 专业提示：使用浏览器控制台检查国家和解释数组——这有助于调试解析逻辑。
欢迎调整提示说明、样式或符号颜色。你现在构建了一个完全交互式的WebGIS应用，由自然语言驱动！
结论
仅仅用大约100行代码，你就将Qwen的自然语言处理能力与ArcGIS的地图可视化能力结合起来，将用户文本转化为地理空间洞察。这种模式——自然语言→结构化数据→空间可视化——为动态、用户驱动的地图打开了无数可能性。
