本项目是基于天地图js4.0API开发，由于在某一项目中应客户需求，需要使用天地图开发， 当初在开发之前前往天地图官网和百度上搜索了一大圈，未能找到天地图的vue版组建，因此 决定参考天地图js API自己开发一套天地图组建， 由于之前一些项目中使用的是百度地图vue版，而天地图在使用是需要用script标签引入js包， 而百度地图组建在使用时只需要在组建上传递ak参数，因此在封装组建时借鉴了百度地图vue版 的开篇写法。 由于时间仓促，未能详细书写使用文档，接下来我会抽时间认认真真书写详细的使用文档
QQ：710512134
npm i tdtmap
<template>
<div>
<el-row :gutter="10">
<el-col :span="24">
<TdtMap :scale="{show:true}" :ak="tmap.ak" id="tmap1"
:drag="true"
:hidden-logo="tmap.showLogo"
:center="tmap.center"
:zoom="tmap.zoom"
height="800px"
:scroll-wheel-zoom="tmap.wheel"
>
<t-search></t-search>
<!--
工具
@draw="toolDraw" 当前用户绘制完成后会触发该事件
@polygonDraw="polygonDraw" 工具实例化完成后触发事件
-->
<t-polygon polygonType="point" @polygonDraw="polygonDraw">
<div>
<button @click="startDraw" @draw="openPolylineTool">开始画图1</button>
<button @click="clearDraw">清空画布</button>
<button @click="getNum">数量</button>
<button @click="getPolylines">自定义</button>
<button @click="screenShot">截图</button>
<div>
<input type="text" v-model="mypoint">
</div>
</div>
</t-polygon>
<!-- 轨迹 -->
<!-- <t-car-line :marker-size="{size:{width:32,height:32},anchor:{width:15,height:18}}" @markerClick="markerClick" :alongWay="alongWay" :marker="true" :datas="pos.features || []" :start="run"></t-car-line>-->
<!-- 边界或线条 -->
<t-boundary v-for="item in jsonData" @lblclick="a"
:polygon="item.pos" :name="item.name"></t-boundary>
<!-- 覆盖物 -->
<t-marker @click="tmap.meths.infoWindowOpen(tmap,1)" :position="{lng:120.45522499893582,lat:36.32832701557521}"
:icon="{url:iconUrl,size:{width:32,height:32}}">
<!-- 弹窗 -->
<t-info-window height="200" @close="tmap.meths.infoWindowClose(tmap,1)" content="你好" :show="tmap.show">
<el-descriptions>
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
<el-descriptions-item label="备注">
<el-tag size="small">学校</el-tag>
</el-descriptions-item>
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>
<div style="background-color: red">sd</div>
</t-info-window>
<!-- 文本标签 -->
<t-label @click="tmap.meths.infoWindowOpen(tmap,1)" :content="'测试'" ></t-label>
</t-marker>
<t-marker @click="tmap.meths.infoWindowOpen(tmap)" :position="{lng:120.55522499893582,lat:36.52832701557521}"
:icon="{url:iconUrl,size:{width:32,height:32}}">
<t-info-window height="200" @close="tmap.meths.infoWindowClose(tmap)" content="你好" :show="tmap.show2">
<div style="background-color: red">sd</div>
</t-info-window>
<t-label @click="tmap.meths.infoWindowOpen(tmap)" :content="'测试2'" ></t-label>
</t-marker>
</TdtMap>
</el-col>
</el-row>
<el-dialog
title="提示"
:visible.sync="dialog.open"
width="30%"
:before-close="dialog.meths.handleClose">
<span>当前坐标是:{{dialog.lnglat.lng}},{{dialog.lnglat.lat}}</span>
<div>
<span>行政区域编码是:6205020000</span>
<span>暂无案件信息</span>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialog.open = false">取 消</el-button>
<el-button type="primary" @click="dialog.open = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import TdtMap from "TdtMap/TdtMap";
import TMarker from "TdtMap/overlay/TdtMarker";
import TLabel from "TdtMap/overlay/TdtLabel"
import TBoundary from "TdtMap/overlay/TdtBoundary";
import TInfoWindow from "TdtMap/overlay/TdtInfoWindow"
import TCarLine from "TdtMap/trajectory/carLine"
import TPolygon from "TdtMap/others/TdtPolygon"
import TSearch from "TdtMap/others/Search";
import data from '@/api/geojson/370214.json'
import posData from "@/api/geojson/pos.json"
//import html2canvas from "html2canvas"
import domtoimage from 'dom-to-image'
//import { uploadScreen } from '@/api/risun/uploadScreen/uploadScreen'
export default {
name: "Map",
components: {
TdtMap,TMarker,TLabel,TBoundary,TInfoWindow,
TCarLine,TPolygon,TSearch,domtoimage,
//html2canvas
},
data() {
const _this = this;
return {
dialog:{
open:false,
lnglat:{},
meths:{
handleClose(){
_this.dialog.open = false;
}
}
},
mypoint:'',
alongWay:true,
run:true,
pos:posData,
jsonData:[],
list:[],
iconUrl:pointer,
images:{},
tmap:{
ak:'',
zoom:12,
showLogo:false,
wheel:true,
label:'测试',
center:{
lng:120.40281,
lat:36.313556
},
show:false,
show2:false,
meths:{
infoWindowClose (map,type) {
//alert(2)
if(type === 1){
map.show = false
}else map.show2 = false
console.log('infoWindowClose',map)
},
infoWindowOpen (map,type) {
//alert(1)
if(type === 1){
map.show = true
}else map.show2 = true
console.log('infoWindowOpen',map)
},
}
}
}
},
created() {
this.loadBoundary(data);
this.tmap.center={lng:120.30716,lat:36.26614}
// setTimeout(() => {
// this.alongWay = true;
// //this.pos = posData;
// },1000)
// setTimeout(() => {
// this.run = false;
// },4000)
// setTimeout(() => {
// this.tmap.center={lng:120.45522499893582,lat:36.32832701557521}
// },10000)
},
methods: {
//屏幕截图
screenShot(){
let DOM = document.querySelector('.tdt-marker-icon');
const parent = DOM.parentNode;
if(parent){
parent.setAttribute('id','risun-id');
// html2canvas(document.querySelector("#risun-id")).then(canvas => {
// const imgUrl = canvas.toDataURL("png"); // 获取生成的图片的url
// console.log(imgUrl)
// })
let targetDom = document.querySelector("#tmap1")
console.log("DOM",targetDom)
//domtoimage 截图
domtoimage.toPng(targetDom,{width:600,height:800,style:{'width':'100%','height':'100%','position':"absolute",'top':'200px','left':'200px'}}).then((dataUrl) => {
//this.images = dataUrl;
console.log(dataUrl)
//this.uploadScreenPic(dataUrl)
}).catch(function (error) {
console.error('失败===', error);
});
}
//console.log("DOM",DOM.parentNode)
},
uploadScreenPic(src){
console.log('filePath',src)
// uploadScreen({filePath:src}).then(res => {
// console.log('res',res)
// })
},
markerClick(e){
console.log('markerClick',e)
this.dialog.lnglat = e.lnglat;
this.dialog.open = true;
},
getPolylines(e){
const _mypoint = e.getPolylines('point');
this.mypoint = _mypoint.lng+','+_mypoint.lat
console.log(e.getPolylines('point'))
},
getNum(e){
if(e && e.obj && e.obj === 't-map'){
console.log(e,e.getLayerCount());
}
},
clearDraw(e){
console.log(e)
if(e.obj === 't-map'){
if(e.tool === 'point'){
this.mypoint = '';
}else
e.clearDraw(0);
}
},
//用户绘制后主动出发改事件
toolDraw(e){
if(e)
console.log(e.currentLnglats);
},
polygonDraw(e){
const _mypoint = e.lnglat;
if(_mypoint)
this.mypoint = _mypoint.lng+','+_mypoint.lat
//e.handler.open()
},
startDraw(e){
if(e.obj === 't-map' && e.tool!='point'){
let handler = e.handler;
handler.open();
}
},
openPolylineTool(e){
//e.handler.open()
console.log('openPolylineTool',e)
},
a(data){
alert("中心点坐标是:"+data.center.lng+','+data.center.lat)
},
loadBoundary(data){
const _data = data.features;
_data.forEach(item => {
const coordinates = item.geometry.coordinates || [];
const _name = item.properties.name;
const _areas = {
name:_name
}
if(coordinates.length>1){
coordinates.forEach(_item => {
_areas.pos = _item[0]
this.jsonData.push(_areas);
});
}else{
_areas.pos = coordinates[0];
this.jsonData.push(_areas);
}
});
console.log('this.jsonData',this.jsonData);
},
},
};
</script>
<style scoped>
</style>