高德地图Loca.GeoJSONSource获取省事数据

### 高德地图 Loca.GeoJSONSource 使用方法 Loca 是高德地图推出的可视化引擎，支持多种数据源渲染方式。其中 `Loca.GeoJSONSource` 可用于加载 GeoJSON 数据并将其作为图层显示在地图上。以下是关于如何使用高德地图 API 和 Loca 的 `GeoJSONSource` 来获取省份数据的具体说明。 #### 加载高德地图和 Loca 库 为了使用 Loca 提供的功能，需先引入高德地图 JavaScript API 和 Loca SDK[^1]： ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德APIKey"></script> <script src="https://cdn.jsdelivr.net/npm/@amap/amap-js-loca@latest/dist/loca.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@amap/amap-js-loca@latest/dist/loca.css"> ``` #### 初始化地图实例 创建一个基本的地图容器，并初始化 AMap 地图对象： ```javascript var map = new AMap.Map('container', { zoom: 4, center: [104.11, 37.55], }); ``` #### 创建 Loca 实例 通过 Loca 构造函数创建一个新的 Loca 实例并与地图绑定： ```javascript var loca = new Loca.Container({ map: map, }); ``` #### 添加 GeoJSON 数据源 可以利用 `Loca.GeoJSONSource` 将本地或远程的 GeoJSON 数据加载到地图中。以下是一个简单的例子展示如何加载中国省级行政区划的数据： ```javascript // 定义 GeoJSON 数据源 var source = new Loca.GeoJSONSource({ url: 'https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json', }); // 设置样式参数 var style = { fillStyle: '#FFEDA0', strokeStyle: '#FED976', lineWidth: 1, }; // 渲染图层 var layer = new Loca.FeatureLayer({ zIndex: 1, source: source, styles: style, }); layer.addTo(loca); ``` 上述代码片段展示了如何从阿里云公开服务接口请求全国范围内的省界矢量数据，并应用自定义颜色填充与边框绘制效果。 #### 动态交互功能扩展 如果希望进一步增强用户体验，还可以基于鼠标事件实现点击查询等功能。例如当用户单击某个省份区域时弹窗提示该地区的名称属性信息： ```javascript map.on('click', function (e) { var features = source.queryFeatures(e.lnglat); // 查询当前点位下的要素集合 if(features.length){ alert(`您选择了：${features[0].properties.name}`); } }); ``` 以上即为完整的操作流程介绍，涵盖了从环境搭建至实际业务逻辑实现的过程。 ---