天地图案例
<template>
<div id="map" class="tdmap">
<div class="button_click">
<el-button @click="mark" type="primary" size="mini">添加点位</el-button>
<el-button @click="polyg" type="primary" size="mini">绘制区域</el-button>
<el-button @click="polyl" type="primary" size="mini">绘制路线</el-button>
<el-button @click="rect" type="primary" size="mini">绘制矩形</el-button>
<el-button @click="circ" type="primary" size="mini">绘制圆</el-button>
<el-button @click="clear" type="primary" size="mini"
>清除默认添加的覆盖物</el-button
>
<el-button @click="clearClick" type="primary" size="mini"
>清除手工添加的覆盖物</el-button
>
<el-input
v-model="input"
placeholder="请输入内容"
style="margin-left: 20px"
></el-input>
<el-button @click="search" type="primary" size="mini">搜索</el-button>
</div>
</div>
</template>
<script>
const T = window.T;
export default {
data() {
return {
map: "",
mockList: [
"118.6114,37.24864",
"118.61775,37.24885",
"118.63286,37.2496",
"118.64865,37.25144",
],
area: [
["118.56359,37.26715", "118.55836,37.26012", "118.56892,37.26005"],
[
"118.55793,37.25704",
"118.5569,37.24816",
"118.56806,37.24816",
"118.56823,37.2567",
],
[
"118.56214,37.24543",
"118.56085,37.24147",
"118.5563,37.24119",
"118.56068,37.24017",
"118.55759,37.23764",
"118.56179,37.23955",
"118.56368,37.23757",
"118.56317,37.2401",
"118.56711,37.23969",
"118.56325,37.24126",
],
],
line: [
[
"118.56668,37.26729",
"118.58059,37.26722",
"118.569,37.24113",
"118.58557,37.24277",
"118.58411,37.22992",
"118.58059,37.22131",
],
[
"118.58497,37.25745",
"118.58522,37.25042",
"118.5884,37.25049",
"118.59303,37.25076",
"118.59364,37.24618",
],
[
"118.59767,37.2444",
"118.58737,37.22923",
"118.59904,37.22575",
"118.59982,37.22787",
],
],
recta: [
["118.63767,37.23265", "118.62308,37.22288"],
["118.67955,37.23942", "118.66101,37.2278"],
],
circleList: [
["118.69123", "37.26271", "1117.0034000701808"],
["118.55905", "37.2183", "600.6030888877458"],
["118.69629", "37.2265", "1053.7729265767698"],
],
icon: "",
markerInfoWin: "",
submarker: "",
// marker:'',
markers: [],
// polygon:'',
polygondraw: "",
polygons: [],
markspot: "",
labels: [],
marks: [],
input: "",
geocoder: "",
pdefinedOverlays: [],
polygs: [],
polylinedraw: "",
polyls: [],
div: "",
// polyline:'',
polylines: [],
// rectangle:'',
rectang: "",
rectangles: [],
rectangs: [],
// cricle:'',
cirel: "",
cricles: [],
cirels: [],
};
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
//地图初始化
init() {
//添加图层
const imageURL =
"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=f6a256d612b541a0520a1cd3bbbec82f"; //卫星图影像
const imageURLT =
"http://t0.tianditu.gov.cn/cia_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
"&tk=f6a256d612b541a0520a1cd3bbbec82f"; //卫星图标记
const lay = new T.TileLayer(imageURL, { minZoom: 6, maxZoom: 18 }); //创建图层对象
const lay2 = new T.TileLayer(imageURLT, { minZoom: 6, maxZoom: 18 }); //创建图层对象
var config = { layers: [lay, lay2] };
this.map = new T.Map("map"); //创建地图对象
this.map.centerAndZoom(new T.LngLat(118.63372, 37.24352), 14); //初始化地图
this.addCovering();
this.addToolCovering();
},
//初始化在地图上添加覆盖物
addCovering() {
//创建marker图标样式
this.icon = new T.Icon({
iconUrl: "images/position_icon.png",
iconSize: new T.Point(36, 36),
iconAnchor: new T.Point(15, 30),
});
// 创建信息窗口对象
this.markerInfoWin = new T.InfoWindow("", {
offset: new T.Point(2, -30),
});
// this.addMarker(); //添加marker标注
this.addPolygon(); //添加多边形
// this.addPolyline(); //添加线条
// this.addRectangle(); //添加矩形
// this.addCircle(); //添加圆形
},
//创建工具类对象
addToolCovering() {
//标注点对象
this.markspot = new T.MarkTool(this.map, {
follow: true,
icon: this.icon,
});
this.markspot.addEventListener("mouseup", this.onMorkPolygon);
//多边形对象
this.polygondraw = new T.PolygonTool(this.map, {
color: "#F59200",
width: 10,
opacity: 1,
fillColor: "#F59200",
fillOpacity: 0.3,
showLabel: false,
});
this.polygondraw.addEventListener("draw", this.onDrawPolygon);
//线对象
this.polylinedraw = new T.PolylineTool(this.map, {
color: "red",
width: 10,
opacity: 1,
showLabel: false,
});
this.polylinedraw.addEventListener("draw", this.onDrawPolyline);
//矩形对象
this.rectang = new T.RectangleTool(this.map, {
color: "#01A1ED",
width: 10,
opacity: 1,
fillColor: "#01A1ED",
fillOpacity: 0.3,
});
this.rectang.addEventListener("draw", this.onDrawRectangle);
//圆形对象
this.cirel = new T.CircleTool(this.map, {
color: "#b800ff",
width: 10,
opacity: 1,
fillColor: "#b800ff",
fillOpacity: 0.3,
});
this.cirel.addEventListener("drawend", this.onDrawCirele);
},
//marker标注的位置
addMarker() {
//添加多个marker标注
this.mockList.forEach((item, index) => {
let point = item.split(",");
//创建label对象,morker的文字标注
let latlng = new T.LngLat(point[0], point[1]);
let label = new T.Label({
text: `天地图marker${index + 1}的文字标注`,
position: latlng,
offset: new T.Point(0, -10),
});
//设置label对象的css样式
label.setFontColor("#fff");
label.setBackgroundColor("transparent");
label.setBorderColor("transparent");
this.map.addOverLay(label); //向地图对象添加marker文字标注
this.labels.push(label); //变量用于清除覆盖对象
let html = "<div>天地图信息窗</div>"; //marker信息窗显示的内容
//创建marker对象
let marker = new T.Marker(new T.LngLat(point[0], point[1]), {
icon: this.icon,
});
marker.content = html;
this.map.addOverLay(marker); //向地图对象添加marker
marker.addEventListener("click", this.infoClick); //向marker对象添加事件监听,鼠标点击
this.markers.push(marker); //变量用于清除覆盖对象
//自定义覆盖物,对某一位置特殊处理,例如marker标注位置需要特殊css动画
let definedOverlay = T.Overlay.extend({
initialize: function (lnglat, options) {
this.lnglat = lnglat;
this.setOptions(options);
},
onAdd: function (map) {
this.map = map;
var div = (this.div = document.createElement("div"));
div.className = "div_class";
div.style.position = "absolute";
div.style.MozUserSelect = "none";
div.onmouseover = function () {
this.style.backgroundColor = "#6BADCA";
this.style.borderColor = "#0000ff";
};
div.onmouseout = function () {
this.style.backgroundColor = "#EE5D5B";
this.style.borderColor = "#BC3B3A";
};
map.getPanes().overlayPane.appendChild(this.div);
this.update(this.lnglat);
},
onRemove: function () {
var parent = this.div.parentNode;
if (parent) {
parent.removeChild(this.div);
this.map = null;
this.div = null;
}
},
setLnglat: function (lnglat) {
this.lnglat = lnglat;
this.update();
},
getLnglat: function () {
return this.lnglat;
},
setPos: function (pos) {
this.lnglat = this.map.layerPointToLngLat(pos);
this.update();
},
update: function () {
var pos = this.map.lngLatToLayerPoint(this.lnglat);
this.div.style.top = pos.y - 54 + "px";
this.div.style.left = pos.x - 35 + "px";
},
});
let p = new T.LngLat(point[0], point[1]);
var pdefinedOverlay = new definedOverlay(p, {});
this.map.addOverLay(pdefinedOverlay);
this.pdefinedOverlays.push(pdefinedOverlay); //变量用于清除覆盖对象
});
},
//点击marker标注
infoClick(e) {
let point = e.lnglat;
this.markerInfoWin.setContent(e.target.content);
this.map.openInfoWindow(this.markerInfoWin, point); //开启信息窗口
},
//多边形
addPolygon() {
this.area.forEach((item) => {
let list = this.getList(item);
console.log(list);
let polygon = new T.Polygon(list, {
color: "#06d7f9",
weight: 3,
opacity: 1,
fillColor: "#06d7f9",
fillOpacity: 0.3,
});
this.map.addOverLay(polygon);
this.polygons.push(polygon);
});
},
//线条
addPolyline() {
this.line.forEach((item) => {
let list = this.getList(item);
let polyline = new T.Polyline(list, {
color: "#CBDE02",
weight: 3,
opacity: 1,
});
this.map.addOverLay(polyline);
this.polylines.push(polyline);
});
},
//矩形
addRectangle() {
this.recta.forEach((item) => {
let list = this.getList(item);
let bounds = new T.LngLatBounds(list[0], list[1]);
let rectangle = new T.Rectangle(bounds, {
color: "#1ded26",
width: 10,
opacity: 1,
fillColor: "#1ded26",
fillOpacity: 0.3,
});
this.map.addOverLay(rectangle);
this.rectangles.push(rectangle);
});
},
//圆形
addCircle() {
this.circleList.forEach((item) => {
let cricle = new T.Circle(
new T.LngLat(item[0], item[1]),
parseFloat(item[2]),
{
color: "#ff007e",
weight: 3,
opacity: 1,
fillColor: "#ff007e",
fillOpacity: 0.3,
}
);
this.map.addOverLay(cricle);
this.cricles.push(cricle);
});
},
getList(obj) {
let item = obj;
let list = [];
item.forEach((i) => {
let arr = i.split(",");
list.push(new T.LngLat(arr[0], arr[1]));
});
return list;
},
//添加marker标注
mark() {
this.markspot.open();
},
//获取marker标注的位置
onMorkPolygon(e) {
let monkerStr = `${e.currentLnglat.lng},${e.currentLnglat.lat}`;
this.marks.push(e.currentMarker);
console.log(monkerStr);
},
//绘制多边形
polyg() {
this.polygondraw.open();
},
//获取绘制的多边形路径
onDrawPolygon(e) {
let position = [];
e.currentLnglats.forEach((item) => {
let str = `${item.lng},${item.lat}`;
position.push(str);
});
this.polygs.push(e.currentPolygon);
console.log(position);
},
//绘制路线(线工具)
polyl() {
this.polylinedraw.open();
},
//获取绘制的线条的路径
onDrawPolyline(e) {
let position = [];
e.currentLnglats.forEach((item) => {
let str = `${item.lng},${item.lat}`;
position.push(str);
});
this.polyls.push(e.currentPolyline);
console.log(position);
},
//绘制矩形
rect() {
this.rectang.open();
},
//获取绘制的矩形坐标
onDrawRectangle(e) {
let obj = e.currentBounds;
let position = [
`${obj.Lq.lng},${obj.Lq.lat}`,
`${obj.kq.lng},${obj.kq.lat}`,
];
this.rectangs.push(e.currentRectangle);
console.log(position);
},
//绘制圆形
circ() {
this.cirel.open();
},
//获取绘制的圆坐标
onDrawCirele(e) {
let obj = e.currentCenter;
let position = [obj.lng, obj.lat, e.currentRadius];
this.cirels.push(e.currentCircle);
console.log(position);
},
//根据需求清除地图的覆盖物
clear() {
this.polygons.forEach((item) => {
this.map.removeOverLay(item);
});
this.labels.forEach((item) => {
this.map.removeOverLay(item);
});
this.markers.forEach((item) => {
this.map.removeOverLay(item);
});
this.pdefinedOverlays.forEach((item) => {
this.map.removeOverLay(item);
});
this.polylines.forEach((item) => {
this.map.removeOverLay(item);
});
this.rectangles.forEach((item) => {
this.map.removeOverLay(item);
});
this.cricles.forEach((item) => {
this.map.removeOverLay(item);
});
},
clearClick() {
this.marks.forEach((item) => {
this.map.removeOverLay(item);
});
this.polygs.forEach((item) => {
this.map.removeOverLay(item);
});
this.polyls.forEach((item) => {
this.map.removeOverLay(item);
});
this.rectangs.forEach((item) => {
this.map.removeOverLay(item);
});
this.cirels.forEach((item) => {
this.map.removeOverLay(item);
});
},
//根据名字查询位置
search() {
this.map.removeOverLay(this.submarker);
this.geocoder = new T.Geocoder();
this.geocoder.getPoint(this.input, this.searchResult);
},
//查询位置的结果
searchResult(result) {
if (result.getStatus() == 0) {
this.map.panTo(result.getLocationPoint(), 12);
//创建标注对象
this.submarker = new T.Marker(result.getLocationPoint());
//向地图上添加标注
this.map.addOverLay(this.submarker);
} else {
alert(result.getMsg());
}
},
},
};
</script>
<style lang="less">
.div_class {
outline: none;
transform-origin: 0 0;
display: block;
opacity: 0.7;
}
.div_class::after {
content: "";
-webkit-border-radius: 100%;
border-radius: 100%;
height: 80px;
width: 80px;
position: absolute;
box-shadow: 0 0 6px 2px #dd524d;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite; /*无穷反复*/
animation-delay: 1.1s;
}
@keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
opacity: 0;
filter: alpha(opacity=0);
}
50% {
opacity: 1;
filter: none;
}
100% {
transform: scale(1.2, 1.2);
opacity: 0;
filter: alpha(opacity=0);
}
}
.tdmap {
width: 100%;
height: 800px;
z-index: 0;
}
.button_click {
position: absolute;
display: flex;
z-index: 401;
}
</style>