高德地图JSAPI专业版

> 功能说明: 本技能涵盖 中文交互、化工作流场景 等核心能力。

专业版为企业开发者提供完整的高德地图JSAPI v2.0开发能力,在免费版基础功能之上,新增WebGL高级渲染、矢量图层管理、实时路况数据、批量地理编码、自定义地图样式、货车路径规划与公交导航等企业级功能。专业版完全兼容免费版接口,已有免费版代码可无缝升级,适合商业级地图应用开发.

专业版核心优势

核心能力

1. WebGL高级渲染与矢量图层(专业版独有)

> 详细代码示例已移至 references/detail.md

处理: 解析WebGL高级渲染与矢量图层(专业版独有)的输入参数,完成核心逻辑,返回结构化响应.
输出: 返回WebGL高级渲染与矢量图层(专业版独有)的响应数据,包含状态码、结果和日志.

2. 实时路况数据(专业版独有)

输入格式

// 实时路况图层
function enableTraffic(map) {
    const trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10,
        autoRefresh: true,  // 自动刷新
        interval: 180        // 刷新间隔(秒)
    });
    trafficLayer.setMap(map);
    return trafficLayer;
}
// ...
// 路况查询
function queryRoadCondition(roadName, city) {
    AMap.plugin('AMap.RoadSearch', function() {
        const roadSearch = new AMap.RoadSearch({
            city: city,
            panel: 'roadPanel'
        });
        roadSearch.searchByRoadName(roadName, function(status, result) {
            if (status === 'complete') {
                result.info.forEach(info => {
                    console.log(`路段: ${info.name}`);
log(`  状态: ${info.status}`);
log(`  方向: ${info.direction}`);
log(`  拥堵程度: ${info.congestion}`);
                });
            }
        });
    });
}
// ...
// 使用示例
const traffic = enableTraffic(map);
queryRoadCondition('建国路', '北京');

处理: 解析实时路况数据(专业版独有)的输入参数,完成核心逻辑,返回结构化响应.
输出: 返回实时路况数据(专业版独有)的响应数据,包含状态码、结果和日志.
- 执行此能力时使用input_params参数,支持创建/查询/导出操作

3. 批量地理编码(专业版独有)

处理: 解析批量地理编码(专业版独有)的输入参数,完成核心逻辑,返回结构化响应.
输出: 返回批量地理编码(专业版独有)的响应数据,包含状态码、结果和日志.

4. 货车路径规划(专业版独有)

// 货车专用路径规划(考虑限高限重)
function truckRoute(origin, destination, truckInfo) {
    AMap.plugin('AMap.TruckDriving', function() {
        const truckDriving = new AMap.TruckDriving({
            map: map,
            policy: AMap.TruckDrivingPolicy.LEAST_DISTANCE,
            size: truckInfo.size || 1,      // 车型: 1-4
            width: truckInfo.width,          // 车宽(米)
            height: truckInfo.height,        // 车高(米)
            load: truckInfo.load,            // 载重(吨)
            weight: truckInfo.weight         // 车重(吨)
        });
// ...
        truckDriving.search(
            [{ lnglat: origin }, { lnglat: destination }],
            function(status, result) {
                if (status === 'complete') {
                    const route = result.routes[0];
log(`  总距离: ${(route.distance / 1000).toFixed(1)}公里`);
log(`  预计时间: ${Math.ceil(route.time / 60)}分钟`);
log(`  收费路段: ${route.tolls}元`);
                }
            }
        );
    });
}
// ...
// 使用示例:2型货车(中型)
truckRoute(
    [116.481028, 39.996729],  // 北京望京
    [121.473701, 31.230416],  // 上海陆家嘴
    { size: 2, width: 2.5, height: 3.0, load: 10, weight: 5 }
);

处理: 解析货车路径规划(专业版独有)的输入参数,完成核心逻辑,返回结构化响应.
输出: 返回货车路径规划(专业版独有)的响应数据,包含状态码、结果和日志.
- 执行此能力时使用input_params参数,支持创建/查询/导出操作

5. 自定义地图样式(专业版独有)

// 使用自定义地图样式
function applyCustomStyle(map, styleId) {
    map.setMapStyle('amap://styles/' + styleId);
}
// ...
// 支持的自定义样式
const customStyles = {
    darkBlue: 'amap://styles/darkblue',      // 深蓝主题
    fresh: 'amap://styles/fresh',            // 清新主题
    grey: 'amap://styles/grey',              // 灰色主题
    graffiti: 'amap://styles/graffiti',      // 涂鸦主题
    macaron: 'amap://styles/macaron',        // 马卡龙主题
    blue: 'amap://styles/blue',              // 蓝色主题
    dark: 'amap://styles/dark',              // 暗黑主题
    light: 'amap://styles/light',            // 轻盈主题
    whitesmoke: 'amap://styles/whitesmoke'   // 远山黛主题
};
// ...
// 使用示例
applyCustomStyle(map, customStyles.dark);

