天地图开发指南

1、 申请天地图key

1.1注册账号

注册地址:https://uums.tianditu.gov.cn/register

1.2 申请开发者

登录后 ,申请开发者https://console.tianditu.gov.cn/api/register

1.3 创建应用

点击控制台,创建应用

天地图开发指南_第1张图片

1.4 天地图key

天地图开发指南_第2张图片

2、天地图api使用

2.1首先再vue的public文件夹下面的index.html引入天地图js

 

天地图开发指南_第3张图片

2.2在vue页面里面

天地图开发指南_第4张图片
天地图开发指南_第5张图片

2.2 给天地图加图层

天地图开发指南_第6张图片

3 、地图操作

3.1放大缩小






3.2移动地图位置并指定缩放精度

将地图中心点,移动到指定位置,同时指定缩放精度






天地图开发指南_第7张图片

3.3 地图设置指定缩放等级







3.4 设置地图不能被拖拽,两秒后开启拖拽地图







天地图开发指南_第8张图片

3.5 获取地图的可视区域







天地图开发指南_第9张图片

4、 地图参数设置

4.1设置地图中心点及缩放级别

根据指定的经度、纬度、缩放级别 设置地图中心点







天地图开发指南_第10张图片

4.2 是否允许地图双击鼠标放大、是否允许鼠标滚轮放大缩小地图、是否允许鼠标拖拽地图、是否允许键盘操作地图







5 、地图信息获取

5.1 获取地图中心点位置、获取当前缩放级别







天地图开发指南_第11张图片
天地图开发指南_第12张图片

6 、自定义图层







7、 叠加其他的WMS服务图层







天地图开发指南_第13张图片

天地图开发指南_第14张图片

8、添加基本控件

添加缩放控件、添加比例尺、添加鹰眼控件、添加版权信息、加载地图类型控件、添加符号控件







天地图开发指南_第15张图片

9 、地图右键菜单

9.1 简单添加右键菜单








天地图开发指南_第16张图片

9.2 添加带有分割线的右键菜单







天地图开发指南_第17张图片

9.3获取右键菜单的坐标







天地图开发指南_第18张图片

你可能感兴趣的:(vue,js,css,天地图,天地图开发指南)