1.需要引入的文件，密钥需要自己在官网申请
<link rel="stylesheet" href="https://api.tianditu.gov.cn/api/css?v=4.0"> <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥" type="text/javascript"></script> <script src="http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.js" charset="utf-8"></script> <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script> <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js">
2.合集代码
/**
* 天地-地图方法合集
*/
import Vue from 'vue'
import { httpAction, getAction,deleteAction } from '@/api/manage'
import defaultMark from "@/assets/commant/not_running.png"
import xbUrl from "@/assets/xb.png"
import imgUrl1 from "@assets/yj1.png";
import imgUrl2 from "@assets/yj2.png";
import imgUrl3 from "@assets/yj3.png";
import imgUrl4 from "@assets/yj4.png";
import imgUrl5 from "@assets/yj5.png";
import imgUrl6 from "@assets/yj6.png";
import imgUrl7 from "@assets/yj7.png";
import imgUrl8 from "@assets/yj8.png";
import imgUrl9 from "@assets/yj9.png";
import imgUrl10 from "@assets/yj10.png";
import imgUrl11 from "@assets/yj11.png";
import imgUrl12 from "@assets/yj12.png";
import imgUrl13 from "@assets/yj13.png";
import imgUrl14 from "@assets/yj14.png";
import imgUrl15 from "@assets/yj15.png";
import imgUrl16 from "@assets/yj16.png";
import imgUrl17 from "@assets/yj17.png";
import imgUrlyp1 from "@assets/jcjing.png";
export const TMapMixin = {
data(){
return{
TMap:null, //地图创建名称
minZoom:11, //地图最小缩放 11
zoom:17, //地图缩放级别
center:[118.581853,38.024604], //中心经纬度
mapStyle: {},//地图显示样式
btnStyle: {},//地图按钮显示隐藏
markIdsArray:[],//区域绘制标点数组，
defaultMark:defaultMark, //默认点击时的图标
xbUrl:xbUrl, //信标图标
imgUrl1:imgUrl1, //设备管理图标 1-17
imgUrl2:imgUrl2,
imgUrl3:imgUrl3,
imgUrl4:imgUrl4,
imgUrl5:imgUrl5,
imgUrl6:imgUrl6,
imgUrl7:imgUrl7,
imgUrl8:imgUrl8,
imgUrl9:imgUrl9,
imgUrl10:imgUrl10,
imgUrl11:imgUrl11,
imgUrl12:imgUrl12,
imgUrl13:imgUrl13,
imgUrl14:imgUrl14,
imgUrl15:imgUrl15,
imgUrl16:imgUrl16,
imgUrl17:imgUrl17,
imgUrlyp1, //罐区
isAdd:false, //是否新增
disabled:false,
model:{},
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
arrowArray:[],//箭头实例数组，
isDeleteArrow:false,//是否删除箭头
drawEntity:null,//多边形
myData: [], //绘制多边形的经纬度
}
},
methods:{
//初始化地图，参数为绘制地图所在div的id
initMap(type,div){
var that = this;
var dom = div
console.log(dom)
that.deleteAll()
that.TMap = new T.Map(dom,{
minZoom:that.minZoom,
});
var lnglat = new T.LngLat(that.center[0],that.center[1]); //中心经纬度
that.TMap.centerAndZoom(lnglat,that.zoom);
that.TMap.enableScrollWheelZoom(); // 启用滚轮缩放
if(type == "leftClick"){
//需要创建标点的地图
that.removeMapClick();
that.TMap.addEventListener("click",that.MapClick);
};// 2、初始化区点击标注
},
// 功能一、 添加标注
// （一） 添加单个标注
//参数 mark-数组 [108.617, 21.729]
addMark(mark,id,imgType){
var imgUrl = ""
if(imgType){
imgUrl = imgType
}else{
imgUrl = 'defaultMark'
}
let that = this
var markId = 'mark'+id;
//创建图片对象
var icon = new T.Icon({
iconUrl: that[imgUrl],
iconSize: new T.Point(20, 20),
iconAnchor: new T.Point(10, 25)
});
//向地图上添加自定义标注
var marker = new T.Marker(new T.LngLat(mark[0], mark[1]), {icon: icon});
that.TMap.addOverLay(marker);
//保存id用于删除
this.markIdsArray.push(marker);
},
// （ 三 ) 根据数据自动绘制区域-面
addArea(areaArr,id,colorType){
let that = this
var points = [];
for(var i in areaArr){
var item = areaArr[i];
console.log(item,"线段数据")
points.push(new T.LngLat(item.lon, item.lat));
}
var color = 'blue';
//创建面对象
var polygon = new T.Polygon(points,{
color: color, weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
});
//向地图上添加面
that.TMap.addOverLay(polygon);
},
// 功能六、鼠标左键 - 获取鼠标下的经纬度
MapClick(e) {
if(!e){
return
}
var that = this;
var i = 0;
i++;
var id = 'draw'+i;
that.deleteAll()
var longitudeString = e.lnglat.getLng()
var latitudeString = e.lnglat.getLat()
that.addMark([longitudeString,latitudeString],id);
if(that.isAdd == true){
that.$set(that.model,"lon", longitudeString);
that.$set(that.model,"lng", longitudeString);
that.$set(that.model,"lat", latitudeString);
}
},
removeMapClick(){
let that = this
that.TMap.removeEventListener("click",that.MapClick);
},
// 功能十、 删除
// 删除全部地图实例
deleteAll(){
if(this.TMap){
this.TMap.clearOverLays(); //清除覆盖物
}
},
//显示箭头，创建箭头
showArrow(areaArr,id,colorType){
let that = this
var points = [];
for(var i in areaArr){
var item = areaArr[i];
console.log(item,"线段数据")
points.push(new T.LngLat(item.lon, item.lat));
}
let name = "arrow" + id
name = new T.StraightArrow(points,{
color:colorType,weight:2,opacity:0.5,fillColor:'red',fillOpacity:0.2,fill:true,id:id,
})
//向地图上添加面
that.TMap.addOverLay(name);
that.arrowArray.push(name)
name.addEventListener("click",that.arrowClick);
},
//创建多边形
drawAction() {
let that = this
if (that.drawEntity) that.drawEntity.close();
that.drawEntity = new T.PolygonTool(that.TMap);
that.drawEntity.open();
//监听结束绘制
this.drawEntity.addEventListener("draw", that.drawEnd);
},
//绘制结束
drawEnd(e){
console.log(e)
console.log("多边形---绘制结束")
var value = e.currentLnglats;
var arr = [];
for(var i in value ){
console.log(value[i])
var json = {
lon:value[i].lng,
lat: value[i].lat,
}
arr.push(json);
}
this.myData = arr
console.log(arr,"经纬度----")
//this.$set(this.model,"lonAndLat",JSON.stringify(arr));//经纬度
},
/*--------------------新增、编辑、详情、删除等数据处理方法---------------------------------*/
//编辑-重绘标点或区域
handleEditm(record){
//重置区域绘制
//this.resetDraw();
this.deleteAll()
this.model = Object.assign({}, record)
this.disabled = false;
this.isAdd = true;
//判断是否有绘制区域
if(this.model.data == "[]"){
this.isDraw = false;
}else{
this.isDraw = true;
}
// 根据数据绘制区域
var data = JSON.parse(record.data);
this.addArea(data,record.id);
},
//详情-地图上显示对应标点或区域
handleDetailm(record){
//重置区域绘制
// this.resetDraw();
this.deleteAll()
this.model = Object.assign({}, record)
this.disabled = true;
this.isAdd = true;
//判断是否有绘制区域
if(this.model.data == "[]"){
this.isDraw = false;
}else{
this.isDraw = true;
}
// 根据数据绘制区域
var data = JSON.parse(record.data);
this.addArea(data,record.id);
},
//重置区域绘制
resetDraw(){
if (this.drawEntity) this.drawEntity.close();
this.TMap.clearOverLays()
this.myData = [];
this.isDraw = false;
return
//取消默认的点击事件
if( this.handler != null){
this.handler.destroy();
}
//添加左键双击完成并退出绘制模式
try{
if( this.draw != null) this.stopDraw = this.draw.isDraw();
if(this.stopDraw){
this.draw.disable();
}
}catch{
console.log("箭頭")
}
this.actionDraw = false;
var id = "";
if(this.drawEntity != null){
// 获取实例id
id = this.drawEntity.id;
// 删除地图上的绘制的任意一个实例
this.deleteEntity(this.drawEntity);
}else if(this.model.id){
id = 'polygon'+this.model.id;
}
this.deleteEntityById(id);
// （五） 删除区域绘制的线段及顶点标注
this.deleteML();
this.drawEntity = null;
this.myData = [];
this.isDraw = false;
// this.model.data = [];
},
//删除区域
deleteAction(this.url.delete, {id: id}).then((res) => {
if (res.success) {
this.$message.success(res.message);
//重置区域绘制
if(id == this.model.id){
this.handleCancelm();
}else{
this.deleteEntityById('polygon'+id);
}
this.loadData();
} else {
this.$message.warning(res.message);
}
});
},
//保存
submitForm () {
if(this.model.data == "[]" || this.model.data == null || this.model.data == undefined){
if(this.drawEntity == null){
this.$message.warning("请绘制围栏区域！");
return;
}
}
const that = this;
// 触发表单验证
this.$refs.form.validate(valid => {
if (valid) {
let httpurl = '';
let method = '';
if(!this.model.id){
if(!this.url.add){
this.$message.error("请设置url.add属性!")
return
}
httpurl+=this.url.add;
method = 'post';
}else{
if(!this.url.edit){
this.$message.error("请设置url.edit属性!")
return
}
httpurl+=this.url.edit;
method = 'put';
}
if(this.myData.length != 0){
var json = JSON.stringify(this.myData);
this.model.data = json;
}
httpAction(httpurl,this.model,method).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.handleCancelm();
that.searchQuery();
}else{
that.$message.warning(res.message);
}
})
}
})
},
},
}