地图（vue+leaflet+element）
一、地图拉矩形框
- web端代码
// 添加区域
addRectArea(){
var that = this;
var map = that.$store.state.map; //获取已保存的地图
if(that.stopRectArea != null){ //stopRectArea在data中定义，清除重复的拉框操作
map.off('mousedown', that.stopRectArea.mousedown);
}
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);
},
mousedown: function(e){
rectangleMeasure.rectangle = null;
map.dragging.disable();
rectangleMeasure.startPoint = e.latlng;
map.on('mousemove',rectangleMeasure.mousemove)
},
mousemove:function(e){
rectangleMeasure.endPoint = e.latlng;
rectangleMeasure.addRectangle();
map.off('mousedown ', rectangleMeasure.mousedown).on('mouseup', rectangleMeasure.mouseup);
},
mouseup: function(e){
map.dragging.enable();
map.off('mousemove',rectangleMeasure.mousemove).off('mouseup', rectangleMeasure.mouseup);
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; //记录已点击拉框按钮，未在地图上拉框
map.on('mousedown', rectangleMeasure.mousedown); //在地图上拉框
},
//清除框选
clearFrame(){
var that = this;
if(that.stopRectArea != null){
var map = that.$store.state.map;
map.off('mousedown', that.stopRectArea.mousedown);
}
//清除选框
for(var i in that.allLocations){ //将（1）处保存框选图层数据，在此处删除图层
that.allLocations[i].layer.removeLayer(that.allLocations[i].rectangle);
}
},
- 移动端代码
//添加区域
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;
四、地图截图
- 对地图div区域截图
//1、引入html2canvas.min.js文件，jquery这里用了2.2.4版本
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
//2、地图配置加上:preferCanvas: true
var map = L.map('mainPage',{
center:[32.041975, 118.788561],
crs:L.CRS.EPSG4326,
zoom: 12,
maxZoom: 19,
zoomControl: true,
attributionControl:false,
layers:[wmts],
preferCanvas: true //***轨迹***
});
//3、html
<div id="qqq">
<div id="mainPage" style="width:100%;height:100%"></div>
<el-button type="text" @click="testCanvas" icon="el-icon-picture-outline">抓取</el-button>
</div>
//4、javascript
testCanvas(){
var that = this;
console.log(1);
html2canvas(that.jQuery("#qqq"),{ // $("#qqq")是你要复制生成canvas的区域，可以自己选
useCORS:true,
logging:true,
onrendered:function(canvas){
// dataURL =canvas.toDataURL("image/png");
console.log(2);
that.jQuery("body").append(canvas);
console.log(canvas);
//下载图片
// that.jQuery('#down_button').attr( 'href' , dataURL ) ;
// that.jQuery('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
},
width:1000,
height:570
})
}
五、地图leaflet画圆
1、0.7.7版本：L.circle([32.100276,118.911946], 500).addTo(map);
2、1.3.4版本：L.circle([50.5, 30.5], {radius: 500}).addTo(map);
