(1)试设p1p2为数域证明p1: A(1,1)是一个分圆域;
点击联系发帖人
时间：2024-01-13 21:15
更新记录
1.0.3（2023-02-10）
修复打包gson不兼容问题
1.0.2（2022-07-28）
优化初始化返回速度，细分初始化参数返回，code 0初始化失败,1初始化完成，2更换底图完成，3初始化地图完全渲染完成，4更换底图完全渲染完成
1.0.1（2022-07-19）
新增LicenseString参数配置许可授权字符串
查看更多
平台兼容性
Android
Android CPU类型
iOS
适用版本区间：8.0 - 11.0
armeabi-v7a：支持，arm64-v8a：未测试，x86：未测试
×
原生插件通用使用流程：
购买插件，选择该插件绑定的项目。
在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
开发完毕后正式云打包
付费原生插件目前不支持离线打包。Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/androidiOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios
注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
注意
1.该插件使用的是arcgis 的安卓SDK，使用时需要安卓许可授权字符串，不填的话也可以使用，但是有水印。先去arcgis注册用户(注册过了的可以直接查看授权许可字符串)https://developers.arcgis.com/，授权字符串查看地址https://developers.arcgis.com/android/license-and-deployment/license/#license-string。
2.使用天地图需要申请天地图
安卓
的key(https://console.tianditu.gov.cn/api/key)。
3.mainfest.json里源码视图里app-plus下的android需要加入节点 "packagingOptions" : [ "exclude 'META-INF/DEPENDENCIES'" ]。
4.地图页用的是nvue不是vue,地图页用的是nvue不是vue,地图页用的是nvue不是vue。
5.一切操作，都要在地图初始化完成之后再调用，code等于1后执行。
6.为了减少安装包体积(兼容全部的要100多M)，所以插件里只支持armeabi-v7a（正常手机，不支持模拟器）(https://ask.dcloud.net.cn/article/36195)，也就是其他的不支持。
7.本地static文件夹下文件路径：例如/storage/emulated/0/Android/data/uni.UNICFDC688/apps/UNICFDC688/www/static/logo.png,其中uni.UNICFDC688为包名UNICFDC688为别名。不好用在前面加file://例如file:///storage/emulated/0/Android/data/uni.UNICFDC688/apps/UNICFDC688/www/static/logo.png。
plus.io.convertLocalFileSystemURL("_www/")可以直接获取到项目根目录
8.该插件为了更加方便和直观操作天地图，只集成了天地图相关底图。无法进行叠加要素图层等操作，没有离线地图功能和三维场景。如需叠加要素图层，离线地图，三维场景等功能请使用如下插件
https://ext.dcloud.net.cn/plugin?id=7078#detail
需要先引入原生插件到uniapp项目，打自定义调试基座才能调试。 详细步骤访问链接地址(https://ask.dcloud.net.cn/article/36106)
[TOC]
文档结构
类型
功能
组件和参数
初始化
事件监听
事件监听
方法
地图属性设置相关方法
方法
显示地理图形(覆盖物)相关方法
方法
弹出窗口相关
方法
标绘相关
方法
测距测面模式
方法
底图更换
方法
其他方法
方法
地理编码，逆编码等web服务API
示例
示例
初始化
初始节点和参数，注意：该节点的样式最好设置为绝对定位position: fixed;不然容易和页面滑动事件冲突吗，导致拖动地图不灵敏。
<arcgis-tdt ref="tdt" :options="options"
></arcgis-tdt>
参数
类型
说明
LicenseString
String
arcgis的安卓许可授权字符串（不填地图会有水印,授权码查看网址https://developers.arcgis.com/android/license-and-deployment/license/#license-string）
tdtkey
String
天地图的安卓key(必填，申请地址https://console.tianditu.gov.cn/api/key，申请安卓平台的key)
lng
String
初始地图中心点经度（必填）
lat
String
初始地图中心点纬度（必填）
scale
String
初始地图缩放数值，值越小地图可见范围越小，1000对应18级（必填）
type
String
底图类型（必填，1矢量 2影像 3地形）
bgcolor
String
底图背景色(rgba格式)
zindex_jztogj
String
1代表覆盖物层级在轨迹线之上
options:{
LicenseString:"runtimelite,1000,rud4449636536,none,NKMFA0PL4S0DRJE15166",//许可授权字符串，不填会有水印。需要去arcgis注册用户(注册过了的可以直接查看授权许可字符串),许可字符串查看网址https://developers.arcgis.com/android/license-and-deployment/license/#license-string
tdtkey: "0005**********a7f3c9bb", //天地图的安卓key。申请 地址 https://console.tianditu.gov.cn/api/key
lng: 121.43441135,
lat: 37.46224832,
scale: 200000,
type: 1, //1矢量 2影像 3地形。
bgcolor: "rgba(170,198,238,1)",
zindex_jztogj: 1, //1渲染图形层级在轨迹线之上
}
事件监听
一般写在onload里
地图绘制完成以及更换底图监听
地图初始化监听，一切操作都要在地图初始化完成后再进行
//code 0初始化失败,1初始化完成，2更换底图完成，3初始化地图完全渲染完成，4更换底图完全渲染完成
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('ready', function(e) {
if(e.code=="0"){
//0失败
}
if(e.code=="1"){
//code=="1"代表地图初始化完成
}
if(e.code=="2"){
//2更换底图
}
});
手动标绘回调
//返回坐标点，lng→x,lat→y,type→类型,
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('myEvent', function(e) {
});
监听点击地理图形（覆盖物）
//点击标注事件返回坐标和id
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('biaozhu', function(e) {
});
监听地图缩放变化
//监听地图缩放变化，返回缩放
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('bili', function(ret) {
console.log(ret.data)
});
监听地图可视区域中心点变化
//返回中心点坐标，缩放，以及地图旋转角度，wkid
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('move', function(ret) {
//
console.log(ret)
});
监听点击地图
//返回坐标点以及wkid
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('maptap', function(ret) {
//console.log(ret)
});
监听手离开地图
//返回坐标点以及wkid
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('mapOnUp', function(ret) {
//console.log(ret)
});
监听点击自定义气泡
注意：在导入的html中执行window.injs.wula('a');会触发该事件，其中a为参数,返回中ret.data等于a
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('mapCallout', function(ret) {
//console.log(ret)
});
监听测距测面积模式返回
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('celiang', function(ret) {
//console.log(ret)
});
方法
地图属性设置相关方法
设置地图是否禁止旋转，平移，缩放
var that=this;
that.$refs.tdt.InteractionOptions({
setRotateEnabled: "0",//旋转，1可以0不可以
setPanEnabled: "1",//平移
setZoomEnabled: "1",//缩放
}, ret => {
});
通过最大最小经纬度设置可视区域
var that = this;
that.$refs.tdt.setViewpointByxy({
xmax: 121.88147200146264,
xmin: 119.64770497285973,
ymax: 37.8225630866514,
ymin: 36.61961625279606
}, ret => {
console.log(ret)
});
设置地图选中图形颜色
var that=this;
that.$refs.tdt.selectcolor({
color: 'rgba(245,124,41,1)'
}, ret => {
console.log(ret)
});
设置地图参考比例
当feature图层或者初始加载的标绘设置随地图缩放时，图标大小受此处影响
var that=this;
that.$refs.tdt.setReferenceScale({
scale: '106026'
}, ret => {
console.log(ret)
});
设置地图视角范围
100.14.0新出的功能，可以设置地图能拖动的范围，设置时受当前缩放scale影响（感觉好用，又不完全好用。。）
var that = this;
that.$refs.tdt.setMaxExtent({
xmax: 121.88147200146264,
xmin: 119.64770497285973,
ymax: 37.8225630866514,
ymin: 36.61961625279606
}, ret => {
console.log(ret)
});
设置地图显示经纬度网格
var that=this;
that.$refs.tdt.wangge({
type: 1,// 显示类型，1经纬度，2MgrsGrid，具有覆盖全球的五个网格分辨率级别3UtmGrid, 具有一个保持相同大小的网格分辨率级别。
isVisible:1,//是否可见1可见，0不可见
lineStyle:"SOLID",//网格线样式
colorLine:"rgba(44,106,237,1)",//网格线颜色
colorText:"rgba(44,106,237,1)",//文字颜色
size:14,//文字大小
Horizontal:"left",//文字水平位置
Vertical:"bottom",//文字垂直位置*/
colorout:"rgba(255,255,255,1)",//文字轮廓颜色，填''则没有
}, ret => {
console.log(ret)
});
平移地图到某点
var that=this;
that.$refs.tdt.setViewpointCenter({
x: 121.39546912780985,
y: 37.541238297570814,
}, ret => {
console.log(ret)
});
旋转地图
var that=this;
that.$refs.tdt.setViewpointRotation({
rotation: '90'
}, ret => {
console.log(ret)
});
缩放地图
var that=this;
that.$refs.tdt.setViewpointScale({
scale: '1000'
}, ret => {
console.log(ret)
});
设置地图最小最大缩放比和背景色
var that=this;
that.$refs.tdt.setscaleandbgcolor({
color: "rgba(201,75,250,1)",//背景色
minscale: "1000000", //0代表不限制
maxscale: "1000" //0代表不限制
}, ret => {
console.log(ret)
});
截取地图可视区域为图片
var that = this;
var name='img'+new Date().getTime()+'.png';
that.$refs.tdt.screenShot({
isSound:1,//是否有截屏声音，1有，0没有
url: "/storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/doc/jieping", //保存路径
name:name,//文件名字
}, ret => {
console.log(ret)
if(ret.code==1){
//保存到相册
uni.saveImageToPhotosAlbum({
filePath:"/storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/doc/jieping"+name,
success: function () {
console.log('save success');
uni.showToast({
title: '保存成功!',
duration: 2000
});
}
});
}
});
获取地图缩放比例
var that = this;
that.$refs.tdt.bilichi({}, ret => {
console.log(ret.data)
});
获取地图中心点坐标
var that = this;
that.$refs.tdt.getcenter({}, ret => {
console.log(ret)
});
设置地图中心点
参数
类型
说明
lng(float)
String
经度
lat(float)
String
纬度
scale(float)
String
缩放（值越小，地图等级越高，显示的越大）
var that=this;
that.$refs.tdt.clearTel(121.350633,
37.368849,3000);
定位地图到图形范围
var that=this;
that.$refs.tdt.locateGeometry({
type: '1',//1线，2多边形
bili: 1,//缩放比例
arr: [{
"x": 121.34813522402263,
"y": 37.36786674750549
}],//坐标数组
}, ret => {});
在地图显示设备位置
参数
类型
说明
type
String
显示样式
NAVIGATION
String
导航模式箭头
RECENTER
String
显示在地图中心
COMPASS_NAVIGATION
String
显示手机朝向
STOP
String
停止
that.$refs.tdt.shebeiwz({
type: 1,//1NAVIGATION 2 RECENTER 3 COMPASS_NAVIGATION 4停止定位
url:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-ca89506a-7051-4221-9887-9009974d532a/6258c05a-0eef-4025-b6dd-9ad734a84c20.png",//定位图，不填时用系统默认的图。本地地址示例：plus.io.convertLocalFileSystemURL("_www/")+"static/dingwei.png"
width:20,//定位图宽
height:20,//定位高
isqianjin:0,//移动时不显示前进方向
}, ret => {
console.log(ret)
//ret.code==0说明没提前授权位置，需要再次调用
});
释放地图资源
var that=this;
that.$refs.tdt.shifang({
}, ret => {
});
显示地理图形(覆盖物)相关方法
显示点线面，图形，文字，图片等
点
var that=this;
that.$refs.tdt.chushidian({
id: 'dian',//id
zindex:"1",//zindex
colorin: 'rgba(245,124,41,0.6)',//内部颜色
colorout: 'rgba(23,23,23,0.6)',//边线颜色
size: 10,//点大小
lng: 121.350633,
lat:37.368849,
size2: 10,//边线宽度
}, ret => {
});
批量加载多个点
var that=this;
that.$refs.tdt.multipoint({
type:1,//1图片渲染点 2点
colorin:"rgba(255,255,255,1)",//点内部色
colorout:"rgba(0,0,0,1)",//点边色
size:10,//点大小
size2:2,//点边线宽度
arr:[{lng:121,lat:37}],//点坐标数组
tuopt: 1,//图透明度
zindex:"1",
tuheight: 20,//图高
tuwidth: 20,//图宽
tuangle: 0,//图角度
offx:0,//图片x轴偏移
offy:0,//图片y轴偏移
url: plus.io.convertLocalFileSystemURL("_www/")+'static/weizhi.png',//图片地址
id: "qj", //图层id，生成的图标symbol的id为"qj"+数组index例如，qj0,qj1...
//isscale: 1
}, ret => {
console.log(ret)
// ret.index
if (ret.code == 1) {
//完成
} else {
//失败
}
});
线
//标注地图上的线
var that=this;
var arr = [{
"x": 121.34813522402263,
"y": 37.36786674750549
}, {
"x": 121.35175659153936,
"y": 37.37246881942493
}]
that.$refs.tdt.chushixian({
id: 'xian',
isdouble:1,//是否是双色间隔的线，例如黑白线
zindex:"1",
colorout: "rgba(0,0,0,1)",//双色线中另一种颜色
colorin: "rgba(255,255,255,1)",//colorin图形内部填充色
lineStyle:"SOLID",//线样式
SOLID ，DASH，LONG_DASH等
isarrow:0,//isarrow是否带箭头 1带0不带
size: 2,//线宽度
arr: arr//线坐标数组
}, ret => {
});
多边形
//标注地图上的线和多边形
var that=this;
var arr = [{
x: 121.35353,
y: 37.368381
}, {
x: 121.355268,
y: 37.371144
}, {
x: 121.349496,
y: 37.366113
}]
that.$refs.tdt.chushiduobian({
id: 'mian',
zindex:"1",
lineStyle:"SOLID",//边线样式
fillStyle:"SOLID",//填充样式
colorin: 'rgba(245,124,41,0.6)',//colorin图形内部填充色
colorout: 'rgba(23,23,23,0.6)',//colorout边线的颜色
size: 2,//size 边线宽度
arr: arr//坐标数组
}, ret => {
});
文字
//标注地图上的文字
var that=this;
that.$refs.tdt.chushizi({
id: 'zi',
zindex: "1",
text: "初始字",//文字内容
colorin: 'rgba(0,0,0,1)',//字颜色
bgcolor: 'rgba(0,0,0,0.6)',//背景色
size: 16,//字大小
offx: 0,//偏移x
offy: 8,//偏移y
lng: 121.354174,
lat: 37.368356,
angle:20,//旋转角度
fontWeight:"NORMAL",
AngleAlignment:"MAP",//定义符号的旋转是相对于地图MAP还是相对于用户的屏幕SCREEN
haloColor:'rgba(255,255,255,1)',//光晕颜色
haloWidth:3,//光晕宽度
outlineColor:'rgba(44,139,227,0.6)',//轮廓颜色
outlineWidth:"1",//轮廓宽度
}, ret => {
});
图形
//标注地图上的图。图片格式支持BMP、ICO、JPEG 和 PNG，动图GIF不支持
/*如果是本地图片，路径格式如下，其中uni.UNICFDC688为包名__UNI__CFDC688为别名，static代表本地static文件夹
/storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/www/static/logo.png*/
var that=this;
that.$refs.tdt.chushitu({
id: 'tu',
tuopt: 1,//图透明度
zindex:"1",
tuheight: 20,//图高
tuwidth: 20,//图宽
tuangle: 0,//图角度
offx:0,//x轴偏移
offy:10,//y轴偏移
url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-ca89506a-7051-4221-9887-9009974d532a/a63eb1dc-f91b-44c3-9ae2-f5a184c9057a.png",
lng: 121.354174,
lat: 37.368356,
AngleAlignment:"MAP",//定义符号的旋转是相对于地图MAP还是相对于用户的屏幕SCREEN
}, ret => {
});
缓冲区域
var that=this;
that.$refs.tdt.bufferGeodetic({
x:121.34770978780794,//中心点x
y: 37.368864677988689,//中心点y
id: "huanchong",
lineStyleout:"SOLID",//外边线样式
colorout:"rgba(0,0,0,1)",//外边线颜色
lineWidth:"1",//外边线宽
colorin:"rgba(46,247,170,0.6)",//填充色
length:50,//缓冲区域半径,单位：米
type:"GEODESIC",//大地线类型，GEODESIC为测地线
zindex:2,
}, ret => {
});
标注地图上简单的几何图形
style
说明
CIRCLE
圆圈
CROSS
十字 (+)
DIAMOND
菱形（◇）
SQUARE
正方形
TRIANGLE
三角形
X
对角十字 (X)
var that=this;
that.$refs.tdt.simpleGraphic({
id: 'simpleGraphic',
zindex:"1",
colorin: 'rgba(245,124,41,0.6)',//颜色
style:"X",
size: 40,//大小
lng:121.350633,
lat:37.368849
}, ret => {
});
带轨迹的线
传一组坐标点，在地图上绘制一条可以带方向的线。慎用，该线无法删除和修改。
参数
类型
说明
id
String
id
colorin
String
线颜色
size
String
线粗细
arr
String
坐标数组
//初始加载地图上的带箭头的线
var arrlnglat = [{
"lng": 121.34700300649354,
"lat": 37.37331364673314
},{
"lng": 121.34787161612486,
"lat": 37.37091227102716
}, {
"lng": 121.34909698771531,
"lat": 37.37078196960634
}, {
"lng": 121.35002896047428,
"lat": 37.37102885631708
}, {
"lng": 121.35027058304142,
"lat": 37.37191352702511
}]
var arr = []
for (var i = 0; i < arrlnglat.length; i++) {
arr.push({
x: that.lngmkt(arrlnglat[i]).x,
y: that.lngmkt(arrlnglat[i]).y
})
}
console.log(arr)
//colorin图形内部填充色
colorout边线的颜色
size 边线宽度
arr墨卡托数组
that.$refs.tdt.chushigj({
id: 'chushigj',
colorin: 'rgba(245,124,41,1)',
size: 10,
arr: arr
}, ret => {
});
可更新的轨迹线
每次调用都会往轨迹线里增加坐标点。慎用，该线无法删除和修改。
参数
类型
说明
id
String
id
colorin
String
线颜色
size
String
线粗细
isjt
String
1显示箭头0不显示
lng
String
X
lat
String
Y
var that=this;
that.$refs.tdt.guiji({
id: 'guiji',
isjt: 1,
colorin: 'rgba(245,124,41,1)',
size: 10,
lng: 121,
lat:37
}, ret => {});
清空轨迹线
var that=this;
that.$refs.tdt.clearGuiji({
}, ret => {
console.log(ret)
});
设置显示的地理图形(覆盖物)整体是否根据地图缩放，整体透明度，是否可见
注意：不包括手绘的图形
//设置是否选中某标注
var that=this;
that.$refs.tdt.setGraphic({
isscale: 1,//1遵循地图参考比例
opacity:0.5,//整体透明度
isvisible:1,//1可见0隐藏
}, ret => {
console.log(ret)
});
设置显示图形选中（id)
参数
类型
说明
id
String
初始标注的id
isselect
String
1选中0不选中
//设置是否选中某标注
var that=this;
that.$refs.tdt.selectGraphic_id({
id: 'mian',
isselect: 1,
}, ret => {
console.log(ret)
});
清空显示图形选中状态
var that=this;
that.$refs.tdt.clearGraphicSelection({
}, ret => {
console.log(ret)
});
根据id删除初始加载的点线面等覆盖物
删除对象不包括文本标注（callout)
//删除标注传index
var that=this;
that.$refs.tdt.shanbiaozhu_id({
id: "simpleGraphic"
}, ret => {
});
删除id中包含某字符串的覆盖物
删除对象不包括文本标注（callout)
//删除标注传index
var that=this;
that.$refs.tdt.shanbiaozhu_ids({
id: "simpleGraphic"
}, ret => {
});
设置id中包含某字符串的覆盖物是否可见
不包括文本标注（callout)
var that=this;
that.$refs.tdt.visible_ids({
isVisible:0,//1可见0隐藏
id:"aa",
}, ret => {
console.log(ret)
});
更新覆盖物(初始加载的点，图，文字)位置
var that=this;
that.$refs.tdt.updateChushi({
x: 121.350633,//新位置X
y: 37.368849,//新位置y
id: "tu", //图形id
}, ret => {
console.log(ret)
});
清空覆盖物
删除对象不包括文本标注（callout)
var that = this;
that.$refs.tdt.clearchushi({}, ret => {});
弹出窗口相关
弹窗标注（callout)
文本样式:
1当url和content为空时，title会自适应居中显示。
2url为空时，不显示图片。
3content为空时图片会宽度百分百，高度自适应。
更丰富的样式可以使用自定义弹窗（API在下面）
点击文本标注事件在回调函数中，ret返回id和坐标
参数
类型
说明
id
String
id
colortitle
String
标题颜色
colorcontent
String
内容颜色
title
String
标题
bgcolor
String
整体背景色
borderwidth
String
边宽
cornerradius
String
整体圆角
bordercolor
String
边颜色
content
String
内容
sizetitle
String
标题文字大小
sizecontent
String
内容文字大小
url
String
图片路径
lng
String
x
lat
String
y
leaderPosition
String
气泡相对坐标点的位置，AUTOMATIC，LEFT_MIDDLE，LOWER_MIDDLE，RIGHT_MIDDLE，UPPER_MIDDLE或者空
isAnimateCallout
String
是否有弹出气泡动画，1有0没有
isRecenterMap
String
弹出气泡时，是否以改点作为地图中心点1是0不是
//标注地图上的文本
//这里url要用本地路径因此如果是网络图片要用uni.getImageInfo获取一下
/*如果是本地图片，路径格式如下，其中uni.UNICFDC688为包名__UNI__CFDC688为别名file:///storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/www/static/logo.png*/
var url="";
var that=this;
that.$refs.tdt.wzbiaozhu({
id: 'wb',
colortitle: 'rgba(245,124,41,0.6)',
colorcontent: 'rgba(23,23,23,0.6)',
title:"安卓天地图",
bgcolor:"rgba(255,255,255,1)",
borderwidth:2,
cornerradius:6,
bordercolor:"rgba(0,0,0,1)",
content:"包括展示地图，切换底图（矢量，影像，地形），标注地图（点线面，文字，图形等）返回坐标等功能",
sizetitle: 14,
sizecontent: 12,
url:"file:///storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/www/static/logo.png",
lng: 121.350633,
lat: 37.368849，
leaderPosition:"",
isAnimateCallout:0,
isRecenterMap:0,
},ret => {
console.log(ret)
});
自定义弹窗标注
内容为传入的html文件，或者在线网址。
注意：使用默认列表样式时，url可以传空字符串并且不需要自己创建html文件。气泡内部的点击事件仍旧需要从监听mapCallout中返回。
var obg={
arr:[{
name: "lng",
value:"121"
},
{
name: "lat",
value: "37"
},
]
}
var str = "?obg=" + encodeURIComponent(JSON.stringify(obg));
var url="file:///storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/www/static/index.html"
this.$refs.tdt.wenbenHtml({
isdefault:1,//是否使用默认列表样式，1使用,0不使用
defaultStr:str,//使用默认列表样式要传的字符串，需要encodeURIComponent()处理一下,格式必须和上面一致
bgcolor:"rgba(255,255,255,1)",//气泡背景色
borderwidth:2,//气泡边宽
cornerradius:6,//圆角
bordercolor:"rgba(0,0,0,1)",//边线颜色
width: 300,//宽度
height: 91,//高度
url:url+str,//本地html地址，isdefault为0时必填
lng:121.35183106431532,//气泡x坐标
lat:37.366655383836502,//气泡y坐标
leaderPosition:"",//气泡相对坐标点的位置
isAnimateCallout:0,//是否有弹出气泡动画，1有0没有
isRecenterMap:0,//弹出气泡时，是否以改点作为地图中心点1是0不是
}, ret => {
console.log(ret)
})
删除弹窗气泡
var that = this;
that.$refs.tdt.shanwenben({}, ret => {});
标绘相关
点击地图手绘点线面，图形等
点
var that = this;
that.$refs.tdt.qudian({
colorin: 'rgba(245,124,41,0.6)',//填充色
colorout: 'rgba(23,23,23,0.6)',//边线颜色
size: 10,//点大小
size2: 2,//边线宽
isduo:1,//1标记多个点，0标记1个点
}, ret => {});
线
可用来配合其他API进行测距
var that = this;
that.$refs.tdt.xian({
isdouble:1,//1双色线，0单色
colorin: 'rgba(255,255,255,1)',//线颜色
colorout: 'rgba(0,0,0,1)',//线第一个点边色，双色线另一色
size: 6//线宽
}, ret => {});
曲线(自由绘制、画笔)
var that = this;
that.$refs.tdt.quxian({
colorin: 'rgba(245,124,41,1)',//颜色不能设置半透明，否则影像效果
size: 10
}, ret => {});
面
可用来配合其他API进行测面积
var that = this;
that.$refs.tdt.mian({
colorin: 'rgba(245,124,41,0.6)',
colorout: 'rgba(23,23,23,0.6)',
size: 3,//边线宽度
}, ret => {});
文字
var that = this;
that.$refs.tdt.zi({
colorin: 'rgba(245,124,41,0.6)',
text: '乌拉',
size: 16
}, ret => {});
图片
var that = this;
/*如果是本地图片，路径格式如下，其中uni.UNICFDC688为包名__UNI__CFDC688为别名static对应本地static文件夹
图片格式支持BMP、ICO、JPEG 和 PNG，动图GIF不支持
/storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/www/static/logo.png*/
that.$refs.tdt.tu({
tuopt: 1,
tuheight: 20,
tuwidth: 20,
tuangle: 0,
url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-ca89506a-7051-4221-9887-9009974d532a/a63eb1dc-f91b-44c3-9ae2-f5a184c9057a.png"
}, ret => {});
圆形
var that = this;
that.arr = []
that.$refs.tdt.yuan({
colorin: 'rgba(245,124,41,0.6)',
colorout: 'rgba(23,23,23,0.6)',
size: 3
}, ret => {});
矩形
var that = this;
that.$refs.tdt.juxing({
colorin: 'rgba(245,124,41,0.6)',
colorout: 'rgba(23,23,23,0.6)',
size: 3
}, ret => {});
撤掉上一步绘制的坐标点
var that = this;
that.$refs.tdt.chexiao({
}, ret => {
});
重置点击事件，结束绘图状态
var that = this;
that.$refs.tdt.wancheng({
}, ret => {});
删除某组绘制图形
参数
类型
说明
type
int
type 取值：
1 点
2 线
3 曲线
4 文字
5 图片
6 圆形
7 矩形
8 面
var that = this;
that.$refs.tdt.shanhuizhi({
type: '1',
}, ret => {
console.log(ret)
});
混合绘图编辑器
可绘制点线面等
var that = this;
var arr= ['POINT', 'POLYLINE', 'POLYGON', 'RECTANGLE','FREEHAND_LINE' ,'FREEHAND_POLYGON','MULTIPOINT']
that.$refs.tdt.sketchEditor({
isnew: 1,//1直接重新编辑，0加载初始加载的点线面进行编辑
id:"aa_xian",//加载初始加载的点线面id
type:arr[0],
colorpoint:'rgba(245,124,41,1)',//节点填充色，顶点填充，中间点填充
colorpointoutline:'rgba(245,124,41,1)',//节点外边线色
pointsize:10,//节点大小
pointoutlinesize:2,//节点边线宽度
colorpointmid:'rgba(255,255,255,0.6)',//中间点填充色，顶点填充，中间点填充
colorpointoutlinemid:'rgba(0,0,0,1)',//中间点外边线色
pointsizemid:6,//中间点大小
pointoutlinesizemid:1,//中间点边线宽度
fillStyle:"SOLID",//填充样式
colorfill: 'rgba(245,124,41,0.6)',//面填充色
colorfilloutline: 'rgba(245,124,41,1)',//面外边线颜色
filloutlinesize:2,//面边线宽度
lineStyle:"SOLID",//线样式
colorline:'rgba(245,124,41,1)',//线填充色
linesize:6,//线宽度
fz_lineStyle:"DASH",//拖拽线样式
fz_colorline:'rgba(5,8,8,1)',//拖拽线填充色
fz_linesize:1,//拖拽线宽度
//id: "arcGISTiledLayer",
}, ret => {
console.log(ret)
});
混合绘图编辑器的撤销，结束与清空
var that = this;
that.$refs.tdt.edsketchEditor({
type:1,//1撤销2结束,3清空
}, ret => {
console.log(ret)
});
测距测面模式
测距模式
var that = this;
that.$refs.tdt.cejuli({
colordian: "rgba(237,131,62,1)",//初始点颜色
size: "10",//初始点大小
isdouble:"1",//是否是双色线 1是 0不是
colorout: "rgba(255,255,255,1)",//线主颜色
colorout2: "rgba(0,0,0,1)",//线副颜色
size2: "2",//边线宽度
fontSize: "14",//字大小
fontColor: "rgba(0,0,0,1)",//字颜色
fontColorw: "rgba(255,255,255,1)",//字轮廓色
}, ret => {
});
测面积模式
var that = this;
that.$refs.tdt.cemianji({
colordian: "rgba(237,131,62,1)",//初始点颜色
size: "10",//初始点大小
isdouble:"1",//是否是双色线 1是 0不是
colorout: "rgba(255,255,255,1)",//边线主颜色
colorout2: "rgba(0,0,0,1)",//边线副颜色
size2: "2",//边线宽度
colorin: "rgba(255,255,255,0.5)",//内部填充色
fontSize: "14",//字大小
fontColor: "rgba(0,0,0,1)",//字颜色
fontColorw: "rgba(255,255,255,1)",//字轮廓色
}, ret => {
});
撤销一步
var that = this;
that.$refs.tdt.chexiaoCeliang({
}, ret => {
});
清空所有测量标记
var that = this;
that.$refs.tdt.qingkongCeliang({
}, ret => {
});
重置点击地图事件（结束测量）
var that = this;
that.$refs.tdt.wancheng({
}, ret => {});
底图更换
更换底图
var that = this;
that.$refs.tdt.baseMap({
type: 1,//1矢量 2影像 3地形
}, ret => {
console.log(ret)
});
其他方法
计算两点角度
var that=this;
//以正北为初始方向,逆时针计算
that.$refs.tdt.getAngle({
x1: 121.350633,
y1: 37.368849,
x2: 121.34813522402263,
y2:37.36786674750549,
}, ret => {
console.log(ret.angle)
});
计算点离线的最短距离，最近点
var that=this;
var arr =
[{
"x": 121.34813522402263,
"y": 37.36786674750549
}, {
"x": 121.34944894207166,
"y": 37.37032580016095
}]
that.$refs.tdt.pointToLineDistance({
x: 121.350633,//点x
y: 37.368849,//点y
arr:arr//线坐标数组
}, ret => {
//返回最近距离，单位米,distance→距离,x,y→最近点坐标
console.log(ret)
});
测量两点之间的距离
//两点距离
var that = this;
that.$refs.tdt.cedi_Distance({
lng_start: "121.35047446099691",//
lat_start:"37.369224176417305",
lng_end:"121.35023110911139",
lat_end:"37.368745145903908",
}, ret => {
console.log(ret)
uni.showToast({
title: ret.distance+'米',
icon:'none',
duration: 3000
});
});
//线段总长度
var that = this;
that.$refs.tdt.cedi_Distance2({
arr: [{x:1,y:1}],// 坐标数组
}, ret => {
console.log(ret)
uni.showToast({
title: ret.distance+'米',
icon:'none',
duration: 3000
});
});
测量多边形的面积
var that = this;
//arr为图形坐标数组（顺序不能乱）
that.$refs.tdt.cedi_size({
arr:[{"x":121.35080621301245,"y":37.369140827227803},
{"x":121.35093685634132,"y":37.369104187029819},
{"x":121.3508870016457,"y":37.369012586534858},
{"x":121.35077047380294,"y":37.369055233322676},
]
}, ret => {
console.log(ret)
uni.showToast({
title: ret.size+'平方米',
icon:'none',
duration: 3000
});
});
获取图形中心点
参数
类型
说明
type
String
1线2多边形
arr
arr
数组
var that = this;
//标注地图上的线
var arrlnglat = [{
"x": 121.34813522402263,
"y": 37.36786674750549
}, {
"x": 121.34944894207166,
"y": 37.37032580016095
}, {
"x": 121.35250852226477,
"y": 37.36997549311373
}]
that.$refs.tdt.getCenterPoint({
type: "1",
arr:arrlnglat,
}, ret => {
console.log(ret)
});
手机定位相关
持续获取手机位置
var that=this;
const dingwei = uni.requireNativePlugin('arcgis-tdt-dingwei');
dingwei.dingwei({
type: "dingwei",
}, ret => {
console.log(ret)
//返回经纬度（wgs84)和速度
});
结束持续获取位置
const dingwei = uni.requireNativePlugin('arcgis-tdt-dingwei');
dingwei.jieshu();
墨卡托与经纬度之间的转换JS方法
经纬度转墨卡托
//经纬度转墨卡托
lngmkt(poi){
var mercator = {};
var earthRad = 6378137.0;
// console.log("mercator-poi",poi);
mercator.x = poi.lng * Math.PI / 180 * earthRad;
var a = poi.lat * Math.PI / 180;
mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
// console.log("mercator",mercator);
return mercator; //[12727039.383734727, 3579066.6894065146
},
墨卡托转经纬度
//墨卡托转经纬度
mktlng(poi) {
var lnglat = {};
lnglat.lng = poi.x / 20037508.34 * 180;
var mmy = poi.y / 20037508.34 * 180;
lnglat.lat = 180 / Math.PI * (2 * Math.atan(Math.exp(mmy * Math.PI / 180)) - Math.PI / 2);
if (parseInt(lnglat.lng) != 0) {
return lnglat;
} else {
return {
lng: poi.x,
lat: poi.y
};
}
},
不同wkid坐标转换
const dingwei = uni.requireNativePlugin('arcgis-map-dingwei');
dingwei.wkidzhuan({
x: that.lng,//转换前的X坐标
y:that.lat,//转换前的y坐标
wkidold:that.wkid,//转换前的wkid
wkidnew:that.wkid2//转换后的wkid
}, ret => {
console.log(ret)
});
地理编码，逆编码等web服务API
这个只写一个地理编码的示例，更多web服务API直接去官网看，直接发请求即可。API地址http://lbs.tianditu.gov.cn/server/guide.html
var kwd=JSON.stringify({"keyWord":"北京大学"})
uni.request({
url: "http://api.tianditu.gov.cn/geocoder?ds="+kwd+"&tk="+that.options.tdtkey,
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'GET',
success: res => {
console.log(res);
if(res.data.msg=='ok'){
that.$refs.tdt.clearchushi({}, ret => {});
that.$refs.tdt.clearTel(res.data.location.lon, res.data.location.lat,20000);
that.$refs.tdt.chushitu({
id: res.data.location.keyWord,
tuopt: 1,
zindex:"1",
tuheight: 30,
tuwidth: 30,
tuangle: 0,
offx:0,//x轴偏移
offy:0,//y轴偏移
url: plus.io.convertLocalFileSystemURL("_www/")+'static/dwhui.png',
lng:res.data.location.lon,
lat: res.data.location.lat
}, ret => {
});
}
},
fail: () => {
},
complete: () => {
}
});
示例代码
<template>
<view>
<arcgis-tdt ref="telText" :options="options" :style="{width:kuan+'px',height:gao+'px'}"
class="ditu"></arcgis-tdt>
</view>
</template>
<script>
export default {
data() {
return {
sswzid: "",
kuan: 300,
gao: 400,
dh: 44,
iStatusBarHeight: 25,
iszk: 0,
arr: [],
options: {
LicenseString:"runtimelite,1000,rud4449636536,none,NKMFA0PL4S0DRJE15166",//许可授权字符串，需要去arcgis注册用户(注册过了的可以直接查看授权许可字符串),许可字符串查看网址https://developers.arcgis.com/android/license-and-deployment/license/#license-string
tdtkey: "000*******6a7f3c9bb", //type为0则不用申请，详情见文档 。申请 地址 https://console.tianditu.gov.cn/api/key
lng: 121.43441135,
lat: 37.46224832,
scale: 200000,
type: 1, //1矢量 2影像 3地形。
bgcolor: "rgba(170,198,238,1)",
zindex_jztogj: 1, //1渲染图形层级在轨迹线之上
},
}
},
onLoad() {
//#ifdef APP-PLUS
uni.showLoading({
});
//#endif
var kuan = 375
var gao = 667
var that = this;
uni.getSystemInfo({
success: function(res) {
that.kuan = res.windowWidth
that.gao = res.windowHeight + 1
}
});
that.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
var globalEvent = uni.requireNativePlugin('globalEvent');
//如果用到天地图，也要先设置天地图的key
//监听的是所有底图图层，code=="1"代表地图初始化完成,0失败，2更换底图
globalEvent.addEventListener('ready', function(e) {
if (e.code == "0") {
uni.showToast({
title: "地图初始化失败",
icon: 'none',
duration: 2000
});
setTimeout(function() {
uni.hideLoading()
uni.navigateBack();
}, 2000)
}
if (e.code == "1") {
uni.hideLoading()
}
});
},
methods: {}
}
</script>
<style>
.ditu {
position: fixed;
left: 0;
top: 0px;
width: 400px;
height: 400px;
z-index: 10;
}
</style>
}
1.0.3（2023-02-10）
修复打包gson不兼容问题
1.0.2（2022-07-28）
优化初始化返回速度，细分初始化参数返回，code 0初始化失败,1初始化完成，2更换底图完成，3初始化地图完全渲染完成，4更换底图完全渲染完成
1.0.1（2022-07-19）
新增LicenseString参数配置许可授权字符串
查看更多
平台兼容性
Android
Android CPU类型
iOS
适用版本区间：8.0 - 11.0
armeabi-v7a：支持，arm64-v8a：未测试，x86：未测试
×
原生插件通用使用流程：
购买插件，选择该插件绑定的项目。
在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
开发完毕后正式云打包
付费原生插件目前不支持离线打包。Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/androidiOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios
注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
注意
1.该插件使用的是arcgis 的安卓SDK，使用时需要安卓许可授权字符串，不填的话也可以使用，但是有水印。先去arcgis注册用户(注册过了的可以直接查看授权许可字符串)https://developers.arcgis.com/，授权字符串查看地址https://developers.arcgis.com/android/license-and-deployment/license/#license-string。
2.使用天地图需要申请天地图
安卓
的key(https://console.tianditu.gov.cn/api/key)。
3.mainfest.json里源码视图里app-plus下的android需要加入节点 "packagingOptions" : [ "exclude 'META-INF/DEPENDENCIES'" ]。
4.地图页用的是nvue不是vue,地图页用的是nvue不是vue,地图页用的是nvue不是vue。
5.一切操作，都要在地图初始化完成之后再调用，code等于1后执行。
6.为了减少安装包体积(兼容全部的要100多M)，所以插件里只支持armeabi-v7a（正常手机，不支持模拟器）(https://ask.dcloud.net.cn/article/36195)，也就是其他的不支持。
7.本地static文件夹下文件路径：例如/storage/emulated/0/Android/data/uni.UNICFDC688/apps/UNICFDC688/www/static/logo.png,其中uni.UNICFDC688为包名UNICFDC688为别名。不好用在前面加file://例如file:///storage/emulated/0/Android/data/uni.UNICFDC688/apps/UNICFDC688/www/static/logo.png。
plus.io.convertLocalFileSystemURL("_www/")可以直接获取到项目根目录
8.该插件为了更加方便和直观操作天地图，只集成了天地图相关底图。无法进行叠加要素图层等操作，没有离线地图功能和三维场景。如需叠加要素图层，离线地图，三维场景等功能请使用如下插件
https://ext.dcloud.net.cn/plugin?id=7078#detail
需要先引入原生插件到uniapp项目，打自定义调试基座才能调试。 详细步骤访问链接地址(https://ask.dcloud.net.cn/article/36106)
[TOC]
文档结构
类型
功能
组件和参数
初始化
事件监听
事件监听
方法
地图属性设置相关方法
方法
显示地理图形(覆盖物)相关方法
方法
弹出窗口相关
方法
标绘相关
方法
测距测面模式
方法
底图更换
方法
其他方法
方法
地理编码，逆编码等web服务API
示例
示例
初始化
初始节点和参数，注意：该节点的样式最好设置为绝对定位position: fixed;不然容易和页面滑动事件冲突吗，导致拖动地图不灵敏。
<arcgis-tdt ref="tdt" :options="options"
></arcgis-tdt>
参数
类型
说明
LicenseString
String
arcgis的安卓许可授权字符串（不填地图会有水印,授权码查看网址https://developers.arcgis.com/android/license-and-deployment/license/#license-string）
tdtkey
String
天地图的安卓key(必填，申请地址https://console.tianditu.gov.cn/api/key，申请安卓平台的key)
lng
String
初始地图中心点经度（必填）
lat
String
初始地图中心点纬度（必填）
scale
String
初始地图缩放数值，值越小地图可见范围越小，1000对应18级（必填）
type
String
底图类型（必填，1矢量 2影像 3地形）
bgcolor
String
底图背景色(rgba格式)
zindex_jztogj
String
1代表覆盖物层级在轨迹线之上
options:{
LicenseString:"runtimelite,1000,rud4449636536,none,NKMFA0PL4S0DRJE15166",//许可授权字符串，不填会有水印。需要去arcgis注册用户(注册过了的可以直接查看授权许可字符串),许可字符串查看网址https://developers.arcgis.com/android/license-and-deployment/license/#license-string
tdtkey: "0005**********a7f3c9bb", //天地图的安卓key。申请 地址 https://console.tianditu.gov.cn/api/key
lng: 121.43441135,
lat: 37.46224832,
scale: 200000,
type: 1, //1矢量 2影像 3地形。
bgcolor: "rgba(170,198,238,1)",
zindex_jztogj: 1, //1渲染图形层级在轨迹线之上
}
事件监听
一般写在onload里
地图绘制完成以及更换底图监听
地图初始化监听，一切操作都要在地图初始化完成后再进行
//code 0初始化失败,1初始化完成，2更换底图完成，3初始化地图完全渲染完成，4更换底图完全渲染完成
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('ready', function(e) {
if(e.code=="0"){
//0失败
}
if(e.code=="1"){
//code=="1"代表地图初始化完成
}
if(e.code=="2"){
//2更换底图
}
});
手动标绘回调
//返回坐标点，lng→x,lat→y,type→类型,
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('myEvent', function(e) {
});
监听点击地理图形（覆盖物）
//点击标注事件返回坐标和id
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('biaozhu', function(e) {
});
监听地图缩放变化
//监听地图缩放变化，返回缩放
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('bili', function(ret) {
console.log(ret.data)
});
监听地图可视区域中心点变化
//返回中心点坐标，缩放，以及地图旋转角度，wkid
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('move', function(ret) {
//
console.log(ret)
});
监听点击地图
//返回坐标点以及wkid
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('maptap', function(ret) {
//console.log(ret)
});
监听手离开地图
//返回坐标点以及wkid
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('mapOnUp', function(ret) {
//console.log(ret)
});
监听点击自定义气泡
注意：在导入的html中执行window.injs.wula('a');会触发该事件，其中a为参数,返回中ret.data等于a
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('mapCallout', function(ret) {
//console.log(ret)
});
监听测距测面积模式返回
var globalEvent = uni.requireNativePlugin('globalEvent');
globalEvent.addEventListener('celiang', function(ret) {
//console.log(ret)
});
方法
地图属性设置相关方法
设置地图是否禁止旋转，平移，缩放
var that=this;
that.$refs.tdt.InteractionOptions({
setRotateEnabled: "0",//旋转，1可以0不可以
setPanEnabled: "1",//平移
setZoomEnabled: "1",//缩放
}, ret => {
});
通过最大最小经纬度设置可视区域
var that = this;
that.$refs.tdt.setViewpointByxy({
xmax: 121.88147200146264,
xmin: 119.64770497285973,
ymax: 37.8225630866514,
ymin: 36.61961625279606
}, ret => {
console.log(ret)
});
设置地图选中图形颜色
var that=this;
that.$refs.tdt.selectcolor({
color: 'rgba(245,124,41,1)'
}, ret => {
console.log(ret)
});
设置地图参考比例
当feature图层或者初始加载的标绘设置随地图缩放时，图标大小受此处影响
var that=this;
that.$refs.tdt.setReferenceScale({
scale: '106026'
}, ret => {
console.log(ret)
});
设置地图视角范围
100.14.0新出的功能，可以设置地图能拖动的范围，设置时受当前缩放scale影响（感觉好用，又不完全好用。。）
var that = this;
that.$refs.tdt.setMaxExtent({
xmax: 121.88147200146264,
xmin: 119.64770497285973,
ymax: 37.8225630866514,
ymin: 36.61961625279606
}, ret => {
console.log(ret)
});
设置地图显示经纬度网格
var that=this;
that.$refs.tdt.wangge({
type: 1,// 显示类型，1经纬度，2MgrsGrid，具有覆盖全球的五个网格分辨率级别3UtmGrid, 具有一个保持相同大小的网格分辨率级别。
isVisible:1,//是否可见1可见，0不可见
lineStyle:"SOLID",//网格线样式
colorLine:"rgba(44,106,237,1)",//网格线颜色
colorText:"rgba(44,106,237,1)",//文字颜色
size:14,//文字大小
Horizontal:"left",//文字水平位置
Vertical:"bottom",//文字垂直位置*/
colorout:"rgba(255,255,255,1)",//文字轮廓颜色，填''则没有
}, ret => {
console.log(ret)
});
平移地图到某点
var that=this;
that.$refs.tdt.setViewpointCenter({
x: 121.39546912780985,
y: 37.541238297570814,
}, ret => {
console.log(ret)
});
旋转地图
var that=this;
that.$refs.tdt.setViewpointRotation({
rotation: '90'
}, ret => {
console.log(ret)
});
缩放地图
var that=this;
that.$refs.tdt.setViewpointScale({
scale: '1000'
}, ret => {
console.log(ret)
});
设置地图最小最大缩放比和背景色
var that=this;
that.$refs.tdt.setscaleandbgcolor({
color: "rgba(201,75,250,1)",//背景色
minscale: "1000000", //0代表不限制
maxscale: "1000" //0代表不限制
}, ret => {
console.log(ret)
});
截取地图可视区域为图片
var that = this;
var name='img'+new Date().getTime()+'.png';
that.$refs.tdt.screenShot({
isSound:1,//是否有截屏声音，1有，0没有
url: "/storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/doc/jieping", //保存路径
name:name,//文件名字
}, ret => {
console.log(ret)
if(ret.code==1){
//保存到相册
uni.saveImageToPhotosAlbum({
filePath:"/storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/doc/jieping"+name,
success: function () {
console.log('save success');
uni.showToast({
title: '保存成功!',
duration: 2000
});
}
});
}
});
获取地图缩放比例
var that = this;
that.$refs.tdt.bilichi({}, ret => {
console.log(ret.data)
});
获取地图中心点坐标
var that = this;
that.$refs.tdt.getcenter({}, ret => {
console.log(ret)
});
设置地图中心点
参数
类型
说明
lng(float)
String
经度
lat(float)
String
纬度
scale(float)
String
缩放（值越小，地图等级越高，显示的越大）
var that=this;
that.$refs.tdt.clearTel(121.350633,
37.368849,3000);
定位地图到图形范围
var that=this;
that.$refs.tdt.locateGeometry({
type: '1',//1线，2多边形
bili: 1,//缩放比例
arr: [{
"x": 121.34813522402263,
"y": 37.36786674750549
}],//坐标数组
}, ret => {});
在地图显示设备位置
参数
类型
说明
type
String
显示样式
NAVIGATION
String
导航模式箭头
RECENTER
String
显示在地图中心
COMPASS_NAVIGATION
String
显示手机朝向
STOP
String
停止
that.$refs.tdt.shebeiwz({
type: 1,//1NAVIGATION 2 RECENTER 3 COMPASS_NAVIGATION 4停止定位
url:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-ca89506a-7051-4221-9887-9009974d532a/6258c05a-0eef-4025-b6dd-9ad734a84c20.png",//定位图，不填时用系统默认的图。本地地址示例：plus.io.convertLocalFileSystemURL("_www/")+"static/dingwei.png"
width:20,//定位图宽
height:20,//定位高
isqianjin:0,//移动时不显示前进方向
}, ret => {
console.log(ret)
//ret.code==0说明没提前授权位置，需要再次调用
});
释放地图资源
var that=this;
that.$refs.tdt.shifang({
}, ret => {
});
显示地理图形(覆盖物)相关方法
显示点线面，图形，文字，图片等
点
var that=this;
that.$refs.tdt.chushidian({
id: 'dian',//id
zindex:"1",//zindex
colorin: 'rgba(245,124,41,0.6)',//内部颜色
colorout: 'rgba(23,23,23,0.6)',//边线颜色
size: 10,//点大小
lng: 121.350633,
lat:37.368849,
size2: 10,//边线宽度
}, ret => {
});
批量加载多个点
var that=this;
that.$refs.tdt.multipoint({
type:1,//1图片渲染点 2点
colorin:"rgba(255,255,255,1)",//点内部色
colorout:"rgba(0,0,0,1)",//点边色
size:10,//点大小
size2:2,//点边线宽度
arr:[{lng:121,lat:37}],//点坐标数组
tuopt: 1,//图透明度
zindex:"1",
tuheight: 20,//图高
tuwidth: 20,//图宽
tuangle: 0,//图角度
offx:0,//图片x轴偏移
offy:0,//图片y轴偏移
url: plus.io.convertLocalFileSystemURL("_www/")+'static/weizhi.png',//图片地址
id: "qj", //图层id，生成的图标symbol的id为"qj"+数组index例如，qj0,qj1...
//isscale: 1
}, ret => {
console.log(ret)
// ret.index
if (ret.code == 1) {
//完成
} else {
//失败
}
});
线
//标注地图上的线
var that=this;
var arr = [{
"x": 121.34813522402263,
"y": 37.36786674750549
}, {
"x": 121.35175659153936,
"y": 37.37246881942493
}]
that.$refs.tdt.chushixian({
id: 'xian',
isdouble:1,//是否是双色间隔的线，例如黑白线
zindex:"1",
colorout: "rgba(0,0,0,1)",//双色线中另一种颜色
colorin: "rgba(255,255,255,1)",//colorin图形内部填充色
lineStyle:"SOLID",//线样式
SOLID ，DASH，LONG_DASH等
isarrow:0,//isarrow是否带箭头 1带0不带
size: 2,//线宽度
arr: arr//线坐标数组
}, ret => {
});
多边形
//标注地图上的线和多边形
var that=this;
var arr = [{
x: 121.35353,
y: 37.368381
}, {
x: 121.355268,
y: 37.371144
}, {
x: 121.349496,
y: 37.366113
}]
that.$refs.tdt.chushiduobian({
id: 'mian',
zindex:"1",
lineStyle:"SOLID",//边线样式
fillStyle:"SOLID",//填充样式
colorin: 'rgba(245,124,41,0.6)',//colorin图形内部填充色
colorout: 'rgba(23,23,23,0.6)',//colorout边线的颜色
size: 2,//size 边线宽度
arr: arr//坐标数组
}, ret => {
});
文字
//标注地图上的文字
var that=this;
that.$refs.tdt.chushizi({
id: 'zi',
zindex: "1",
text: "初始字",//文字内容
colorin: 'rgba(0,0,0,1)',//字颜色
bgcolor: 'rgba(0,0,0,0.6)',//背景色
size: 16,//字大小
offx: 0,//偏移x
offy: 8,//偏移y
lng: 121.354174,
lat: 37.368356,
angle:20,//旋转角度
fontWeight:"NORMAL",
AngleAlignment:"MAP",//定义符号的旋转是相对于地图MAP还是相对于用户的屏幕SCREEN
haloColor:'rgba(255,255,255,1)',//光晕颜色
haloWidth:3,//光晕宽度
outlineColor:'rgba(44,139,227,0.6)',//轮廓颜色
outlineWidth:"1",//轮廓宽度
}, ret => {
});
图形
//标注地图上的图。图片格式支持BMP、ICO、JPEG 和 PNG，动图GIF不支持
/*如果是本地图片，路径格式如下，其中uni.UNICFDC688为包名__UNI__CFDC688为别名，static代表本地static文件夹
/storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/www/static/logo.png*/
var that=this;
that.$refs.tdt.chushitu({
id: 'tu',
tuopt: 1,//图透明度
zindex:"1",
tuheight: 20,//图高
tuwidth: 20,//图宽
tuangle: 0,//图角度
offx:0,//x轴偏移
offy:10,//y轴偏移
url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-ca89506a-7051-4221-9887-9009974d532a/a63eb1dc-f91b-44c3-9ae2-f5a184c9057a.png",
lng: 121.354174,
lat: 37.368356,
AngleAlignment:"MAP",//定义符号的旋转是相对于地图MAP还是相对于用户的屏幕SCREEN
}, ret => {
});
缓冲区域
var that=this;
that.$refs.tdt.bufferGeodetic({
x:121.34770978780794,//中心点x
y: 37.368864677988689,//中心点y
id: "huanchong",
lineStyleout:"SOLID",//外边线样式
colorout:"rgba(0,0,0,1)",//外边线颜色
lineWidth:"1",//外边线宽
colorin:"rgba(46,247,170,0.6)",//填充色
length:50,//缓冲区域半径,单位：米
type:"GEODESIC",//大地线类型，GEODESIC为测地线
zindex:2,
}, ret => {
});
标注地图上简单的几何图形
style
说明
CIRCLE
圆圈
CROSS
十字 (+)
DIAMOND
菱形（◇）
SQUARE
正方形
TRIANGLE
三角形
X
对角十字 (X)
var that=this;
that.$refs.tdt.simpleGraphic({
id: 'simpleGraphic',
zindex:"1",
colorin: 'rgba(245,124,41,0.6)',//颜色
style:"X",
size: 40,//大小
lng:121.350633,
lat:37.368849
}, ret => {
});
带轨迹的线
传一组坐标点，在地图上绘制一条可以带方向的线。慎用，该线无法删除和修改。
参数
类型
说明
id
String
id
colorin
String
线颜色
size
String
线粗细
arr
String
坐标数组
//初始加载地图上的带箭头的线
var arrlnglat = [{
"lng": 121.34700300649354,
"lat": 37.37331364673314
},{
"lng": 121.34787161612486,
"lat": 37.37091227102716
}, {
"lng": 121.34909698771531,
"lat": 37.37078196960634
}, {
"lng": 121.35002896047428,
"lat": 37.37102885631708
}, {
"lng": 121.35027058304142,
"lat": 37.37191352702511
}]
var arr = []
for (var i = 0; i < arrlnglat.length; i++) {
arr.push({
x: that.lngmkt(arrlnglat[i]).x,
y: that.lngmkt(arrlnglat[i]).y
})
}
console.log(arr)
//colorin图形内部填充色
colorout边线的颜色
size 边线宽度
arr墨卡托数组
that.$refs.tdt.chushigj({
id: 'chushigj',
colorin: 'rgba(245,124,41,1)',
size: 10,
arr: arr
}, ret => {
});
可更新的轨迹线
每次调用都会往轨迹线里增加坐标点。慎用，该线无法删除和修改。
参数
类型
说明
id
String
id
colorin
String
线颜色
size
String
线粗细
isjt
String
1显示箭头0不显示
lng
String
X
lat
String
Y
var that=this;
that.$refs.tdt.guiji({
id: 'guiji',
isjt: 1,
colorin: 'rgba(245,124,41,1)',
size: 10,
lng: 121,
lat:37
}, ret => {});
清空轨迹线
var that=this;
that.$refs.tdt.clearGuiji({
}, ret => {
console.log(ret)
});
设置显示的地理图形(覆盖物)整体是否根据地图缩放，整体透明度，是否可见
注意：不包括手绘的图形
//设置是否选中某标注
var that=this;
that.$refs.tdt.setGraphic({
isscale: 1,//1遵循地图参考比例
opacity:0.5,//整体透明度
isvisible:1,//1可见0隐藏
}, ret => {
console.log(ret)
});
设置显示图形选中（id)
参数
类型
说明
id
String
初始标注的id
isselect
String
1选中0不选中
//设置是否选中某标注
var that=this;
that.$refs.tdt.selectGraphic_id({
id: 'mian',
isselect: 1,
}, ret => {
console.log(ret)
});
清空显示图形选中状态
var that=this;
that.$refs.tdt.clearGraphicSelection({
}, ret => {
console.log(ret)
});
根据id删除初始加载的点线面等覆盖物
删除对象不包括文本标注（callout)
//删除标注传index
var that=this;
that.$refs.tdt.shanbiaozhu_id({
id: "simpleGraphic"
}, ret => {
});
删除id中包含某字符串的覆盖物
删除对象不包括文本标注（callout)
//删除标注传index
var that=this;
that.$refs.tdt.shanbiaozhu_ids({
id: "simpleGraphic"
}, ret => {
});
设置id中包含某字符串的覆盖物是否可见
不包括文本标注（callout)
var that=this;
that.$refs.tdt.visible_ids({
isVisible:0,//1可见0隐藏
id:"aa",
}, ret => {
console.log(ret)
});
更新覆盖物(初始加载的点，图，文字)位置
var that=this;
that.$refs.tdt.updateChushi({
x: 121.350633,//新位置X
y: 37.368849,//新位置y
id: "tu", //图形id
}, ret => {
console.log(ret)
});
清空覆盖物
删除对象不包括文本标注（callout)
var that = this;
that.$refs.tdt.clearchushi({}, ret => {});
弹出窗口相关
弹窗标注（callout)
文本样式:
1当url和content为空时，title会自适应居中显示。
2url为空时，不显示图片。
3content为空时图片会宽度百分百，高度自适应。
更丰富的样式可以使用自定义弹窗（API在下面）
点击文本标注事件在回调函数中，ret返回id和坐标
参数
类型
说明
id
String
id
colortitle
String
标题颜色
colorcontent
String
内容颜色
title
String
标题
bgcolor
String
整体背景色
borderwidth
String
边宽
cornerradius
String
整体圆角
bordercolor
String
边颜色
content
String
内容
sizetitle
String
标题文字大小
sizecontent
String
内容文字大小
url
String
图片路径
lng
String
x
lat
String
y
leaderPosition
String
气泡相对坐标点的位置，AUTOMATIC，LEFT_MIDDLE，LOWER_MIDDLE，RIGHT_MIDDLE，UPPER_MIDDLE或者空
isAnimateCallout
String
是否有弹出气泡动画，1有0没有
isRecenterMap
String
弹出气泡时，是否以改点作为地图中心点1是0不是
//标注地图上的文本
//这里url要用本地路径因此如果是网络图片要用uni.getImageInfo获取一下
/*如果是本地图片，路径格式如下，其中uni.UNICFDC688为包名__UNI__CFDC688为别名file:///storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/www/static/logo.png*/
var url="";
var that=this;
that.$refs.tdt.wzbiaozhu({
id: 'wb',
colortitle: 'rgba(245,124,41,0.6)',
colorcontent: 'rgba(23,23,23,0.6)',
title:"安卓天地图",
bgcolor:"rgba(255,255,255,1)",
borderwidth:2,
cornerradius:6,
bordercolor:"rgba(0,0,0,1)",
content:"包括展示地图，切换底图（矢量，影像，地形），标注地图（点线面，文字，图形等）返回坐标等功能",
sizetitle: 14,
sizecontent: 12,
url:"file:///storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/www/static/logo.png",
lng: 121.350633,
lat: 37.368849，
leaderPosition:"",
isAnimateCallout:0,
isRecenterMap:0,
},ret => {
console.log(ret)
});
自定义弹窗标注
内容为传入的html文件，或者在线网址。
注意：使用默认列表样式时，url可以传空字符串并且不需要自己创建html文件。气泡内部的点击事件仍旧需要从监听mapCallout中返回。
var obg={
arr:[{
name: "lng",
value:"121"
},
{
name: "lat",
value: "37"
},
]
}
var str = "?obg=" + encodeURIComponent(JSON.stringify(obg));
var url="file:///storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/www/static/index.html"
this.$refs.tdt.wenbenHtml({
isdefault:1,//是否使用默认列表样式，1使用,0不使用
defaultStr:str,//使用默认列表样式要传的字符串，需要encodeURIComponent()处理一下,格式必须和上面一致
bgcolor:"rgba(255,255,255,1)",//气泡背景色
borderwidth:2,//气泡边宽
cornerradius:6,//圆角
bordercolor:"rgba(0,0,0,1)",//边线颜色
width: 300,//宽度
height: 91,//高度
url:url+str,//本地html地址，isdefault为0时必填
lng:121.35183106431532,//气泡x坐标
lat:37.366655383836502,//气泡y坐标
leaderPosition:"",//气泡相对坐标点的位置
isAnimateCallout:0,//是否有弹出气泡动画，1有0没有
isRecenterMap:0,//弹出气泡时，是否以改点作为地图中心点1是0不是
}, ret => {
console.log(ret)
})
删除弹窗气泡
var that = this;
that.$refs.tdt.shanwenben({}, ret => {});
标绘相关
点击地图手绘点线面，图形等
点
var that = this;
that.$refs.tdt.qudian({
colorin: 'rgba(245,124,41,0.6)',//填充色
colorout: 'rgba(23,23,23,0.6)',//边线颜色
size: 10,//点大小
size2: 2,//边线宽
isduo:1,//1标记多个点，0标记1个点
}, ret => {});
线
可用来配合其他API进行测距
var that = this;
that.$refs.tdt.xian({
isdouble:1,//1双色线，0单色
colorin: 'rgba(255,255,255,1)',//线颜色
colorout: 'rgba(0,0,0,1)',//线第一个点边色，双色线另一色
size: 6//线宽
}, ret => {});
曲线(自由绘制、画笔)
var that = this;
that.$refs.tdt.quxian({
colorin: 'rgba(245,124,41,1)',//颜色不能设置半透明，否则影像效果
size: 10
}, ret => {});
面
可用来配合其他API进行测面积
var that = this;
that.$refs.tdt.mian({
colorin: 'rgba(245,124,41,0.6)',
colorout: 'rgba(23,23,23,0.6)',
size: 3,//边线宽度
}, ret => {});
文字
var that = this;
that.$refs.tdt.zi({
colorin: 'rgba(245,124,41,0.6)',
text: '乌拉',
size: 16
}, ret => {});
图片
var that = this;
/*如果是本地图片，路径格式如下，其中uni.UNICFDC688为包名__UNI__CFDC688为别名static对应本地static文件夹
图片格式支持BMP、ICO、JPEG 和 PNG，动图GIF不支持
/storage/emulated/0/Android/data/uni.UNICFDC688/apps/__UNI__CFDC688/www/static/logo.png*/
that.$refs.tdt.tu({
tuopt: 1,
tuheight: 20,
tuwidth: 20,
tuangle: 0,
url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-ca89506a-7051-4221-9887-9009974d532a/a63eb1dc-f91b-44c3-9ae2-f5a184c9057a.png"
}, ret => {});
圆形
var that = this;
that.arr = []
that.$refs.tdt.yuan({
colorin: 'rgba(245,124,41,0.6)',
colorout: 'rgba(23,23,23,0.6)',
size: 3
}, ret => {});
矩形
var that = this;
that.$refs.tdt.juxing({
colorin: 'rgba(245,124,41,0.6)',
colorout: 'rgba(23,23,23,0.6)',
size: 3
}, ret => {});
撤掉上一步绘制的坐标点
var that = this;
that.$refs.tdt.chexiao({
}, ret => {
});
重置点击事件，结束绘图状态
var that = this;
that.$refs.tdt.wancheng({
}, ret => {});
删除某组绘制图形
参数
类型
说明
type
int
type 取值：
1 点
2 线
3 曲线
4 文字
5 图片
6 圆形
7 矩形
8 面
var that = this;
that.$refs.tdt.shanhuizhi({
type: '1',
}, ret => {
console.log(ret)
});
混合绘图编辑器
可绘制点线面等
var that = this;
var arr= ['POINT', 'POLYLINE', 'POLYGON', 'RECTANGLE','FREEHAND_LINE' ,'FREEHAND_POLYGON','MULTIPOINT']
that.$refs.tdt.sketchEditor({
isnew: 1,//1直接重新编辑，0加载初始加载的点线面进行编辑
id:"aa_xian",//加载初始加载的点线面id
type:arr[0],
colorpoint:'rgba(245,124,41,1)',//节点填充色，顶点填充，中间点填充
colorpointoutline:'rgba(245,124,41,1)',//节点外边线色
pointsize:10,//节点大小
pointoutlinesize:2,//节点边线宽度
colorpointmid:'rgba(255,255,255,0.6)',//中间点填充色，顶点填充，中间点填充
colorpointoutlinemid:'rgba(0,0,0,1)',//中间点外边线色
pointsizemid:6,//中间点大小
pointoutlinesizemid:1,//中间点边线宽度
fillStyle:"SOLID",//填充样式
colorfill: 'rgba(245,124,41,0.6)',//面填充色
colorfilloutline: 'rgba(245,124,41,1)',//面外边线颜色
filloutlinesize:2,//面边线宽度
lineStyle:"SOLID",//线样式
colorline:'rgba(245,124,41,1)',//线填充色
linesize:6,//线宽度
fz_lineStyle:"DASH",//拖拽线样式
fz_colorline:'rgba(5,8,8,1)',//拖拽线填充色
fz_linesize:1,//拖拽线宽度
//id: "arcGISTiledLayer",
}, ret => {
console.log(ret)
});
混合绘图编辑器的撤销，结束与清空
var that = this;
that.$refs.tdt.edsketchEditor({
type:1,//1撤销2结束,3清空
}, ret => {
console.log(ret)
});
测距测面模式
测距模式
var that = this;
that.$refs.tdt.cejuli({
colordian: "rgba(237,131,62,1)",//初始点颜色
size: "10",//初始点大小
isdouble:"1",//是否是双色线 1是 0不是
colorout: "rgba(255,255,255,1)",//线主颜色
colorout2: "rgba(0,0,0,1)",//线副颜色
size2: "2",//边线宽度
fontSize: "14",//字大小
fontColor: "rgba(0,0,0,1)",//字颜色
fontColorw: "rgba(255,255,255,1)",//字轮廓色
}, ret => {
});
测面积模式
var that = this;
that.$refs.tdt.cemianji({
colordian: "rgba(237,131,62,1)",//初始点颜色
size: "10",//初始点大小
isdouble:"1",//是否是双色线 1是 0不是
colorout: "rgba(255,255,255,1)",//边线主颜色
colorout2: "rgba(0,0,0,1)",//边线副颜色
size2: "2",//边线宽度
colorin: "rgba(255,255,255,0.5)",//内部填充色
fontSize: "14",//字大小
fontColor: "rgba(0,0,0,1)",//字颜色
fontColorw: "rgba(255,255,255,1)",//字轮廓色
}, ret => {
});
撤销一步
var that = this;
that.$refs.tdt.chexiaoCeliang({
}, ret => {
});
清空所有测量标记
var that = this;
that.$refs.tdt.qingkongCeliang({
}, ret => {
});
重置点击地图事件（结束测量）
var that = this;
that.$refs.tdt.wancheng({
}, ret => {});
底图更换
更换底图
var that = this;
that.$refs.tdt.baseMap({
type: 1,//1矢量 2影像 3地形
}, ret => {
console.log(ret)
});
其他方法
计算两点角度
var that=this;
//以正北为初始方向,逆时针计算
that.$refs.tdt.getAngle({
x1: 121.350633,
y1: 37.368849,
x2: 121.34813522402263,
y2:37.36786674750549,
}, ret => {
console.log(ret.angle)
});
计算点离线的最短距离，最近点
var that=this;
var arr =
[{
"x": 121.34813522402263,
"y": 37.36786674750549
}, {
"x": 121.34944894207166,
"y": 37.37032580016095
}]
that.$refs.tdt.pointToLineDistance({
x: 121.350633,//点x
y: 37.368849,//点y
arr:arr//线坐标数组
}, ret => {
//返回最近距离，单位米,distance→距离,x,y→最近点坐标
console.log(ret)
});
测量两点之间的距离
//两点距离
var that = this;
that.$refs.tdt.cedi_Distance({
lng_start: "121.35047446099691",//
lat_start:"37.369224176417305",
lng_end:"121.35023110911139",
lat_end:"37.368745145903908",
}, ret => {
console.log(ret)
uni.showToast({
title: ret.distance+'米',
icon:'none',
duration: 3000
});
});
//线段总长度
var that = this;
that.$refs.tdt.cedi_Distance2({
arr: [{x:1,y:1}],// 坐标数组
}, ret => {
console.log(ret)
uni.showToast({
title: ret.distance+'米',
icon:'none',
duration: 3000
});
});
测量多边形的面积
var that = this;
//arr为图形坐标数组（顺序不能乱）
that.$refs.tdt.cedi_size({
arr:[{"x":121.35080621301245,"y":37.369140827227803},
{"x":121.35093685634132,"y":37.369104187029819},
{"x":121.3508870016457,"y":37.369012586534858},
{"x":121.35077047380294,"y":37.369055233322676},
]
}, ret => {
console.log(ret)
uni.showToast({
title: ret.size+'平方米',
icon:'none',
duration: 3000
});
});
获取图形中心点
参数
类型
说明
type
String
1线2多边形
arr
arr
数组
var that = this;
//标注地图上的线
var arrlnglat = [{
"x": 121.34813522402263,
"y": 37.36786674750549
}, {
"x": 121.34944894207166,
"y": 37.37032580016095
}, {
"x": 121.35250852226477,
"y": 37.36997549311373
}]
that.$refs.tdt.getCenterPoint({
type: "1",
arr:arrlnglat,
}, ret => {
console.log(ret)
});
手机定位相关
持续获取手机位置
var that=this;
const dingwei = uni.requireNativePlugin('arcgis-tdt-dingwei');
dingwei.dingwei({
type: "dingwei",
}, ret => {
console.log(ret)
//返回经纬度（wgs84)和速度
});
结束持续获取位置
const dingwei = uni.requireNativePlugin('arcgis-tdt-dingwei');
dingwei.jieshu();
墨卡托与经纬度之间的转换JS方法
经纬度转墨卡托
//经纬度转墨卡托
lngmkt(poi){
var mercator = {};
var earthRad = 6378137.0;
// console.log("mercator-poi",poi);
mercator.x = poi.lng * Math.PI / 180 * earthRad;
var a = poi.lat * Math.PI / 180;
mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
// console.log("mercator",mercator);
return mercator; //[12727039.383734727, 3579066.6894065146
},
墨卡托转经纬度
//墨卡托转经纬度
mktlng(poi) {
var lnglat = {};
lnglat.lng = poi.x / 20037508.34 * 180;
var mmy = poi.y / 20037508.34 * 180;
lnglat.lat = 180 / Math.PI * (2 * Math.atan(Math.exp(mmy * Math.PI / 180)) - Math.PI / 2);
if (parseInt(lnglat.lng) != 0) {
return lnglat;
} else {
return {
lng: poi.x,
lat: poi.y
};
}
},
不同wkid坐标转换
const dingwei = uni.requireNativePlugin('arcgis-map-dingwei');
dingwei.wkidzhuan({
x: that.lng,//转换前的X坐标
y:that.lat,//转换前的y坐标
wkidold:that.wkid,//转换前的wkid
wkidnew:that.wkid2//转换后的wkid
}, ret => {
console.log(ret)
});
地理编码，逆编码等web服务API
这个只写一个地理编码的示例，更多web服务API直接去官网看，直接发请求即可。API地址http://lbs.tianditu.gov.cn/server/guide.html
var kwd=JSON.stringify({"keyWord":"北京大学"})
uni.request({
url: "http://api.tianditu.gov.cn/geocoder?ds="+kwd+"&tk="+that.options.tdtkey,
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'GET',
success: res => {
console.log(res);
if(res.data.msg=='ok'){
that.$refs.tdt.clearchushi({}, ret => {});
that.$refs.tdt.clearTel(res.data.location.lon, res.data.location.lat,20000);
that.$refs.tdt.chushitu({
id: res.data.location.keyWord,
tuopt: 1,
zindex:"1",
tuheight: 30,
tuwidth: 30,
tuangle: 0,
offx:0,//x轴偏移
offy:0,//y轴偏移
url: plus.io.convertLocalFileSystemURL("_www/")+'static/dwhui.png',
lng:res.data.location.lon,
lat: res.data.location.lat
}, ret => {
});
}
},
fail: () => {
},
complete: () => {
}
});
示例代码
<template>
<view>
<arcgis-tdt ref="telText" :options="options" :style="{width:kuan+'px',height:gao+'px'}"
class="ditu"></arcgis-tdt>
</view>
</template>
<script>
export default {
data() {
return {
sswzid: "",
kuan: 300,
gao: 400,
dh: 44,
iStatusBarHeight: 25,
iszk: 0,
arr: [],
options: {
LicenseString:"runtimelite,1000,rud4449636536,none,NKMFA0PL4S0DRJE15166",//许可授权字符串，需要去arcgis注册用户(注册过了的可以直接查看授权许可字符串),许可字符串查看网址https://developers.arcgis.com/android/license-and-deployment/license/#license-string
tdtkey: "000*******6a7f3c9bb", //type为0则不用申请，详情见文档 。申请 地址 https://console.tianditu.gov.cn/api/key
lng: 121.43441135,
lat: 37.46224832,
scale: 200000,
type: 1, //1矢量 2影像 3地形。
bgcolor: "rgba(170,198,238,1)",
zindex_jztogj: 1, //1渲染图形层级在轨迹线之上
},
}
},
onLoad() {
//#ifdef APP-PLUS
uni.showLoading({
});
//#endif
var kuan = 375
var gao = 667
var that = this;
uni.getSystemInfo({
success: function(res) {
that.kuan = res.windowWidth
that.gao = res.windowHeight + 1
}
});
that.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
var globalEvent = uni.requireNativePlugin('globalEvent');
//如果用到天地图，也要先设置天地图的key
//监听的是所有底图图层，code=="1"代表地图初始化完成,0失败，2更换底图
globalEvent.addEventListener('ready', function(e) {
if (e.code == "0") {
uni.showToast({
title: "地图初始化失败",
icon: 'none',
duration: 2000
});
setTimeout(function() {
uni.hideLoading()
uni.navigateBack();
}, 2000)
}
if (e.code == "1") {
uni.hideLoading()
}
});
},
methods: {}
}
</script>
<style>
.ditu {
position: fixed;
left: 0;
top: 0px;
width: 400px;
height: 400px;
z-index: 10;
}
</style>
}
