第二篇，如何用高德地图API获取县乡镇3D乡镇边界线！

实战效果

• 灵川县完整县界高亮显示
• 县内各乡镇边界、名称自动绘制与展示
• 支持3D地形及倾斜效果
• 支持GeoJSON乡镇数据动态加载

---

技术选型

• 高德地图 JS API（v1.4.15）
• Turf.js（计算几何中心）
• jQuery（简化 AJAX 请求）

---

主要步骤与完整代码

1️⃣ 页面结构搭建

<div id="AllmapContainer"></div>

• 创建地图容器，设置全屏大小。

---

2️⃣ 引入依赖

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=Map3D,AMap.DistrictSearch"></script>
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>

• 高德地图 API
• Turf.js 用于计算几何中心
• jQuery 处理 GeoJSON 数据请求

---

3️⃣ 初始化地图（关键）

function initMap(callback) {
    const opts = { subdistrict: 2, extensions: 'all', level: 'city' };
    const district = new AMap.DistrictSearch(opts);

    district.search('灵川县', function(status, result) {
        const countyData = result.districtList[0];
        const bounds = countyData.boundaries;
        create3DMap(bounds);
        drawCountyBoundary(bounds);
        drawTownships();
        if (callback) callback();
    });
}

• 利用 AMap.DistrictSearch 获取灵川县边界
• 回调处理：创建地图、绘制县界、加载乡镇

---

4️⃣ 创建3D地图+县界遮罩

function create3DMap(boundaries) {
    MapInfo = new AMap.Map('AllmapContainer', {
        mask: boundaries.map(b => [b]), 
        viewMode: '3D',
        center: [110.5059, 25.2102],
        zoom: 10.8,
        pitch: 50,
        layers: [new AMap.TileLayer.RoadNet(), new AMap.TileLayer.Satellite()],
        mapStyle: "amap://styles/你的自定义样式"
    });

    const object3Dlayer = new AMap.Object3DLayer();
    MapInfo.add(object3Dlayer);
    const wall = new AMap.Object3D.Wall({
        path: boundaries[0],
        height: -5000,
        color: 'rgba(4,120,215,0.5)'
    });
    object3Dlayer.add(wall);
}

• 设置遮罩效果（仅显示灵川县区域）
• 添加3D地形凹陷效果

---

5️⃣ 绘制县界线条

function drawCountyBoundary(boundaries) {
    boundaries.forEach(boundary => {
        new AMap.Polyline({
            path: boundary,
            strokeColor: '#6edcff',
            strokeWeight: 5,
            map: MapInfo
        });
    });
}

• 县边界高亮描边

---

6️⃣ 加载乡镇边界（GeoJSON）

function drawTownshipsFromGeoJSON(url) {
    $.getJSON(url, function(geojson) {
        geojson.features.forEach(feature => {
            const name = feature.properties.name;
            const coords = feature.geometry.coordinates;
            if (feature.geometry.type === "Polygon") {
                drawOnePolygon(coords, name);
            } else if (feature.geometry.type === "MultiPolygon") {
                coords.forEach(polygonCoords => {
                    drawOnePolygon(polygonCoords, name);
                });
            }
        });
    });
}

• 动态读取本地 geojson.json 文件
• 支持多边形与多面绘制

---

7️⃣ 绘制单个乡镇边界 + 名称标注

function drawOnePolygon(coordinates, name) {
    const path = coordinates[0].map(coord => new AMap.LngLat(coord[0], coord[1]));
    const polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#FF6600',
        strokeWeight: 2,
        fillColor: getRandomColor(),
        fillOpacity: 0.4,
        map: MapInfo
    });

    const center = turf.centroid(turf.polygon([coordinates[0]])).geometry.coordinates;
    const text = new AMap.Text({
        text: name,
        position: center,
        style: { padding: '2px 4px', backgroundColor: '#fff', border: '1px solid #333', fontSize: '12px' },
        map: MapInfo
    });

    townshipOverlays.push(polygon, text);

    // 额外从高德API动态绘制重点乡镇边界
    var districtSearch = new AMap.DistrictSearch({ subdistrict: 0, extensions: 'all' });
    ['大圩镇', '大境瑶族乡', '灵田镇', '海洋乡', '三街镇', '兰田瑶族乡'].forEach(town => {
        districtSearch.search(town, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                var bounds = result.districtList[0].boundaries;
                var polygon = new AMap.Polygon({
                    path: bounds,
                    strokeColor: "#ffffff",
                    strokeWeight: 3,
                    fillOpacity: 0.35,
                    fillColor: "#1791fc"
                });
                MapInfo.add(polygon);
            }
        });
    });
}

• 自定义多边形与随机填充色
• Turf.js 计算标签中心
• 重点乡镇支持从高德实时绘制（备用方案）

---

8️⃣ 工具函数

• 随机颜色生成

function getRandomColor() {
    return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}

• 清除乡镇覆盖物

function clearTownshipOverlays() {
    townshipOverlays.forEach(overlay => MapInfo.remove(overlay));
    townshipOverlays = [];
}

---

项目优化建议

• 乡镇边界优先用 GeoJSON 绘制（统一风格）
• 高德 API 绘制仅用于动态重点乡镇
• 后期可接入景区点标记，加载 POI 信息

---

结语

本项目完整展示了一个基于高德地图和Turf.js的行政区划绘制项目。适用于乡镇展示、政务平台、旅游门户等业务开发。

如果你对前端地图开发感兴趣，欢迎关注我，更多项目持续更新！