处理: 解析自定义地图样式(专业版独有)的输入参数,完成核心逻辑,返回结构化响应.
输出: 返回自定义地图样式(专业版独有)的响应数据,包含状态码、结果和日志.
能力覆盖范围：本skill的核心能力覆盖以下场景关键词：企业级高德地图开、发平台、支持矢量图层、实时路况、批量地理编码、自定义样式与货车、适合商业级地图应、用开发、高德地图、JSAPI、开发助手专业版、为企业提供全方位、地图开发能力、核心能力、WebGL、高级渲染、矢量图层、自定义地图样式、货车路径规划、公交导航、适用场景、商业级地图应用、物流调度、位置服务、SaaS、智慧城市可视化、差异化、专业版兼容免费版、新增企业级数据处、理与高级渲染能力、满足商业场景需求、适用关键词、货车导航、amap、pro、vector、layer等.
- 执行此能力时使用input_params参数,支持创建/查询/导出操作

使用场景

场景一:物流调度系统

// 物流调度:多点配送路径优化
function optimizeDeliveryRoute(warehouse, deliveryPoints) {
    AMap.plugin('AMap.TruckDriving', function() {
            map: map,
TruckDrivingPolicy.LEAST_DISTANCE,
            size: 1
        });
// ...
        // 构造途经点
        const points = [
            { lnglat: warehouse },
            ...deliveryPoints.map(p => ({ lnglat: p, name: '配送点' }))
        ];
// ...
search(points, function(status, result) {
            if (status === 'complete') {
log('=== 配送路径优化 ===');
log(`配送点数量: ${deliveryPoints.length}`);
log(`总距离: ${(route.distance / 1000).toFixed(1)}公里`);
log(`预计时间: ${Math.ceil(route.time / 3600)}小时`);
log(`收费: ${route.tolls}元`);
// ...
                // 显示配送顺序
                route.steps.forEach((step, i) => {
log(`  ${i+1}. ${step.instruction}`);
                });
            }
        });
    });
}
// ...
// 使用示例
optimizeDeliveryRoute(
    [116.481028, 39.996729],  // 仓库:北京望京
    [
        [116.397428, 39.90923],  // 配送点1:天安门
        [116.413384, 39.911023], // 配送点2:王府井
        [116.377849, 39.915378]  // 配送点3:西单
    ]
);

场景二:商圈分析可视化

// 商圈热力图分析
function analyzeBusinessDistrict(map, poiData) {
    // 1. 渲染热力图
    const heatmap = new AMap.HeatMap(map, {
        radius: 50,
        opacity: [0, 0.8],
        gradient: {
            0.3: '#55a1ff',
            0.6: '#55ff55',
            0.8: '#ffaa00',
            1.0: '#ff3333'
        }
    });
// ...
    heatmap.setDataSet({ data: poiData, max: 1000 });
// ...
    // 2. 渲染商圈边界
    poiData.forEach(poi => {
        if (poi.boundary) {
            const polygon = new AMap.Polygon({
                path: poi.boundary,
                fillColor: '#1791fc',
                fillOpacity: 0.2,
                strokeColor: '#1791fc',
                strokeWeight: 2
            });
            polygon.setMap(map);
        }
    });
// ...
    // 3. 添加统计数据标注
    poiData.forEach(poi => {
        const marker = new AMap.Marker({
            position: poi.center,
            content: `<div style="padding:5px 10px; background:white; border-radius:4px;
                       box-shadow:0 2px 6px rgba(0,0,0,0.3); font-size:12px;">
                       <b>${poi.name}</b><br>
                       POI数量: ${poi.count}
                     </div>`,
            offset: new AMap.Pixel(-50, -25)
        });
        marker.setMap(map);
    });
}

场景三:等时圈分析

// 等时圈:从某点出发,N分钟内可达范围
function reachabilityAnalysis(center, minutes) {
    AMap.plugin('AMap.Driving', function() {
        const driving = new AMap.Driving({
DrivingPolicy.LEAST_TIME
        });
// ...
        // 在中心点周围采样多个方向
        const samplePoints = [];
        for (let angle = 0; angle < 360; angle += 15) {
            const rad = angle * Math.PI / 180;
            const distance = minutes * 500;  // 估算可达距离
            const lng = center[0] + distance * Math.cos(rad) / 111000;
            const lat = center[1] + distance * Math.sin(rad) / 111000;
            samplePoints.push([lng, lat]);
        }
// ...
        // 查询每个方向的行驶时间
        const reachablePoints = [];
        let completed = 0;
// ...
            driving.search(center, target, function(status, result) {
                completed++;
                if (status === 'complete') {
                    const time = result.routes[0].time / 60;
                    if (time <= minutes) {
                        reachablePoints.push(target);
                    }
                }
                if (completed === samplePoints.length) {
                    drawReachableArea(reachablePoints);
                }
            });
        });
    });
}
// ...
function drawReachableArea(points) {
        path: points,
        fillColor: '#00b38a',
        strokeColor: '#00b38a',
        strokeWeight: 2
    });
    polygon.setMap(map);
    console.log(`等时圈已绘制,可达点数: ${points.length}`);
}

