简介
@conveyal/react-select-geocoder-arcgis 是一个基于 React 的组件库，它提供了一个地理编码组件，可以将用户输入的文本转化为地理坐标，并在地图上展示。该组件库依赖于 ESRI 的 ArcGIS API，使用时需要先在项目中安装该 API。
安装
使用 npm 安装 @conveyal/react-select-geocoder-arcgis 和 ArcGIS API：
npm install @conveyal/react-select-geocoder-arcgis esri-loader
使用
使用 @conveyal/react-select-geocoder-arcgis 的步骤如下：
加载 ArcGIS API
在使用 @conveyal/react-select-geocoder-arcgis 之前，需要先加载 ArcGIS API。可以使用 esri-loader 来加载：
import { loadModules } from "esri-loader"; loadModules(["esri/Map", "esri/views/MapView"]).then(([Map, MapView]) => { // 使用 ArcGIS API 的代码 });
渲染地理编码组件
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------------- ---- ----------------------------------------- ----- ----------- ------- --------------- - -------- - ------ - --------------- ---------------------- -- ------------------------- ----------------- -- --------------------- -- -- - -
展开代码注意：需要在组件外部设置合适的 CSS 样式，例如：
-- -------------------- ---- ------- -------------------------- - --------- --------- -------- ------------- -------- -- - --------------------- - --------- --------- ---- ----- ----- -- ------ -- -------- ---- ----------- ----- ------- -- -------- -- ----------------- ----- ------- --- ----- ----- -------------- ---- ----------- - --- ---- ------- -- -- ------- - -------------------------- - -------- ----- ------- -------- - -------------------------------- - ----------------- -------- - -------------------------- - -------- ----- ----------------- -------- -
展开代码这里使用了默认的样式，如果需要自定义可以覆盖上述样式。
属性
onSuggest: (suggestions: Suggestion[]) => void当用户输入时，会触发此回调函数，返回一个地理编码建议的列表（Suggestion 类型定义如下）。
interface Suggestion { text: string; magicKey?: string; }
text表示建议的文本，magicKey是一个可选的字符串，用于表明该建议的分类。onSearch: (results: SearchResult[]) => void当用户选择某个建议并点击搜索时，会触发此回调函数，返回一个包含搜索结果的列表（SearchResult 类型定义如下）。
interface SearchResult { text: string; source: string; location: { x: number; y: number; }; }
text表示搜索结果的文本，source表示搜索来源，location包含搜索结果对应的经纬度坐标。minSuggestCharacters: number触发
onSuggest回调函数的最小输入字符数，默认为3。languages: string[]设置地理编码的语言，例如
["en", "fr", "es"]表示使用英语、法语和西班牙语语言编码搜索，不设置则使用浏览器默认语言。params: GeocodeParams设置地理编码参数，可以自定义地理编码服务的 URL、代理等信息。详细可参见 ArcGIS 官方文档。
示例
下面是一个完整的使用示例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------------- ---- ----------------------------------------- ------ - ----------- - ---- -------------- ----- ----------- ------- --------------- - ------------------ - ------------- ---------- - - ----- ----- -- - ------------------- - ------------------------ ---------------------------------- --------- -- - ----- --- - --- ----- -------- ---------- --- ----- ---- - --- --------- ---------- ------------------------ ---- ---- ------- ----------- --------- ----- --- --- --------------- ---- --- --- - ------------ - --------- -- - ----- -------- - -------- ----- - ---- - - ----------- ----------- ------- ------------------- ------------------- ----- --- --- -- -------- - ------ - ----- ---- --------------------- -- --------------- ------------------------ --------- ------------ ----- --------- ----------- ---------- -- ---------------------------- -- ------ -- - -展开代码
此代码中，使用了 esri-loader，异步加载了 ArcGIS API 的 Map 和 MapView 类，创建了一个简单的地图视图，并将地址编码组件与之配合使用。用户输入地址之后，会触发 handleSearch 回调函数，并将地图视图移动到搜索结果所在的位置。
总结
@conveyal/react-select-geocoder-arcgis 提供了一个简单易用的地址编码组件，使开发者可以更方便地实现地理位置搜索功能。同时，该组件库的示例代码也提供了很好的参考，可供开发者学习和借鉴。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/196347
