收藏人数:
下载插件并导入HBuilderX
下载示例项目ZIP
赞赏（2）
更新记录
1.3.0（2025-12-12） 下载此版本
新增热力图支持
1.2.0（2025-12-08） 下载此版本
1.添加各种地图状态的获取； 2.新增各种覆盖物的添加
1.1.0（2025-11-21） 下载此版本
1.新增增加自定义图层功能 2.新增增加缩放、比例尺、鹰眼、地图类型等控件功能 3.新增地图缩放、移动、显示范围、地图视野、样式等接口
查看更多平台兼容性
uni-app(4.86)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| - | - | - | - | - | - | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| - | - | - | - | - | - | - | - | - | - | - |
uni-app x(4.86)
| Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | - |
xwp-tianditu
基本使用方法
<xwp-tianditu ref="map" @loaded="mapLoaded" @mapClick="mapClick" :mapKey="mapKey" :zIndex="0" :mapOptions="mapOptions">
- mapOptions，初始化地图配置
- zIndex web需要，控制ui在地图上层
- mapKey：天地图key
- @loaded 监听地图是否加载完成
- @mapClick 监听地图的点击，返回参数{longitude,latitude}结构
- @markertap 监听标记点点击
// 初始化定位地图。
centerAndZoom(lnglat:LngLat, zoom:number)// 将地图的中心点变换到指定的地理坐标
panTo(lnglat:LngLat, zoom?:number)// 将地图在水平位置上移动x像素，垂直位置上移动y像素
planBy(point:Point)// 将视图缩放到指定的缩放等级，中心点坐标不变。
setZoom(zoom:number)// 放大一级视图。
zoomIn()// 缩小一级视图。
zoomOut()// 通知地图其容器大小已更改。在更改了容器对象的大小后调用此方法，以便地图能够调整自己适合于新的大小。
checkResize()// 设置地图最小显示级别。
setMinZoom(level:Number)// 设置地图最大显示级别。
setMaxZoom(level:Number)// 设置地图的显示范围。
setMaxBounds(options:LngLatBounds|null)// 根据提供的坐标点数组设置地图视野，调整后的视野会保证包含提供的坐标点。
setViewport(view:Array<LngLat>)// 是否放缩，默认可放缩
enableZoom(v:boolean)// 是否可拖拽，默认可拖拽
enableDrag(v:boolean)// 添加自定义图层
addTileLayer(url:string,options?:TileLayerOptions)// 叠加其他WMS服务图层
addWMSTileLayer(url:string,options?:WMSTileLayerOptions)// 移除图层
removeTileLayer(layerId:number)// 设置地图样式
setStyle(style:string)// 移除地图样式
removeStyle()// 设置标记点
setMarkers(v:Array<MarkerOptions>)// 逆地理编码
geocode_getLocation(lnglat:LngLat,callback:(data:UTSJSONObject)=>void)// 地理编码
geocode_getPoint(address:string,callback:(data:UTSJSONObject)=>void)// 根据关键字搜索
search(params:SearchOptions,callback:(data:UTSJSONObject)=>void)// 添加缩放控件
addZoomControl(options?:ControlZoomOptions)// 添加比列尺控件
addScaleControl(options?:ControlScaleOptions)// 添加鹰眼控件
addOverviewControl(options?:ControlOverviewOptions)// 添加地图类型控件
addMapTypeControl(options?:ControlMapTypeOptions)// 添加地图版权控件
addCopyRightControl(options?:ControlBaseOptions,copyRight?:CopyrightOptions)// 移除控件
removeControl(id:number)// 获取地图投影类型信息。
getCode(callback:(data:string)=>void)// 获取地图可视区域，以地理坐标表示。
getBounds(callback:(data:LngLatBounds)=>void)// 获取地图当前中心点。
getCenter(callback:(data:LngLat)=>void)// 获取地图视图的大小，以像素表示。
getSize(callback:(data:Point)=>void)// 获取地图当前缩放级别。
getZoom(callback:(data:number)=>void)// 获取地图视图的大小，以像素表示。
getDistance(start:LngLat,end:LngLat,callback:(data:number)=>void)// 根据提供的地理区域或坐标获得最佳的地图视野，返回的对象中包含center和zoom属性，分别表示地图的中心点和级别。
getViewport(view:LngLat[],callback:(data:UTSJSONObject)=>void)// 设置天地图标记的显隐
setCopyRightShow(show:boolean)// 清除所有覆盖物
clearOverLays()// 清除某个覆盖物
removeOverlay(id:number)// 添加图像标注
addMarker(options:MarkerOptions)// 添加文字标注
addLabel(options:LabelOptions)// 添加线
addPolyline(options:PolylineOptions)// 添加多边形
addPolygon(options:PolygonOptions)// 添加矩形
addRectangle(options:RectangleOptions)// 添加圆
addCircle(options:CircleOptions)// 添加图片覆盖物
addImageOverlay(options:ImageOverlayOptions)// 添加热力图
addHeatmap(options:HeatmapOptions)// 显示覆盖物
showOverlay(id:number)// 隐藏覆盖物
hideOverlay(id:number)//是否支持canvas
isSupportCanvas(callback:(data:boolean)=>void)<template>
<view class="example">
<xwp-tianditu ref="map" @loaded="mapLoaded" @mapClick="mapClick" :mapKey="mapKey" :zIndex="0" :mapOptions="mapOptions"></xwp-tianditu>
<view class="top">
<text style="background: white;"><text>地图点击位置：</text><text>{{mapClickAddress}}</text></text>
<view style="background: white;display: flex;flex-direction: row;width: 100%;justify-content: space-between;margin-top: 10px;">
<input style="flex: 1;" placeholder="输入搜索的地址" v-model="keyWord"/>
<text @tap="onSearch">搜索</text>
</view>
<list-view style="max-height: 300px;" v-show="showSearchResult">
<list-item v-for="item in searchList" @tap="(item)">
<text>{{ item['address']}}</text>
</list-item>
</list-view>
</view>
<view class="left">
<scroll-view :class="{'left-content':true,'left-show':showData['open']==true,'left-hide':showData['open']!=true}">
<view v-for="item in leftConfig">
<text class="title" @tap="showData[item.prop as string] = (showData[item.prop as string]==true?false:true)">{{ showData[item.prop as string]==true?'-':'+'}} {{ item.label}}</text>
<view class="item" v-show="showData[item.prop as string] ==true">
<text class="button" :style="subindex!= (item['btns'] as Array<UTSJSONObject>).length-1?'margin-right:5px;':''" v-for="(subItem,subindex) in (item['btns'] as Array<UTSJSONObject>)" @tap="excuteFunc(item.prop,subItem.prop)">{{ subItem.label }}</text>
</view>
</view>
</scroll-view>
<view v-show="showData['open']==true" class="left-close" @tap="showData['open']=false;">
<text class="left-close-font">关闭工具</text>
</view>
<view v-show="showData['open']!=true" class="left-open" @tap="showData['open']=true;">
<text class="left-open-font">打开工具</text>
</view>
</view>
</view>
</template>
<script>
import { MapOptions,LngLat,MarkerOptions, LngLatBounds, Point, HeatmapData } from '../../utssdk/tianditu';
import { convertData } from './config';
export default {
props:{
mapKey:{
type:String,
default:''
}
},
data() {
return {
longitude:118.799048,
latitude:31.968005,
markers:[] as MarkerOptions[],
tianduti:null as null|XwpTiandituComponentPublicInstance,
mapClickAddress:'' as null|string,
keyWord:'',
searchList:[] as UTSJSONObject[],
showSearchResult:false,
mapOptions:{
projection:'EPSG:900913',
// center:{lng:118.799048,lat:31.968005} as LngLat,
zoom:12,
minZoom:1,
maxZoom:18
} as MapOptions,
layers:[] as number[],
wmslayers:[] as number[],
headmapLayer:-1,
controls:{} as UTSJSONObject,
showData:{} as UTSJSONObject,
leftConfig:[
{label:'地图基本操作',prop:'map',btns:[{label:'放大',prop:'zoomIn'},{label:'缩小',prop:'zoomOut'},
{label:'坐标移动',prop:'panTo'},{label:'像素移动',prop:'panBy'},
{label:'中心点及放缩',prop:'centerAndZoom'},{label:'放缩到10',prop:'setZoom'},
{label:'1-18级',prop:'1-18Zoom'},{label:'4-10级',prop:'4-10Zoom'},
{label:'设置地图显示范围',prop:'setMaxBounds'},{label:'重置地图显示范围',prop:'setMaxBounds1'},
{label:'设置地图视野',prop:'setViewport'},{label:'black样式',prop:'style_black'},
{label:'indigo样式',prop:'style_indigo'},{label:'默认样式',prop:'style_default'},
]},
{label:'地图信息获取',prop:'mapInfo',btns:[{label:'地图类型',prop:'code'},{label:'可视区域',prop:'bounds'},
{label:'中心点',prop:'center'},{label:'视图大小',prop:'size'},
{label:'缩放等级',prop:'zoom'},{label:'两点距离',prop:'distance'},
{label:'最佳视野',prop:'viewport'},
]},
{label:'自定义图层',prop:'customLayer',btns:[{label:'添加',prop:'add'},{label:'移除',prop:'remove'}]},
{label:'叠加WMS服务图层',prop:'WMSLayer',btns:[{label:'叠加',prop:'add'},{label:'移除',prop:'remove'}]},
{label:'基本控件加载',prop:'control',btns:[
{label:'添加缩放',prop:'addZoom'},{label:'移除缩放',prop:'removeZoom'},
{label:'添加比例尺',prop:'addScale'},{label:'移除比例尺',prop:'removeScale'},
{label:'比例尺变红',prop:'redScale'},
{label:'添加鹰眼',prop:'addOverview'},{label:'移除鹰眼',prop:'removeOverview'},
{label:'添加地图版权',prop:'addCopyRight'},{label:'移除地图版权',prop:'removeCopyRight'},
{label:'添加版本信息',prop:'add_copyRight'},{label:'移除版本信息',prop:'remove_copyRight'},
{label:'添加地图类型',prop:'addMapType'},{label:'移除地图类型',prop:'removeMapType'},
]},
{label:'添加覆盖物',prop:'overlay',btns:[
{label:'添加标注',prop:'addMarker'},{label:'自定义标注图片',prop:'addMarker1'},
{label:'添加文字标注',prop:'addLabel'},{label:'添加线',prop:'addPolyline'},
{label:'添加多边形',prop:'addPolygon'},{label:'添加带洞多边形',prop:'addPolygon1'},
{label:'添加矩形',prop:'addRectangle'},{label:'添加圆',prop:'addCircle'},
{label:'图片覆盖物类',prop:'addImageOverlay'},{label:'添加热力图',prop:'addHeatmap'},
{label:'显示热力图',prop:'showHeatmap'},{label:'隐藏热力图',prop:'hideHeatmap'},
]},
{label:'其他',prop:'other',btns:[{label:'显示天地图图标',prop:'showCopyRight'},{label:'隐藏天地图图标',prop:'hideCopyRight'}]},
] as UTSJSONObject[],
};
},
created() {
},
methods:{
mapLoaded(){
this.tianduti = this.$refs['map'] as XwpTiandituComponentPublicInstance;
this.tianduti.centerAndZoom({lng:118.799048,lat:31.968005},12)
this.markers = [{lnglat:{lng:this.longitude,lat:this.latitude},tip:'南京南站'}]
},
// 地图点击监听
mapClick(data:UTSJSONObject){
console.log('mapClick data',data)
let lnglag = {lng:data.lng as number,lat:data.lat as number} as LngLat;
// 坐标转换地名
this.tianduti?.geocode_getLocation(lnglag,(res:UTSJSONObject)=>{
console.log('mapClick res',res)
if(res['success'] == true){
let rdata = res.data as UTSJSONObject
this.mapClickAddress = rdata.formatted_address as string
this.markers = [{lnglat:lnglag,tip:this.mapClickAddress}]
this.tianduti?.panTo(lnglag,null)
}else{
this.mapClickAddress = '坐标转换失败'
}
})
},
onSearch(){
// 地址搜素
this.tianduti?.search({keyWord:this.keyWord},(res:UTSJSONObject)=>{
console.log('onSearch res',res)
if(res['success'] == true){
let data = res['data'] as UTSJSONObject;
if(data['type'] == 1){
this.showSearchResult = true;
this.searchList = data['data'] as UTSJSONObject[]
}
}else{
uni.showToast({
title:'搜索失败'
})
}
})
},
(data:UTSJSONObject){
this.showSearchResult = false;
let arr = (data['lonlat'] as string).split(',')
this.markers = [{lnglat:{lng:parseFloat(arr[0]),lat:parseFloat(arr[1])} as LngLat,tip:data['address'] as string}]
this.tianduti?.panTo({lng:parseFloat(arr[0]),lat:parseFloat(arr[1])},null)
},
onAddTileLayer(){
let url = "http://t0.tianditu.gov.cn/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
`&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.mapKey}`
let layerId = this.tianduti?.addTileLayer(url,null)
if(layerId == null || layerId == -1) return;
this.layers.push(layerId);
},
onRemoveTileLayer(){
let first = this.layers.shift();
if(first != null){
let layerId = first;
this.tianduti?.removeTileLayer(layerId);
}
},
onAddWMSTileLayer(){
var config = {
version: "1.1.1", //请求服务的版本
layers: 'demo_city,demo_road,demo_anno',
transparent: true, //输出图像背景是否透明
styles: "", //每个请求图层的用","分隔的描述样式
format: "image/png" //输出图像的类型
};
let url = 'http://gisserver.tianditu.com/tiandituService/wms'
let layerId = this.tianduti?.addWMSTileLayer(url,null)
if(layerId == null || layerId == -1) return;
this.wmslayers.push(layerId);
},
onRemoveWMSTileLayer(){
let first = this.wmslayers.shift();
if(first != null){
let layerId = first;
this.tianduti?.removeTileLayer(layerId);
}
},
setStyle(style:string){
this.tianduti?.setStyle(style);
},
removeStyle(){
this.tianduti?.removeStyle()
},
_addControl(type:string,id:number){
let controls = this.controls.getArray<number>(type);
if(controls != null){
controls.push(id)
}else{
this.controls[type] = [id];
}
},
removeControl(type:string){
let controls = this.controls.getArray<number>(type);
if(controls != null){
let first = controls.shift();
if(first != null){
let id = first;
this.tianduti?.removeControl(id);
}
}
},
addZoomControl() {
let id = this.tianduti?.addZoomControl({
position:'rightBottom',
zoomInText:'+',
zoomOutText:'-'
})
if(id == null || id == -1) return;
this._addControl('zoom',id);
},
addScaleControl() {
let id = this.tianduti?.addScaleControl({
position:'rightBottom',
})
if(id == null || id == -1) return;
this._addControl('scale',id);
},
setControlColor(){
let controls = this.controls.getArray<number>('scale');
if(controls != null){
let first = controls[0];
if(first != null){
let id = first;
this.tianduti?.setControlColor(id,'red');
}
}
},
addOverviewControl() {
let id = this.tianduti?.addOverviewControl({
position:'rightBottom',
size:{x:150,y:150},
isOpen:true
})
if(id == null || id == -1) return;
this._addControl('overview',id);
},
addMapTypeControl() {
let id = this.tianduti?.addMapTypeControl({
position:'rightBottom',
})
if(id == null || id == -1) return;
this._addControl('mapType',id);
},
addCopyRightControl(){
let id = this.tianduti?.addCopyRightControl({
position:'rightBottom',
},
{id:'1',
content: "<a href='https://www.tianditu.gov.cn' target='_blank' style='font-size:14px;background:yellow'>自定义的版权控件</a>"})
if(id == null || id == -1) return;
this._addControl('copyRight',id);
},
add_copyRight(){
let controls = this.controls.getArray<number>('copyRight');
if(controls != null){
let first = controls[0];
if(first != null){
let id = first;
this.tianduti?.addControlCopyRight(id,{id:'2',
content: "<a href='https://www.tianditu.gov.cn' target='_blank' style='font-size:14px;background:yellow'>自定义的版权控件1</a>"});
}
}
},
remove_copyRight(){
let controls = this.controls.getArray<number>('copyRight');
if(controls != null){
let first = controls[0];
if(first != null){
let id = first;
this.tianduti?.removeControlCopyRight(id,{id:'2',
content: "<a href='https://www.tianditu.gov.cn' target='_blank' style='font-size:14px;background:yellow'>自定义的版权控件1</a>"});
}
}
},
excuteFunc(prop1:null|any,prop2:null|any){
if(prop1 == 'map'){
if(prop2 == 'zoomIn'){
this.tianduti?.zoomIn()
}else if(prop2 == 'zoomOut'){
this.tianduti?.zoomOut()
}else if(prop2 == 'panTo'){
this.tianduti?.getCenter((data:LngLat)=>{
data.lng += 0.1;
this.tianduti?.panTo(data,null);
})
}else if(prop2 == 'panBy'){
this.tianduti?.panBy({x:100,y:100})
}else if(prop2 == 'centerAndZoom'){
this.tianduti?.centerAndZoom({lng:116.64899,lat:40.12948},12)
}else if(prop2 == 'setZoom'){
this.tianduti?.setZoom(10)
}else if(prop2 =='1-18Zoom'){
this.tianduti?.setMinZoom(1);
this.tianduti?.setMaxZoom(18);
}else if(prop2 =='4-10Zoom'){
this.tianduti?.setMinZoom(4);
this.tianduti?.setMaxZoom(10);
}else if(prop2 =='setMaxBounds'){
this.tianduti?.setMaxBounds({sw:{lng:116.27648,lat:39.84042},ne:{lng:116.4605,lat:39.9721}})
}else if(prop2 =='setMaxBounds1'){
this.tianduti?.setMaxBounds(null)
}else if(prop2 == 'setViewport'){
this.tianduti?.setViewport([{lng:116.27648,lat:39.84042},{lng:116.4605,lat:39.9721}])
}else if(prop2 == 'style_black'){
this.tianduti?.setStyle('black')
}else if(prop2 == 'style_indigo'){
this.tianduti?.setStyle('indigo')
}else if(prop2 == 'style_default'){
this.tianduti?.removeStyle()
}
}else if(prop1 == 'customLayer'){
if(prop2 == 'add'){
this.onAddTileLayer()
}else if(prop2 == 'remove'){
this.onRemoveTileLayer()
}
}else if(prop1 == 'WMSLayer'){
if(prop2 == 'add'){
this.onAddWMSTileLayer()
}else if(prop2 == 'remove'){
this.onRemoveWMSTileLayer()
}
}else if(prop1 == 'control'){
if(prop2 == 'addScale'){
this.addScaleControl()
}else if(prop2 == 'removeScale'){
this.removeControl('scale')
}else if(prop2 == 'addZoom'){
this.addZoomControl()
}else if(prop2 == 'removeZoom'){
this.removeControl('zoom')
}else if(prop2 == 'addOverview'){
this.addOverviewControl()
}else if(prop2 == 'removeOverview'){
this.removeControl('overview')
}else if(prop2 == 'addMapType'){
this.addMapTypeControl()
}else if(prop2 == 'removeMapType'){
this.removeControl('mapType')
}else if(prop2 == 'addCopyRight'){
this.addCopyRightControl()
}else if(prop2 == 'removeCopyRight'){
this.removeControl('copyRight')
}else if(prop2 == 'redScale'){
this.setControlColor()
}else if(prop2 =='add_copyRight'){
this.add_copyRight()
}else if(prop2 =='remove_copyRight'){
this.remove_copyRight()
}
}else if(prop1 == 'other'){
if(prop2 == 'showCopyRight'){
this.tianduti?.setCopyRightShow(true)
}else if(prop2 == 'hideCopyRight'){
this.tianduti?.setCopyRightShow(false)
}
}else if(prop1 == 'mapInfo'){
if(prop2 == 'code'){
this.tianduti?.getCode((code:string)=>{
uni.showToast({
title:'地图类型：'+code,
icon:'none'
})
})
}else if(prop2 == 'bounds'){
this.tianduti?.getBounds((data:LngLatBounds)=>{
uni.showToast({
title:'地图可视区域：'+JSON.stringify(data),
icon:'none'
})
})
}else if(prop2 == 'center'){
this.tianduti?.getCenter((data:LngLat)=>{
uni.showToast({
title:'地图当前中心点：'+JSON.stringify(data),
icon:'none'
})
})
}else if(prop2 == 'size'){
this.tianduti?.getSize((data:Point)=>{
uni.showToast({
title:'地图视图的大小：'+JSON.stringify(data),
icon:'none'
})
})
}else if(prop2 == 'zoom'){
this.tianduti?.getZoom((data:number)=>{
uni.showToast({
title:'地图当前缩放级别：'+data.toString(),
icon:'none'
})
})
}else if(prop2 == 'distance'){
this.tianduti?.getDistance({lng:116.40769, lat:39.89945},{lng:116.64899,lat:40.12948},(data:number)=>{
uni.showToast({
title:`两点之间的距离：${data}米`,
icon:'none'
})
})
}else if(prop2 == 'viewport'){
this.tianduti?.getViewport([{lng:116.40769, lat:39.89945},{lng:116.64899,lat:40.12948}],(data:UTSJSONObject)=>{
uni.showToast({
title:`最佳的地图视野：${JSON.stringify(data)}`,
icon:'none'
})
})
}
}else if(prop1 == 'overlay'){
if(prop2 == 'addMarker'){
this.tianduti?.panTo({lng:116.40969,lat: 39.89945},null)
this.tianduti?.clearOverLays();
this.tianduti?.addMarker({
lnglat:{lng:116.40969,lat: 39.89945},
})
}else if(prop2 == 'addMarker1'){
this.tianduti?.panTo({lng:116.40969,lat: 39.89945},null)
this.tianduti?.clearOverLays();
this.tianduti?.addMarker({
lnglat:{lng:116.40969,lat: 39.89945},
icon:{
iconUrl:"http://api.tianditu.gov.cn/img/map/markerA.png",
iconSize: {x:19,y:27},
iconAnchor: {x:10,y:25}
}
})
}else if(prop2 == 'addLabel'){
this.tianduti?.panTo({lng:116.40969,lat: 39.89945},null)
this.tianduti?.clearOverLays();
this.tianduti?.addLabel({
text:"天地图：<a href='https://www.tianditu.gov.cn' target='_blank'>https://www.tianditu.gov.cn </a>",
position:{lng:116.40969,lat: 39.89945},
offset:{x:-9,y:0}
})
}else if(prop2 =='addPolyline'){
this.tianduti?.panTo({lng:116.40969,lat: 39.89945},null)
this.tianduti?.clearOverLays();
this.tianduti?.addPolyline({
points:[{lng:116.41136, lat:39.97569},{lng:116.411794, lat:39.9068},{lng:116.32969, lat:39.92940},{lng:116.385438, lat:39.90610}],
color: "blue",
weight: 3,
opacity: 0.5,
lineStyle:'dashed'
})
}else if(prop2 == 'addPolygon'){
this.tianduti?.panTo({lng:116.40969,lat: 39.89945},null)
this.tianduti?.clearOverLays();
this.tianduti?.addPolygon({
points:[{lng:116.41136, lat:39.97569},{lng:116.411794, lat:39.9068},{lng:116.32969, lat:39.92940},{lng:116.385438, lat:39.90610}],
color: "blue",
weight: 3,
opacity: 0.5,
fillColor: "#FFFFFF",
fillOpacity: 0.5,
// lineStyle:'dashed'
})
}else if(prop2 =='addPolygon1'){
this.tianduti?.panTo({lng:116.40969,lat: 39.89945},null)
this.tianduti?.clearOverLays();
this.tianduti?.addPolygon({
points:[[
{lng:116.315000, lat:39.964750},{lng:116.303330, lat:39.960810},{lng:116.306760, lat:39.866270},{lng:116.328740, lat:39.847560},
{lng:116.366500, lat:39.855730},{lng:116.442380, lat:39.856520},{lng:116.455080, lat:39.865480},{lng:116.456110, lat:39.950020},
{lng:116.428990, lat:39.967390}
],[
{lng:116.349330, lat:39.941590},{lng:116.350620, lat:39.900650},{lng:116.353110, lat:39.898670},{lng:116.413880, lat:39.899990},
{lng:116.418340, lat:39.903150},{lng:116.429330, lat:39.903940},{lng:116.427270, lat:39.947910},{lng:116.365810, lat:39.946600}
]],
color: "black",
weight: 3,
opacity: 0.2,
fillColor: "blue",
fillOpacity: 0.5
})
}else if(prop2 =='addRectangle'){
this.tianduti?.panTo({lng:116.40969,lat: 39.89945},null)
this.tianduti?.clearOverLays();
this.tianduti?.addRectangle({
bounds:{sw:{lng:116.36231, lat:39.87784},ne:{lng:116.43954, lat:39.92841}},
})
}else if(prop2 =='addCircle'){
this.tianduti?.panTo({lng:116.40093,lat: 39.90313},null)
this.tianduti?.clearOverLays();
this.tianduti?.addCircle({
center:{lng:116.40093, lat:39.90313},
radius:5000,
color:"blue",
weight:5,opacity:0.5,
fillColor:"#FFFFFF",
fillOpacity:0.5,
lineStyle:"solid"
})
}else if(prop2 =='addImageOverlay'){
this.tianduti?.centerAndZoom({lng:116.390750,lat: 39.916980},15)
this.tianduti?.clearOverLays();
this.tianduti?.addImageOverlay({
url:"http://lbs.tianditu.gov.cn/images/openlibrary/gugong.jpg",
bounds:{sw:{lng:116.385360, lat:39.911380},ne:{lng:116.395940, lat:39.921400}},
opacity: 1,
alt: "故宫博物院"
})
}else if(prop2 == 'addHeatmap'){
let point = convertData()
this.tianduti?.centerAndZoom({lng:108.95, lat:34.27}, 4);
this.tianduti?.removeOverlay(this.headmapLayer)
this.tianduti?.isSupportCanvas((support)=>{
if(!support){
uni.showToast({
title:'热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~',
icon:'none'
})
return
}
let id = this.tianduti?.addHeatmap({
data:{
max:300,
data:point
} as HeatmapData,
radius:30,
// gradient:{
// '0.2':'rgb(0, 255, 255)',
// '0.5':'rgb(0, 110, 255)',
// '0.8':'rgb(100, 0, 255)'
// }
})
if(id != null){ this.headmapLayer = id;}
})
}else if(prop2 == 'showHeatmap'){
this.tianduti?.showOverlay(this.headmapLayer)
}else if(prop2 == 'hideHeatmap'){
this.tianduti?.hideOverlay(this.headmapLayer)
}
}
},
},
watch:{
markers(){
this.tianduti?.setMarkers(this.markers)
}
}
}
</script>
<style lang="scss" scoped>
.example {
flex: 1;
position: relative;
.top {
position: absolute;
top:0px;
left:0px;
width:100%;
padding: 10px 10px;
z-index: 1;
background-color: white;
// display: none;
.row {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 5px 0px;
.item {
margin: 4px 10px;
padding: 5px 5px;
background: white;
}
}
}
.left {
position: absolute;
height: 100%;
display: flex;
flex-direction: row;
z-index: 10;
.left-content {
width: 150px;
background-color: white;
.title {
font-size: 16px;
margin: 5px 0;
}
.item {
margin-left: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.button {
margin-top: 5px;
font-size: 12px;
padding: 5px 5px;
background: white;
border: 1px black solid;
}
}
}
.left-close {
margin: auto 0px;
width: 30px;
height: 90px;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
.left-close-font {
color: white;
text-align: center;
}
}
.left-open {
margin: auto 0px;
width: 30px;
height: 90px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
.left-open-font{
text-align: center;
}
}
}
.left-show {
display: flex;
}
.left-hide {
display: none;
}
}
</style>
下载 58
赞赏 2
下载 12814415
赞赏 1835
赞赏
京公网安备：11010802035340号