引入到public index.html
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=********"type="text/javascript"></script>
显示地图
<div id="mapDiv"></div>
mounted() {
this.loadmap();
},
methods: {
loadmap() {
var map = new T.Map("mapDiv");
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(116.48982938, 39.92381118), 12);
//允许鼠标双击放大地图
map.enableScrollWheelZoom();
// 地图标区域轮廓
let style = {
color: "#0064fc",
weight: 2,
opacity: 1,
lineStyle: "dashed", // 虚线
fillColor: "transprent",
fillOpacity: 0, // 透明度
};
let points = [];
this.lines.forEach('(line) => { //this.lines经纬度的数据,经纬度格式([lng,lat])
var point = new T.LngLat(line[0], line[1]);
points.push(point);
});
var poly = new T.Polygon(points, style);
var poly = new T.Polyline(points, style); //或者用线Polyline（用Polyline避免图层点击事件不生效问题）
map.addOverLay(poly);
}
点击标点：
addMapClick();
function addMapClick() {
removeMapClick();
map.addEventListener("click", MapClick);
}
function removeMapClick() {
map.removeEventListener("click", MapClick);
}
var that = this;
function MapClick(e) {
console.log(e.lnglat.getLng() + "," + e.lnglat.getLat());
// var latlng = new T.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
map.clearOverLays();
//创建标注对象
var marker = new T.Marker(
new T.LngLat(e.lnglat.getLng(), e.lnglat.getLat())
);
//向地图上添加标注
map.addOverLay(marker);
var markerInfoWin = new T.InfoWindow(
e.lnglat.getLng() + "," + e.lnglat.getLat()
);
marker.addEventListener("click", function () {
marker.openInfoWindow(markerInfoWin);
}); // 将标注添加到地图中
that.lng = e.lnglat.getLng();
that.lat = e.lnglat.getLat();
that.change(e.lnglat.getLng(), e.lnglat.getLat(), true);
}
}
搜索
API
1，根据搜索内容获取经纬度
let addresServer = `http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"${this.form.parkAddress}"}&tk=*****`;
2，根据检索内容获取搜索出来的内容
(传的值官网有示例，代表什么意思)
let addresServer = `https://api.tianditu.gov.cn/v2/search?type=query&postStr={"yingjiType":0,"keyWord":"${_that.title}", "queryType":"1","start":"${_that.page}","mapBound":"116.3636070390624,39.94890260847703,116.52840196093695,39.965942503798544","queryTerminal":10000,"level":13,"count":"${_that.pageSize}"}&tk=******`;
搜索事件走api接口
点击搜索出来的文字：
goaddress(val) {
const _lonlat = val.lonlat.split(",");
this.searchResult({ lng: _lonlat[0], lat: _lonlat[1] });
}
搜素出来的内容点击标点
searchResult(){
var iconImg = "http://api.tianditu.gov.cn/v4.0/image/marker-icon.png";
this.marker = new T.Marker(new T.LngLat(result.lng, result.lat), { //result.lng, result.lat经纬度
icon: new T.Icon({
iconUrl: iconImg, //图标
iconSize: new T.Point(25, 41),
iconAnchor: new T.Point(30, 31),
}),
});
map.addOverLay(this.marker);
}
轨迹播放
引入 官网示例JS文件
<script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
<script src="./js//D3.js"></script> //官网的D3SvgOverlay.js文件 拿到本地来了
<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js"></script>
isCarTake() {
this.carTrack = new T.CarTrack(this.map, {
interval: 5,
speed: 10,
dynamicLine: true,
polylinestyle: { color: "#2C64A7", weight: 5, opacity: 0.9 },
Datas: this.timeList.map((item) => { //经纬度数据处理
var coordinates = item.lng;
var lnlat = new T.LngLat(coordinates[0], coordinates[1]);
return lnlat;
}),
});
},
this.carTrack.start(); //开始
this.carTrack.pause(); //暂停
this.carTrack.stop(); //结束
热力图
引入
<script type="text/javascript" src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/HeatmapOverlay.js"></script>
使用
// 热力图开启
openHeatmap() {
var points = this.convertData();
this.heatmapOverlay = new T.HeatmapOverlay({
radius: 30,
});
this.map.addOverLay(this.heatmapOverlay);
this.heatmapOverlay.setDataSet({ data: points, max: 300 });
this.heatmapOverlay.show();
},
//关闭
closeHeatmap(){
this.heatmapOverlay.hide()
},
convertData() {
var res = [];
for (var i = 0; i < this.data.length; i++) {
var geoCoord = this.geoCoordMap[this.data[i].name];
if (geoCoord) {
res.push({
name: this.data[i].name,
lat: geoCoord[1],
lng: geoCoord[0],
count: this.data[i].value,
});
}
}
return res;
},
数据格式
geoCoordMap: {
海门: [121.15, 31.89],
}
data: [
{ name: "海门", value: 9 },
]
标注+信息窗口
var data_info = this.carList; //数据源
var that = this;
let iconImg = require("../../assets/images/cl.png"); 图标
let iconImg1 = require("../../assets/images/cl1.png");
for (var i = 0; i < data_info.length; i++) {
var marker = new T.Marker(
new T.LngLat(data_info[i].longtitude, data_info[i].latitude), //经纬度
{
icon: new T.Icon({
iconUrl: data_info[i].cartype == "cc" ? iconImg1 : iconImg,
iconSize: new T.Point(44, 40),
iconAnchor: new T.Point(30, 31),
}),
}
);
that.map.addOverLay(marker); // 将标注添加到地图中
that.addClickHandler(data_info[i], marker); //点击事件
that.markers.push(marker);
//清除用
for (var i = 0; i < this.markers.length; i++) {
this.map.removeOverLay(this.markers[i]);
}
//点击
mounted(){
window.chosenMap = this.chosenMap; //信息弹框的点击事件
}
addClickHandler(data, marker) {
marker.addEventListener("click", function (e) {
//点击标注走详情接口展示详情
let content = "";
var html = "";
html += `<div>***${***}</div>`;
html += `<button onclick="chosenMap('${***}','${**}','${***}')">查看轨迹</button>`;
content = html;
var point = e.lnglat;
that.show_carTrack = false;
that.map.centerAndZoom(point, 12); //点击回中心
marker = new T.Marker(point); // 创建标注
var markerInfoWin = new T.InfoWindow(content, {
offset: new T.Point(0, -30),
}); // 创建信息窗口对象
that.map.openInfoWindow(markerInfoWin, point); //开启信息窗口
}
}
//关闭信息窗口
this.map.closeInfoWindow();
海量密集点
let that = this;
let lnglats = [];
let data_info = this.pfList //数据
for (var i = 0; i < data_info.length; i++) {
var arr = new T.LngLat(data_info[i].lon, data_info[i].lat);
arr.id = data_info[i].id;
lnglats.push(arr);
}
that.cloud = new T.CloudMarkerCollection(lnglats, {
color: "blue",
SizeType: TDT_POINT_SIZE_SMALL,
});
that.map.addOverLay(this.cloud);
that.addClickHandler(this.cloud) //点击事件 和标注信息窗口一样
//关闭
this.cloud.clear()
