小程序在地图上画矩形

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;

},

 

})