1、怎么初始化地图
第一步:
//init.js
const TMapURL = 'http://api.tianditu.gov.cn/api?v=4.0&tk=你自己申请的秘钥'
export default {
init: function () {
// // 插入script脚本
return new Promise((resolve, reject) => {
// 如果已加载直接返回
if (typeof window.T !== 'undefined') {
console.log('地图脚本初始化成功...')
resolve(window.T)
return true
}
window.onload = function () {
// 插入script脚本
const scriptNode = document.createElement('script')
scriptNode.setAttribute('type', 'text/javascript')
scriptNode.setAttribute('src', TMapURL)
document.body.appendChild(scriptNode)
console.log('地图脚本初始化成功...')
console.log(window.T)
// eslint-disable-next-line
resolve(window.T)
}
})
}
}
第二步:在你需要使用天地图的地方引入
import TMap from './init'
第三步:使用,使用详细可以参考官网API 天地图API
data () {
return {
T: '',
map: '', // map对象
zoom: 10, // 地图显示级别
ctrl: '', // 地图类型控件
marker: '', // 地图标注对象
markerInfoWin: '', // 信息窗口对象
// resultData:'', //该点附近信息返回
datailedAddress: '', // 定位详细地址
addressComponent: '', // 返回定位周边信息
maxJ: 0,
minJ: 0,
maxW: 0,
minW: 0,
avgJ: 0,
avgW: 0
};
},
mounted () {
this.getMapInit(null);
},
getMapInit (dkList) {
// 获取地址信息
let that = this;
TMap.init()
.then(T => {
that.T = T;
that.map = new T.Map(that.$refs.mapDiv, { projection: 'EPSG:4326' }); // 初始化地图
that.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), that.zoom);
// 设置显示中心点和比例
// 创建地图类型对象
that.ctrl = new T.Control.MapType();
// 添加地图类型控件到地图
that.map.addControl(that.ctrl);
that.map.disableInertia(); // 禁止鼠标地图惯性拖拽
that.map.disableDoubleClickZoom(); // 禁止双击地图放大
that.map.disableKeyboard(); // 禁止双击地图放大
that.map.disableKeyboard(); // 禁止键盘操作地图
that.getPosition(109.5996, 33.50475, false);
that
.$post(
'发请求拿到数据进行处理的接口地址',
{ dk_id: dkList }
)
.then(res => {
if (res.code != '0') {
that.$message.error(res.msg); // 失败
return;
}
if (res.tSsnydDkPlotsList.length == 0) {
that.room = 4;
that.getPosition(109.5996, 33.50475, false);
} else {
for (var a = 0; a < res.tSsnydDkPlotsList.length; a++) {
var tSsnydDkPlots = res.tSsnydDkPlotsList[a];
var pointsList = [];
// var points = [];
var flag = 0;
for (var i = 0; i < tSsnydDkPlots.length; i++) {
// ------------↓↓↓↓↓↓↓↓↓↓↓坐标偏移 by zjx 演示使用.可修改
// var x = tSsnydDkPlots[i].X;
var x = parseFloat(tSsnydDkPlots[i].X) - 5 + '';
// var y = tSsnydDkPlots[i].Y;
var y = parseFloat(tSsnydDkPlots[i].Y) + 115 + '';
// ------------↑↑↑↑↑↑↑↑↑↑↑坐标偏移 by zjx 演示使用.可修改
var dkqh = tSsnydDkPlots[i].DKQH;
var coord = that.convert84GaussToBL(x, y);
if (a == 0 && i == 0) {
this.maxJ = coord[0];
this.minJ = coord[0];
this.maxW = coord[1];
this.minW = coord[1];
}
if (dkqh == flag) {
pointsList[flag - 1].push(
new T.LngLat(coord[0], coord[1])
);
} else {
var points = [];
pointsList.push(points);
pointsList[flag].push(new T.LngLat(coord[0], coord[1]));
flag++;
}
}
that.marker = new T.Marker(pointsList[0][0]);
that.map.addOverLay(that.marker);
var polygon = new T.Polygon(pointsList, {
color: 'blue',
weight: 3,
opacity: 0.5,
fillColor: '#FFFFFF',
fillOpacity: 0.5
});
// 向地图上添加面
that.map.addOverLay(polygon);
}
var p = that.getCenter();
var z = that.getZoom();
that.map.centerAndZoom(new T.LngLat(that.avgJ, that.avgW), z); // 设置显示中心点和比例
}
});
})
.catch(error => {
// 失败回调
that.$message({
center: true,
message: error,
type: 'error'
});
});
},
2、地图添加覆盖物后怎么不能进行拖拽
解决:天地图显示不全,只显示一部分或者一半_草样的年华的博客-CSDN博客
3、怎么把单位为米的坐标转换为WGS84坐标
我下面这些坐标的单位是米,怎么把这些米为到位的坐标转换为WGS84坐标呢?他们之间的换算关系是多少呢?可以下载js库proj.js,专门做坐标转换
直接上代码:
convert84GaussToBL (x, y) {
// 带宽
var ZONE_WITH = 3;
// 带号
// 三度带计算公式 带号 = 横坐标前两位
// 注意 3度带和6度带的 带号和中央经线的计算方式不同
var PROJ_NO = Math.floor(y / 1000000);
// 中央经线(弧度制)
// 三度带计算公式: 中央经线(弧度制) = 带号 * 带宽 * (π/180)
const longitude0 = PROJ_NO * ZONE_WITH * (Math.PI / 180);
// 长半径(84)
var a = 6378137;
// 偏率(84)
var f = 1 / 298.2572236;
let longitude, latitude, X0, Y0, xval, yval;
let e1, e2, ee, NN, T, C, M, D, R, u, fai;
X0 = 0;
Y0 = PROJ_NO * 1000000 + 500000;
xval = x - X0;
yval = y - Y0;
e2 = 2 * f - f * f;
e1 = (1.0 - Math.sqrt(1 - e2)) / (1.0 + Math.sqrt(1 - e2));
ee = e2 / (1 - e2);
M = xval;
u =
M / (a * (1 - e2 / 4 - (3 * e2 * e2) / 64 - (5 * e2 * e2 * e2) / 256));
fai =
u +
((3 * e1) / 2 - (27 * e1 * e1 * e1) / 32) * Math.sin(2 * u) +
((21 * e1 * e1) / 16 - (55 * e1 * e1 * e1 * e1) / 32) *
Math.sin(4 * u) +
((151 * e1 * e1 * e1) / 96) * Math.sin(6 * u) +
((1097 * e1 * e1 * e1 * e1) / 512) * Math.sin(8 * u);
C = ee * Math.cos(fai) * Math.cos(fai);
T = Math.tan(fai) * Math.tan(fai);
NN = a / Math.sqrt(1.0 - e2 * Math.sin(fai) * Math.sin(fai));
R =
(a * (1 - e2)) /
Math.sqrt(
(1 - e2 * Math.sin(fai) * Math.sin(fai)) *
(1 - e2 * Math.sin(fai) * Math.sin(fai)) *
(1 - e2 * Math.sin(fai) * Math.sin(fai))
);
D = yval / NN;
// 计算经度(Longitude) 纬度(Latitude)
longitude =
longitude0 +
(D -
((1 + 2 * T + C) * D * D * D) / 6 +
((5 - 2 * C + 28 * T - 3 * C * C + 8 * ee + 24 * T * T) *
D *
D *
D *
D *
D) /
120) /
Math.cos(fai);
latitude =
fai -
((NN * Math.tan(fai)) / R) *
((D * D) / 2 -
((5 + 3 * T + 10 * C - 4 * C * C - 9 * ee) * D * D * D * D) / 24 +
((61 + 90 * T + 298 * C + 45 * T * T - 256 * ee - 3 * C * C) *
D *
D *
D *
D *
D *
D) /
720);
// 转换为度
let coord = [0.0, 0.0];
coord[0] = (longitude * 180) / Math.PI;
coord[1] = (latitude * 180) / Math.PI;
// alert('转换前:' + x + ',' + y + '\br转换后:' + "经度"+coord[0]+"纬度"+coord[1])
return coord;
},