**
1.首先在静态页面引入天地图js文件**
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=密钥" type="text/javascript"></script>
然后我们就拥有了一个全局变量T
2.创建地图示例,设置地图参数
要在页面挂在后渲染地图
data() {
return {
cityName: "", //暂存城市名称
icon: "",
map:{},
};
},
this.$nextTick(() =>{
this.onLoad();
});
onLoad() {
// 基本设置
let that = this;
that.map = new window.T.Map("map", {
// 地图的投影方式 EPSG:900913(墨卡托投影),EPSG:4326(大地平面投影)
projection: "EPSG:4326",
// min 0 max 18
minZoom: 5,
maxZoom: 18,
});
//centerAndZoom 是显示该地图的中心点
that.map.centerAndZoom(new T.LngLat(104.075931, 30.651651), 5);
// 添加控件
var ctrl = new T.Control.MapType([
{
title: "地图", //地图控件上所要显示的图层名称
icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标(默认图标大小80x80)
layer: TMAP_NORMAL_MAP, //地图类型对象,即MapType。 此地图类型展示普通街道视图
},
{
title: "卫星混合",
icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
layer: TMAP_HYBRID_MAP, // 此地图类型展示卫星和路网混合视图
},
]);
that.map.addControl(ctrl);
//这里是修改一下覆盖在地图上面的标点
this.icon = new T.Icon({
iconUrl: require("../../assets/earthquake1.gif"), //图标地址
iconSize: new T.Point(36, 36), //图标大小
iconAnchor: new T.Point(15, 30),
});
},
天地图的功能使用
- 关于天地图打点并且鼠标移入标点显示标点相关信息
staList:[
{
staLatitude: 119.507244,
staLongitude: 27.656711,
staname:111
},
{
staLatitude: 119.507544,
staLongitude: 27.63512,
staname:222
},]
staList.forEach((item) => {
var marker = new T.Marker(
new T.LngLat(item.staLongitude, item.staLatitude),
{ icon: this.icon }
);
that.map.addOverLay(marker); //addOverLay方法,将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次。
marker.disableDragging(); //关闭标注拖拽功能,这里不关闭,标点就可以随便拖动
//这里是标点过多,以防找不到,这里直接定位到第一个标点出
that.map.centerAndZoom(
new T.LngLat(
staList[0].staLongitude,
staList[0].staLatitude
),
5
);
// 悬停显示窗体
marker.addEventListener("mousemove", function () {
console.log(112);
var sContent = `<div>${item.staName}\r${item.staLongitude}\r${item.staLatitude}</div>`;
marker.openInfoWindow(sContent, { closeButton: false });
}); // 将标注添加到地图中
marker.addEventListener("mouseout", function () {
console.log(55);
marker.closeInfoWindow();
});
});
//如果标点后端返回的格式是另一种=====================================
var lnglats = [
"116.479920,31.737813",
"116.339000,31.748890",
"116.38525035406,31.732588298908",
"118.64865,37.25144",
];
lnglats.forEach((item) => {
let point = item.split(",");
let latlng = new T.LngLat(point[0], point[1]);
// that.map.panTo(latlng, 16);
// let marker = new T.Marker(latlng, { draggable: true }); //e.lnglat,标注点的地理坐标
let marker = new T.Marker(latlng, { icon: this.icon }); //e.lnglat,标注点的地理坐标
that.map.addOverLay(marker); //addOverLay方法,将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次。
marker.disableDragging(); //关闭标注拖拽功能
});
2 . 对于行政区域进行圈画
let dde = [];
let style = {
color: "blue",
weight: 2,
opacity: 2,
lineStyle: "dashed", // 虚线
fillColor: "#5079f6",
fillOpacity: 0.1, // 透明度
};
let provice = [
{
lat: 119.507244,
lin: 27.656711,
},
{
lat: 119.507544,
lin: 27.63512,
},
{
lat: 119.504115,
lin: 27.632399,
},
{
lat: 119.506514,
lin: 27.621061,
},
];
for (let j = 0; j < provice.length; j++) {
var point = new T.LngLat(provice[j].lat, provice[j].lin);
dde.push(point);
}
const poly = new T.Polygon(dde, style);
this.map.addOverLay(poly); //向地图上添加行政区划面/
this.map.setViewport(dde); //显示最佳比例尺
// 如果区域范围后端返回的格式是另一种=====================================
var points=
"116.479920 31.737813,
116.339000 31.748890,
116.38525035406 31.732588298908,
118.64865 37.25144",
;
var pointsArr = [];
for (var i = 0; i < points.length; i++) {
var regionLngLats = [];
var regionArr = points[i].split(","); //这里是regionArr = [“116.479920 31.737813”,“116.339000 31.737813”]
for (var m = 0; m < regionArr.length; m++) {
var lnglatArr = regionArr[m].split(" "); //lnglatArr = [116.479920,31.737813]
//var lnglatArr = regionArr[m].split(",");
var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
regionLngLats.push(lnglat);
pointsArr.push(lnglat);
}
var polygon = new T.Polygon(regionLngLats,{color: "#fff", weight: 2, opacity: 1, fillOpacity: 0.1, fillColor: '#5079f6' });//创建面对象
map.addOverLay(polygon); //向地图上添加行政区划面/
map.setViewport(pointsArr);//显示最佳比例尺
}
}