<think>我们使用
高德地图JSAPI来实现。主要步骤包括：1.使用DataV生成公园的GeoJSON数据。2.在
高德地图中加载GeoJSON数据，将其转换为多边形（Polygon）覆盖物。3.
设置多边形的
样式，包括默认
样式和
鼠标悬停（高亮）
样式。4.将多边形添加到地图上。具体实现如下：###1.引入
高德地图JSAPI在HTML中引入
高德地图JSAPI，注意替换成你的key。```html<scriptsrc="https://webapi.
amap.com/maps?v=2.0&key=你的
高德地图key"></script>```###2.创建地图容器```html<divid="
container"style="width:100%;height:800px;"></div>```###3.初始化地图并加载GeoJSON数据假设我们已经从DataV获取了公园的GeoJSON数据（假设为`parkGeoJSON`），然后使用
高德地图的`GeoJSON`类解析并创建多边形。```javascript//初始化地图varmap=new
AMap.Map('
container',{zoom:11,//初始缩放级别center:[116.397428,39.90923]//初始中心点，这里以北京中心为例});//假设这是从DataV获取的公园GeoJSON数据constparkGeoJSON={"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"朝阳公园","type":"park"},"geometry":{"type":"Polygon","coordinates":[[[116.477,39.933],[116.482,39.930],[116.485,39.935],[116.480,39.938],[116.477,39.933]//注意：多边形需要闭合，第一个点和最后一个点相同]]}}//可以有多个公园]};//使用
高德地图的GeoJSON解析器vargeojson=new
AMap.GeoJSON({geoJSON:parkGeoJSON,//可以自定义
样式getPolygon:function(geojson,lnglats){//返回一个Polygon实例returnnew
AMap.Polygon({path:lnglats,strokeColor:"#0099FF",//线颜色strokeOpacity:0.8,//线透明度strokeWeight:2,//线宽fillColor:"#0099FF",//填充色fillOpacity:0.35,//填充透明度//添加自定义属性，比如公园名称extData:{name:geojson.properties.name}});}});//将解析出的多边形添加到地图geojson.setMap(map);//为每个多边形添加事件，实现高亮效果geojson.on('added',function(e){varpolygons=e.target;//获取添加的覆盖物（这里是一个覆盖物数组，因为GeoJSON可能有多个）polygons.forEach(function(polygon){//
鼠标移入高亮polygon.on('mouseover',function(){polygon.setOptions({fillColor:'#FF5722',//高亮填充色strokeColor:'#FF5722'//高亮边框色});});//
鼠标移出恢复polygon.on('mouseout',function(){polygon.setOptions({fillColor:'#0099FF',strokeColor:'#0099FF'});});});});```###4.高亮效果说明
-通过监听多边形的`mouseover`和`mouseout`事件，动态改变多边形的填充色和边框色来实现高亮。
-也可以使用`setStyle`方法一次性
设置多个
样式。###5.注意事项
-**坐标顺序**：GeoJSON的坐标顺序是[经度,纬度]，而
高德地图的`LngLat`也是[经度,纬度]，所以可以直接使用。
-**多边形闭合**：多边形的第一个坐标点和最后一个坐标点必须相同，形成闭合。
-**多个多边形**：如果GeoJSON中包含多个多边形（多个Feature），则`geojson`对象会解析出多个多边形并全部添加到地图上。###6.性能优化如果公园边界非常复杂（点数很多），可以考虑在添加到地图之前对多边形进行简化（减少点数）。
高德地图本身没有提供简化方法，可以使用第三方库（如`simplify
-js`）进行简化。###7.在微信小程序或UniApp中的使用如果是在UniApp或微信小程序中使用，需要参考
高德地图小程序SDK或UniApp的特定用法（如使用`renderjs`）。但基本思路一致：解析GeoJSON，创建多边形，添加事件。###引用说明
-引用[2]中提到的方法：构造多边形地块数据，我们这里使用`
AMap.GeoJSON`来解析GeoJSON并创建多边形。
-引用[3]中微信小程序的地图组件使用`polygons`属性来绘制多边形，但在Web端
高德地图中我们使用覆盖物（Polygon）的方式。§§相关问题§§1.如何在
高德地图中同时显示多个公园并分别高亮？2.如何点击公园区域弹出信息窗口显示公园详情？3.如何处理GeoJSON中复杂的MultiPolygon类型（多个不相连区域组成的公园）？4.如何优化大量多边形区域的渲染性能？</think>### 在
高德地图中使用 DataV GeoJSON 实现区域高亮
以下是完整的实现方案，结合
高德地图 API 和 DataV 生成的 GeoJSON 数据实现多边形区域高亮：
#### 1. **核心实现代码**
```javascript
// 1. 初始化地图
const map = new
AMap.Map('map
-container', {
zoom: 12,
center: [116.397428, 39.90923] // 北京中心点
});
// 2. 加载DataV生成的GeoJSON数据（示例）
const parkGeoJSON = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": { "name": "朝阳公园" },
"geometry": {
"type": "Polygon",
"coordinates": [[
[116.477, 39.933], [116.482, 39.930],
[116.485, 39.935], [116.480, 39.938]
]]
}
}
]
};
// 3. 创建高亮多边形图层
const createHighlightLayer = (geoJSON) => {
const polygons = [];
geoJSON.features.forEach(feature => {
if (feature.geometry.type === 'Polygon') {
const path = feature.geometry.coordinates[0].map(coord =>
new
AMap.LngLat(coord[0], coord[1])
);
// ⭐ 创建多边形并
设置样式
const polygon = new
AMap.Polygon({
path: path,
strokeColor: "#FF5722", // 高亮边框色
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF5722", // 高亮填充色
fillOpacity: 0.35,
zIndex: 100, // 确保在顶层
bubble: true,
extData: feature.properties // 存储附加数据
});
// ⭐ 添加
鼠标交互事件
polygon.on('mouseover', () => {
polygon.setOptions({
fillOpacity: 0.5,
strokeWeight: 4
});
});
polygon.on('mouseout', () => {
polygon.setOptions({
fillOpacity: 0.35,
strokeWeight: 3
});
});
polygons.push(polygon);
}
});
// ⭐ 添加图层组到地图
map.add(polygons);
return polygons;
};
// 4. 执行高亮
const highlightedParks = createHighlightLayer(parkGeoJSON);
// 5. 点击显示信息窗口（可选）
highlightedParks.forEach(polygon => {
polygon.on('click', (e) => {
const infoWindow = new
AMap.InfoWindow({
content: `<h3>${e.target.getExtData().name}</h3>`,
offset: new
AMap.Pixel(0,
-30)
});
infoWindow.open(map, e.lnglat);
});
});
```
#### 2. **关键步骤解析**
1. **数据转换**
将 GeoJSON 坐标转换为
高德地图的 `LngLat` 对象：
```javascript
const path = feature.geometry.coordinates[0].map(coord =>
new
AMap.LngLat(coord[0], coord[1])
);
```
2. **高亮
样式配置**
通过 `Polygon` 的
样式参数实现：
- `strokeColor`：边框颜色（高亮色）
- `fillColor`：填充颜色（半透明效果）
- `zIndex: 100`：确保多边形显示在最顶层
3. **交互效果**
```javascript
polygon.on('mouseover', () => {
polygon.setOptions({ fillOpacity: 0.5 }); // 加深透明度
});
```
4. **数据绑定**
使用 `extData` 存储原始属性数据：
```javascript
new
AMap.Polygon({
extData: feature.properties // 存储名称等数据
});
```
#### 3. **微信小程序适配方案**
参考引用[3]，在小程序中使用 `polygons` 属性：
```javascript
// pages/map/map.js
Page({
data: {
polygons: [{
points: [
{ longitude: 116.477, latitude: 39.933 },
{ longitude: 116.482, latitude: 39.930 },
{ longitude: 116.485, latitude: 39.935 }
],
strokeWidth: 4,
strokeColor: "#FF5722",
fillColor: "#FF572233"
}]
}
})
```
```xml
<!
-- pages/map/map.wxml
-->
<map
id="map"
polygons="{{polygons}}"
longitude="116.397428"
latitude="39.90923">
</map>
```
#### 4. **性能优化技巧**
1. **数据简化**
使用 [mapshaper](https://mapshaper.org/) 简化复杂多边形：
```bash
mapshaper park.geojson
-simplify 10%
-o park_simple.geojson
```
2. **分级加载**
根据缩放级别加载不同精度的数据：
```javascript
map.on('zoomchange', () => {
const zoom = map.getZoom();
if (zoom > 14) loadHighDetailGeoJSON();
else loadLowDetailGeoJSON();
});
```
3. **图层管理**
使用 `
AMap.LayerGroup` 管理大量多边形：
```javascript
const layerGroup = new
AMap.LayerGroup();
layerGroup.addPolygons(polygons);
map.add(layerGroup);
```
#### 5. **常见问题解决**
- **问题：** 多边形显示不全
**解决：** 确保坐标闭合（首尾点相同）：
```javascript
const path = [...coordinates, coordinates[0]]; // 闭合多边形
```
- **问题：** 跨平台兼容性
**解决：** 使用高德统一API（支持Web/小程序）：
```javascript
// uni
-app中通过renderjs加载
<view @touchmove="handleTouchMove" change:prop="renderjs.updateMap"></view>
```
> 引用[1]中提到的行政区划边界提取方法可直接用于获取公园边界数据[^1]，引用[2]的GeoJSON解析方法适用于复杂地块处理[^2]。
本文介绍如何在高德地图中实现选点功能，并优化鼠标样式为十字准星，提高用户体验。通过设置默认鼠标样式，使地图更适合进行精确位置选择。
扫一扫
909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
