//添加区域
chooseRect(){
var that = this;
var map = that.$store.state.map; //获取已保存的地图
var rectangleMeasure = {
startPoint: null,
endPoint: null,
rectangle:null,
layer: L.layerGroup(),
color: "red",
addRectangle:function(){
rectangleMeasure.destory();
var bounds = [];
bounds.push(rectangleMeasure.startPoint);
bounds.push(rectangleMeasure.endPoint);
rectangleMeasure.rectangle = L.rectangle(bounds, {color: rectangleMeasure.color, weight: 1});
rectangleMeasure.rectangle.addTo(rectangleMeasure.layer);
var northWestPoint = rectangleMeasure.rectangle.getBounds().getNorthWest(),
northEastPoint = rectangleMeasure.rectangle.getBounds().getNorthEast(),
southEastPoint = rectangleMeasure.rectangle.getBounds().getSouthEast();
var width = northWestPoint.distanceTo(northEastPoint)/1000,
height = northEastPoint.distanceTo(southEastPoint)/1000;
var area = Number(width) * Number(height);
rectangleMeasure.layer.addTo(map);
},
touchstart: function(e){
rectangleMeasure.rectangle = null;
map.dragging.disable();
var touch_1 = e.touches[0];
var latlng_1 = map.containerPointToLatLng(new L.Point(touch_1.pageX,touch_1.pageY));
rectangleMeasure.startPoint = latlng_1;
L.DomEvent.on(map._container, 'touchmove',rectangleMeasure.touchmove,that);
},
touchmove:function(e){
var touch_2 = e.touches[0];
var latlng_2 = map.containerPointToLatLng(new L.Point(touch_2.pageX,touch_2.pageY));
rectangleMeasure.endPoint = latlng_2;
rectangleMeasure.addRectangle();
L.DomEvent.on(map._container, 'touchend',rectangleMeasure.touchend,that);
},
touchend: function(e){
L.DomEvent.off(map._container, 'touchstart',rectangleMeasure.touchstart,that);
L.DomEvent.off(map._container, 'touchmove',rectangleMeasure.touchmove,that);
L.DomEvent.off(map._container, 'touchend',rectangleMeasure.touchend,that);
map.dragging.enable();
that.locations = {}; //locations在data中定义
that.locations['leftX'] = rectangleMeasure.startPoint.lat;
that.locations['leftY'] = rectangleMeasure.startPoint.lng;
that.locations['rightX'] = rectangleMeasure.endPoint.lat;
that.locations['rightY'] = rectangleMeasure.endPoint.lng;
that.locations['layer_id'] = rectangleMeasure.layer._leaflet_id;
that.locations['layer'] = rectangleMeasure.layer;
that.locations['rectangle'] = rectangleMeasure.rectangle;
//在此处对数据进行处理（1）...
},
destory:function(){
if(rectangleMeasure.rectangle)
rectangleMeasure.layer.removeLayer(rectangleMeasure.rectangle);
}
};
that.stopRectArea = rectangleMeasure;//记录已点击拉框按钮，未在地图上拉框
L.DomEvent.on(map._container, 'touchstart',rectangleMeasure.touchstart,that);//在地图上拉框
},
//清除框选
clearFrame(){
var that = this;
//清除选框
for(var i in that.allLocations){//将（1）处保存框选图层数据，在此处删除图层
that.allLocations[i].layer.removeLayer(that.allLocations[i].rectangle);
}
},
//取消拉框操作
closeRectChoose(){
var map = this.$store.state.map;
if(this.stopRectArea != null){
L.DomEvent.off(map._container, 'touchstart',this.stopRectArea.touchstart,this);
}
},
二、地理定位
用户地理位置的查询显示
getLocation(){
var that = this;
var m = that.$store.state.map;
that.clearUser();
// Geolocation
m.locate({
setView: true,
maxZoom: 16
});
m.once('locationfound', function(e) {
var radius = e.accuracy / 2;
that.userLocation = L.marker(e.latlng).addTo(m).bindPopup("你就在这个圈内");//data中定义
that.userBounds = L.circle(e.latlng, radius).addTo(m);//data中定义
});
m.once('locationerror', function(e) {
console.log('定位出错=====>', e);
});
},
clearUser(){
var that = this;
that.map = that.$store.state.map;//data中定义
if(that.userLocation != null){
that.map.removeLayer(that.userLocation);
that.userLocation = null;
that.map.removeLayer(that.userBounds);
that.userBounds = null;
}
}
三、地图测距
方法一
var mile = L.latLng([lat,lng]).distanceTo([lat,lng]); //单位（米），其中lat-纬度，lng-经度
方法二
function GetDistance( lat1, lng1, lat2, lng2){
var radLat1 = lat1*Math.PI / 180.0;
var radLat2 = lat2*Math.PI / 180.0;
var a = radLat1 - radLat2;
var b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
s = s *6378.137 ;// EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;
return s;
}
var l = GetDistance(32.06681,118.81162,32.0465,118.78238)*1000;
