天地图案例

<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-inputv-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); //向地图对象添加markermarker.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>