antvis / L7

🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis engine.
https://l7.antv.antgroup.com
MIT License
3.62k stars 631 forks source link

完成L7 高德图地图底图使用文档 #1988

Open lzxue opened 10 months ago

lzxue commented 10 months ago

AntV Open Source Contribution Plan(可选)

Issue 类型

中级任务

任务介绍

新增 gaode.zh.md 文档,单独描述高德地图如何使用,重点描述 高度图 Token使用方式

参照这个文档写 https://github.com/antvis/L7/edit/master/packages/site/docs/api/map/map.zh.md,当前文档是把 Map/GaodeMAP、Mapbox 写在一个文档,现在要支持更多底图所以每个地图单独写文档 在map 目录下面会有 gaodemap.zh.md mapxboxmap.zh.md

参考说明

1112

github-actions[bot] commented 10 months ago

你要找的是不是 (You may look for issues):

  1. 74% #1989
aaa1729511481 commented 10 months ago

aaa1729511481 认领

5758703 commented 10 months ago

tigerspringboot2020 认领

5758703 commented 10 months ago

5758703 认领

lzxue commented 10 months ago

认领的同学,可以先 Fork L7 项目,然后克隆到本地跑起来

lzxue commented 10 months ago

5758703 认领

高德的暂时也被认领,可以考虑一下,百度和腾讯的问题基本差不多

aaa1729511481 commented 10 months ago

一、首先注册高德地图开发者,https://console.amap.com/dev/index 1、在应用管理中添加一个新的应用(记住Key和安全密钥) 二、在项目中找到index.html中引用高德地图 1、在script标签中 引入src="https://webapi.amap.com/loader.js" 2、创建另一个script标签,里面写入 window._AMapSecurityConfig = { securityJsCode: '第一步里的安全密钥', } 三、在所需页面引用高德地图实例 1、在所需页面创建一个id为gaodeMap的容器 2、在script标签中引用import { load } from "@amap/amap-jsapi-loader"; 3、创建初始化函数,创建高德地图的地图实例,创建地图实例时MapInstance 使用高德地图的实例 以下为简单例子 let AMap = await load({ key: "自己注册的key", version: "2.0", plugins: [ "AMap.DistrictSearch", "AMap.DistrictLayer", "AMap.TileLayer", "AMap.Polygon", "AMap.GeoJSON", "AMap.Weather", ], }) let gaodeMap = new AMap.Map('mapBox', { center: [103.82112953, 30.12207207],//中心点 zoom: 6, pitch: "30", viewMode: "2D", layers: [ new AMap.TileLayer.Satellite() // 卫星图层 ] })

scene.value = new Scene({
    id: 'gaodeMap',  //必须跟页面上的id一致
    logoVisible: false,  //是否显示LOGO
    map: new GaodeMap({
        mapInstance: gaodeMap,  //地图实例使用我们刚刚创建的高德地图的实例
        ......
    })
})
lzxue commented 10 months ago

一、首先注册高德地图开发者,https://console.amap.com/dev/index 1、在应用管理中添加一个新的应用(记住Key和安全密钥) 二、在项目中找到index.html中引用高德地图 1、在script标签中 引入src="https://webapi.amap.com/loader.js" 2、创建另一个script标签,里面写入 window._AMapSecurityConfig = { securityJsCode: '第一步里的安全密钥', } 三、在所需页面引用高德地图实例 1、在所需页面创建一个id为gaodeMap的容器 2、在script标签中引用import { load } from "@amap/amap-jsapi-loader"; 3、创建初始化函数,创建高德地图的地图实例,创建地图实例时MapInstance 使用高德地图的实例 以下为简单例子 let AMap = await load({ key: "自己注册的key", version: "2.0", plugins: [ "AMap.DistrictSearch", "AMap.DistrictLayer", "AMap.TileLayer", "AMap.Polygon", "AMap.GeoJSON", "AMap.Weather", ], }) let gaodeMap = new AMap.Map('mapBox', { center: [103.82112953, 30.12207207],//中心点 zoom: 6, pitch: "30", viewMode: "2D", layers: [ new AMap.TileLayer.Satellite() // 卫星图层 ] })

scene.value = new Scene({
    id: 'gaodeMap',  //必须跟页面上的id一致
    logoVisible: false,  //是否显示LOGO
    map: new GaodeMap({
        mapInstance: gaodeMap,  //地图实例使用我们刚刚创建的高德地图的实例
        ......
    })
})

参照这个文档写 https://github.com/antvis/L7/edit/master/packages/site/docs/api/map/map.zh.md,当前文档是把 Map/GaodeMAP、Mapbox 写在一个文档,现在要支持更多底图所以每个地图单独写文档 在map 目录下面会有 gaodemap.zh.md mapxboxmap.zh.md