小程序在地图上画矩形
Page({
/**
* 页面的初始数据
*/
data: {
longitude: 119.94311,
latitude: 31.70165,
angle: 26.565, // 夹角
length: 50, // 矩形长度
short: 25, // 矩形高度
radius: 100, // 半径
},
// 获取位置
onGetLocation() {
wx.getLocation({
type: 'gcj02',
success: (res) => {
this.setData({
longitude: res.longitude,
latitude: res.latitude,
})
},
fail: (res) => {
console.log('失败：', res)
},
})
},
// 视图发生改变，修改中心点
mapchangeTap: function(e) {
let that = this;
if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
that.mapCtx = wx.createMapContext('map');
that.mapCtx.getCenterLocation({
success(res) {
that.setData({
longitude: res.longitude,
latitude: res.latitude,
})
let lon = res.longitude,
lat = res.latitude,
angle = that.data.angle,
length = that.data.length,
short = that.data.short;
that.concatFun(lon, lat, angle, length, short);
}
})
}
},
onLoad: function(options) {
let that = this;
that.onGetLocation();
var lon = that.data.longitude,
lat = that.data.latitude,
angle = that.data.angle,
length = that.data.length,
short = that.data.short;
that.concatFun(lon, lat, angle, length, short);
},
concatFun: function (lon, lat, angle, length, short) {
let that = this;
let beleve = Math.sqrt(length * length + short * short) / 2,
coordA = this.destinceAngle({ lon: lon, lat: lat }, angle, beleve),
coordB = this.destinceAngle({ lon: lon, lat: lat }, (180 - angle), beleve),
coordC = this.destinceAngle({ lon: lon, lat: lat }, (180 + angle), beleve),
coordD = this.destinceAngle({ lon: lon, lat: lat }, (360 - angle), beleve);
let pointsArr = [];
pointsArr.push(coordA[0]); pointsArr.push(coordB[0]); pointsArr.push(coordC[0]); pointsArr.push(coordD[0]); pointsArr.push(coordA[0]);
that.setData({
polyline: [{
points: pointsArr,
color: "#FF0000DD",
width: 2,
dottedLine: false
}],
circles: [{
latitude: that.data.latitude,
longitude: that.data.longitude,
color: '#4785FB',
radius: that.data.radius,
fillColor: '#4785FBabc',
strokeWidth: 1
}]
})
},
// 度换成弧度
lIBRad: function (d) {
return d * Math.PI / 180;
},
// 弧度换成度
lIBDeg: function (x) {
return x * 180 / Math.PI;
},
// 根据中心点计算四个点
destinceAngle: function (lonlat, brng, dist) {
var u = this;
var ct = {
a: 6378137,
b: 6356752.3142,
f: 1 / 298.257223563
};
var a = ct.a,
b = ct.b,
f = ct.f;
var lon1 = lonlat.lon * 1;
var lat1 = lonlat.lat * 1;
var s = dist;
var alpha1 = u.lIBRad(brng);
var sinAlpha1 = Math.sin(alpha1);
var cosAlpha1 = Math.cos(alpha1);
var tanU1 = (1 - f) * Math.tan(u.lIBRad(lat1));
var cosU1 = 1 / Math.sqrt((1 + tanU1 * tanU1)),
sinU1 = tanU1 * cosU1;
var sigma1 = Math.atan2(tanU1, cosAlpha1);
var sinAlpha = cosU1 * sinAlpha1;
var cosSqAlpha = 1 - sinAlpha * sinAlpha;
var uSq = cosSqAlpha * (a * a - b * b) / (b * b);
var A = 1 + uSq / 16384 * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq)));
var B = uSq / 1024 * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)));
var sigma = s / (b * A),
sigmaP = 2 * Math.PI;
while (Math.abs(sigma - sigmaP) > 1e-12) {
var cos2SigmaM = Math.cos(2 * sigma1 + sigma);
var sinSigma = Math.sin(sigma);
var cosSigma = Math.cos(sigma);
var deltaSigma = B * sinSigma * (cos2SigmaM + B / 4 * (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) -
B / 6 * cos2SigmaM * (-3 + 4 * sinSigma * sinSigma) * (-3 + 4 * cos2SigmaM * cos2SigmaM)));
sigmaP = sigma;
sigma = s / (b * A) + deltaSigma;
}
var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1;
var lat2 = Math.atan2(sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1,
(1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp));
var lambda = Math.atan2(sinSigma * sinAlpha1, cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1);
var C = f / 16 * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha));
var L = lambda - (1 - C) * f * sinAlpha *
(sigma + C * sinSigma * (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)));
var revAz = Math.atan2(sinAlpha, -tmp); // final bearing
var lon_destina = lon1 * 1 + u.lIBDeg(L);
var lonlat_destination = [{
longitude: lon_destina,
latitude: u.lIBDeg(lat2)
}];
return lonlat_destination;
},
})