不适用场景

以下场景高德地图JSAPI专业版不适合处理：

• 实时流数据处理
• 小规模数据手动分析
• 非结构化文本情感分析

触发条件

需要数据分析、报表生成、统计洞察、数据可视化时使用。不适用于非本工具能力范围的需求.

快速开始

1. 阅读## 核心能力章节了解skill功能
2. 按## 依赖说明配置环境
3. 执行所需能力对应的命令
4. 参考## 错误处理章节处理异常
5. 查看## FAQ解答常见疑问

从免费版升级

// 免费版:基础地图
const map = new AMap.Map('container', { zoom: 12 });
// ...
// 专业版:启用高级功能
    zoom: 12,
    viewMode: '3D',
    pitch: 45,
    mapStyle: 'amap://styles/dark',
    features: ['bg', 'road', 'building', 'point']
});

响应解析: 完成完成后,查看输出响应确认任务状态。成功时输出包含解析摘要和响应数据;失败时根据错误信息排查问题,查阅错误解析章节获取恢复步骤.

示例

专业版功能矩阵

3D地图配置

    zoom: 14,
    center: [116.397428, 39.90923],
    viewMode: '3D',         // 3D视图
    pitch: 50,              // 俯仰角(0-83)
    rotation: 0,            // 旋转角
    showLabel: true,        // 显示标签
    showBuildingBlock: true, // 显示3D建筑
    buildingAnimation: true  // 建筑动画
});

优选实践

1. 海量数据优化:超过1000个标注点使用MassMarks而非普通Marker.
2. 批量限流:批量地理编码控制在每秒10个请求以内.
3. 图层管理:使用图层组管理多个图层,按需显示/隐藏.
4. 内存管理:及时销毁不再使用的图层和标注,避免内存泄漏.
5. 移动端优化:移动端减少同时渲染的标注数量,使用聚合显示.

常见问题

Q1: 专业版与免费版代码是否兼容?

完全兼容。专业版使用相同的JSAPI,仅需在平台后台开通专业版权限即可启用高级功能.

Q2: 海量点渲染性能如何?

MassMarks支持10万级别数据点流畅渲染,配合缩放级别动态加载数据可进一步提升性能.

已知限制

专业版单次批量建议不超过1000个地址,通过分批处理可处理更大规模数据.

Q4: 货车导航支持哪些车型?

支持4种车型(微型、轻型、中型、重型),可配置车宽、车高、载重等参数.

Q5: 自定义样式如何创建?

在高德开放平台的自定义样式编辑器中创建,获取样式ID后通过setMapStyle应用.

依赖说明

运行环境

• Agent平台: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
• 浏览器: Chrome 70+ / Firefox 65+ / Safari 12+ / Edge 79+
• 网络: 需可访问 https://webapi.amap.com

依赖详情

API Key 配置

• 在高德开放平台申请专业版API Key
• 开通高级功能权限(矢量图层、实时路况等)
• 通过 window._AMapSecurityConfig 配置安全密钥

可用性分类

• 分类: MD+execute(纯Markdown指令,需要exec能力生成HTML文件)
• 说明: 基于Markdown的AI Skill,通过自然语言指令驱动Agent生成企业级高德地图JSAPI开发代码
• API Key通过环境变量配置: export API_KEY=your_key

错误处理

输出格式

{
  "success": true,
  "data": {
    "result": "高德地图JSAPI专业版处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "amap jsapi pro"
    }
  },
  "execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
  "error": null
}

安全注意事项

使用前请确认已阅读依赖说明章节，确保运行环境满足安全要求。

效率量化分析

差异化对比

核心功能

• 自动化执行: 企业级高德地图开发平台,支持矢量图层、实时路况、批量地理编码、自定义样式与货车导航,适合商业级地图应用开发.
• 文件处理: 支持多种文件格式的读取、解析和写入操作
• API集成: 通过标准化接口调用外部服务并处理响应
• 命令执行: 在安全沙箱中执行系统命令并收集结果
• 信息检索: 快速搜索和过滤目标数据