Leaflet个人封装笔记
<!DOCTYPE html>
<html>
<head>
<link href="style/leaflet.css" type="text/css" rel="stylesheet"/>
<link href="style/GISindex.css" type="text/css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="script/leaflet-src.js"></script>
<script src="script/Label.js"></script>
<script src="script/BaseMarkerMethods.js"></script>
<script src="script/CircleMarker.Label.js"></script>
<script src="script/Map.Label.js"></script>
<script src="script/leaflet.js"></script>
<script src="script/proj4.js"></script>
<script src="script/proj4leaflet.js"></script>
<script src="script/icon.js"></script>
</head>
<body>
<div class="tree">树状图</div>
<div id="map"></div>
<div id="banner">
<button id="pointleSel" > 标点 </button>
<button id="rectangleSel" > 矩形 </button>
<button id="cycleSel" > 圆形 </button>
<button id="polygonleSel" > 多边形 </button>
<button id="lineleSel" > 折线 </button>
<button id="clear" > 清空图层 </button>
</div>
<script>
var crs = new L.Proj.CRS('EPSG:900913',
'+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs',
{
resolutions: function () {
level = 19;
var res = [];
res[0] = Math.pow(2, 18);
for (var i = 1; i < level; i++) {
res[i] = Math.pow(2, (18 - i))
}
return res;
}(),
origin: [0,0],
bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
}),
map = L.map('map', {
crs: crs,
center: [30, 100],
zoom: 8,
doubleClickZoom:false,
crollWheelZoom:true,
load:null
});
new L.TileLayer('http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&udt=20150518', {
subdomains: [0,1,2],
tms: true
}).addTo(map);
map.setView([32.055,118.810], 10);
$(function(){
DrewPoint(32.055,118.810,3);
$("#pointleSel").unbind('click').bind('click',function(){
map.on('mousedown', pointMeasure.mousedown).on('mouseup', pointMeasure.mouseup);
});
$("#rectangleSel").unbind('click').bind('click',function(){
map.on('mousedown', rectangleMeasure.mousedown).on('mouseup', rectangleMeasure.mouseup);
});
$("#cycleSel").unbind('click').bind('click',function(){
map.on('mousedown', cycleMeasure.mousedown).on('mouseup', cycleMeasure.mouseup);
});
$("#polygonleSel").unbind('click').bind('click',function(){
map.on('mousedown', polygonMeasure.mousedown).on('mouseup', polygonMeasure.mouseup);
});
$("#lineleSel").unbind('click').bind('click',function(){
map.on('mousedown', lineMeasure.mousedown).on('mouseup', lineMeasure.mouseup);
});
$("#clear").unbind('click').bind('click',function(){
clear();
});
});
//标点绘制
var pointMeasure = {
point: null,
tips:null,
layer: L.layerGroup(),
color: "#0D82D7", addTips:function(msg){
pointMeasure.point.bindPopup(msg).openPopup();
},
mousedown: function(e){
pointMeasure.point=new L.marker(e.latlng,{icon: icon.normalIcon})
pointMeasure.addTips("坐标：["+e.latlng.lat.toFixed(3)+","+e.latlng.lng.toFixed(3)+"]");
map.addLayer(pointMeasure.point)
},
mouseup: function(e){
map.dragging.enable();
map.off('mousedown',pointMeasure.mousedown);
}
}
//矩形绘制
var rectangleMeasure = {
startPoint: null,
endPoint: null,
rectangle:null,
area:0,
layer: L.layerGroup(),
color: "#0D82D7",
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;
area = Number(width) * Number(height);
rectangleMeasure.layer.addTo(map);
// rectangleMeasure.addTips("面积："+area.toFixed(3)+"平方公里");
},
addTips:function(msg){
//msg内可以直接写html内容，样式自调
rectangleMeasure.rectangle.bindPopup(msg).openPopup();
},
close:function(){
},
mousedown: function(e){
rectangleMeasure.rectangle = null;
rectangleMeasure.tips = 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();
rectangleMeasure.addRectangle();
rectangleMeasure.addTips("面积："+area.toFixed(3)+"平方公里");
map.off('mousemove',rectangleMeasure.mousemove).off('mouseup', rectangleMeasure.mouseup).off('mousedown', rectangleMeasure.mousedown);
map.on('mouseover', rectangleMeasure.mouseover); },
/**
* 这个移入事件不知道为什么不是很敏感，暂时没有进行处理
* @return {[type]} [description]
*/
mouseover:function(){
$(".tree").append("移入一次");
},
destory:function(){
if(rectangleMeasure.rectangle)
rectangleMeasure.layer.removeLayer(rectangleMeasure.rectangle);
}
}
//圆形绘制
var cycleMeasure = {
startPoint: null,
endPoint: null,
circle:null,
tips:null,
color: "#0D82D7",
fillOpacity:0.2,
radius:null,
addTips:function(msg){
cycleMeasure.circle.bindPopup(msg).openPopup();
},
mousedown: function(e){
cycleMeasure.circle = new L.circle();
cycleMeasure.tips = null;
map.dragging.disable();
cycleMeasure.startPoint = e.latlng;
map.on('mousemove',cycleMeasure.mousemove)
},
mousemove:function(e){
if(cycleMeasure.startPoint) {
cycleMeasure.radius = L.latLng(e.latlng).distanceTo(cycleMeasure.startPoint);
cycleMeasure.circle.setLatLng(cycleMeasure.startPoint);
cycleMeasure.circle.setRadius(cycleMeasure.radius);
cycleMeasure.circle.setStyle({color: cycleMeasure.color, weight: 1});
// cycleMeasure.circle.setOpacity({fillOpacity:cycleMeasure.fillOpacity});
map.addLayer(cycleMeasure.circle);
}
},
mouseup: function(e){
cycleMeasure.radius = L.latLng(e.latlng).distanceTo(cycleMeasure.startPoint);
cycleMeasure.radius = L.latLng(e.latlng).distanceTo(cycleMeasure.startPoint);
cycleMeasure.circle.setLatLng(cycleMeasure.startPoint);
cycleMeasure.circle.setRadius(cycleMeasure.radius);
cycleMeasure.circle.setStyle({color: cycleMeasure.color, weight: 1});
map.addLayer(cycleMeasure.circle);
var area = Number(cycleMeasure.radius)/1000 * Number(cycleMeasure.radius)/1000*Math.PI;
cycleMeasure.addTips("面积："+area.toFixed(3)+"平方公里");
map.dragging.enable();
map.off('mousemove',cycleMeasure.mousemove).off('mouseup', cycleMeasure.mouseup).off('mousedown', cycleMeasure.mousedown);
}
}
//多边形形绘制
var polygonMeasure = {
polygons:new L.polyline([]),
tips:null,
color: "#0D82D7",
points:[],
fillOpacity:0.2,
polygonsEnd:new L.polyline([]),
lines:new L.polyline([]),
addTips:function(msg){
polygonMeasure.polygonsEnd.bindPopup(msg).openPopup();
}, mousedown: function(e){
polygonMeasure.points.push([e.latlng.lat,e.latlng.lng])
polygonMeasure.lines.addLatLng(e.latlng)
map.addLayer(polygonMeasure.lines)
map.addLayer(L.circle(e.latlng,{color:polygonMeasure.color,fillOpacity:polygonMeasure.fillOpacity}))
map.on('mousemove',polygonMeasure.mousemove).on('dblclick',polygonMeasure.dblclick)
},
mousemove:function(e){
if(polygonMeasure.points.length>0) {
ls=[polygonMeasure.points[polygonMeasure.points.length-1],[e.latlng.lat,e.latlng.lng]]
polygonMeasure.polygons.setLatLngs(ls)
polygonMeasure.polygons.setStyle({color:polygonMeasure.color,fillOpacity:polygonMeasure.fillOpacity})
map.addLayer(polygonMeasure.polygons) }
map.on('dblclick',polygonMeasure.dblclick)
},
mouseup: function(e){
map.on('mousemove',polygonMeasure.mousemove).on('dblclick',polygonMeasure.dblclick)
},
dblclick:function(e)
{
polygonMeasure.polygonsEnd = L.polygon([polygonMeasure.points],{color:polygonMeasure.color,fillOpacity:polygonMeasure.fillOpacity})
map.addLayer(polygonMeasure.polygonsEnd)
var area = GetArea(polygonMeasure.points);
polygonMeasure.addTips("面积："+area.toFixed(3)+"平方公里");
polygonMeasure.points=[];
polygonMeasure.lines=new L.polyline([])
polygonMeasure.polygons=new L.polyline([])
map.off('mousemove',polygonMeasure.mousemove).off('mouseup', polygonMeasure.mouseup).off('mousedown', polygonMeasure.mousedown).off('dblclick',polygonMeasure.dblclick);
}
}
//折线绘制
var lineMeasure = {
tempLines:new L.polyline([]),
tempLinesEnd:new L.polyline([]),
tips:null,
color: "#0D82D7",
points:[],
length:0,
fillOpacity:0.2,
lines:null,
addTips:function(msg){
lineMeasure.tempLinesEnd.bindPopup(msg).openPopup();
},
mousedown: function(e){
lineMeasure.lines = new L.polyline(lineMeasure.points,{color:lineMeasure.color,fillOpacity:lineMeasure.fillOpacity});
lineMeasure.points.push([e.latlng.lat,e.latlng.lng])
lineMeasure.lines.addLatLng(e.latlng)
map.addLayer(lineMeasure.lines)
map.addLayer(L.circle(e.latlng,{color:lineMeasure.color,fillOpacity:lineMeasure.fillOpacity}))
map.on('mousemove',lineMeasure.mousemove).on('dblclick',lineMeasure.dblclick)
},
mousemove:function(e){
if(lineMeasure.points.length>0) {
ls=[lineMeasure.points[lineMeasure.points.length-1],[e.latlng.lat,e.latlng.lng]]
lineMeasure.length += L.latLng(e.latlng).distanceTo(lineMeasure.points[lineMeasure.points.length-1])/1000;
lineMeasure.tempLines.setLatLngs(ls)
map.addLayer(lineMeasure.tempLines,{color:lineMeasure.color,fillOpacity:lineMeasure.fillOpacity})
}
map.on('dblclick',lineMeasure.dblclick)
},
mouseup: function(e){
map.on('mousemove',lineMeasure.mousemove).on('dblclick',lineMeasure.dblclick)
},
dblclick:function(e)
{
lineMeasure.tempLinesEnd=L.polyline(lineMeasure.points,{color:lineMeasure.color,fillOpacity:lineMeasure.fillOpacity})
map.addLayer(lineMeasure.tempLinesEnd)
lineMeasure.addTips("总长度："+lineMeasure.length.toFixed(3)+"公里");
lineMeasure.points=[];
lineMeasure.tempLines = new L.polyline([]);
lineMeasure.length=0;
map.off('mousemove',lineMeasure.mousemove).off('mouseup', lineMeasure.mouseup).off('mousedown', lineMeasure.mousedown).off('dblclick',lineMeasure.dblclick);
}
}
//清除图层
function clear(){
//清除图层
$("svg").children("g").children("path").remove();
//清除提示
$(".leaflet-label-tffq").remove();
//清除标点
$(".leaflet-marker-pane").children("img").remove();
//提示信息
$(".leaflet-popup-pane").children(".leaflet-zoom-animated").children("div").remove();
$(".leaflet-shadow-pane").children("img").remove();
}
//画点
function DrewPoint(x,y,type)
{
switch(type)
{
case 1:
L.marker([x,y],{icon:icon.pwqyIcon}).addTo(map).bindPopup("坐标：["+x.toFixed(3)+","+y.toFixed(3)+"]").openPopup();
break;
case 2:
L.marker([x,y],{icon:icon.pkIcon}).addTo(map).bindPopup("坐标：["+x.toFixed(3)+","+y.toFixed(3)+"]").openPopup();
break;
default:
L.marker([x,y],{icon:icon.normalIcon}).addTo(map).bindPopup("坐标：["+x.toFixed(3)+","+y.toFixed(3)+"]").openPopup();
break;
}
}
//使用海伦公式获取多边形面积
function GetArea(pointArray)
{
console.log(pointArray[0][0]);
var a,b,c;
var result=0;
var p;//
for(var i=2;i<pointArray.length-1;i++)
{
a=L.latLng(pointArray[i-1]).distanceTo(pointArray[0])/1000;
b=L.latLng(pointArray[i]).distanceTo(pointArray[0])/1000;
c=L.latLng(pointArray[i-1]).distanceTo(pointArray[i])/1000;
p=(a+b+c)/2;
result+=Math.sqrt(p*(p-a)*(p-b)*(p-c));//海伦公式
}
return result;
}
</script>
</body>
</html>
Leaflet个人封装笔记的更多相关文章
- [jQuery]我的封装笔记
jQuery封装插件开发入门教程: http://www.awaimai.com/467.html 一.默认值和选项 jQuery.extend函数解释 extend(dest,src1,src2,s ...
- Leaflet客户端学习笔记
Leaflet介绍 Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的.开源的 JavaScript 库.代码仅有 33 KB,但它具有开发在线地图的大部分功能.支持插件扩展, L ...
- PADS 创建封装笔记
1.在PADS logic中新建元件和CAE封装 2.在PADS layout 中建立元件的PCB封装 3.用PADS Library Converter 把以前版本的库转化为现在的版本.
- 【翻译】在Ext JS集成第三方库
原文地址:http://www.sencha.com/blog/integrating-ext-js-with-3rd-party-libraries/ 作者:Kevin Kazmierczak Ke ...
- 整合 Ext JS 和第三方类库
介绍 ExtJS提供了许多高度可定制化内置组件.如果它不在框架(framework)里面,你可以很容易的扩展这些类,或者浏览Sencha市场(Sencha Market) 寻找你可能需要的任何东西.那 ...
- MySQL数据库学习笔记（十）----JDBC事务处理、封装JDBC工具类
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
- [Effective JavaScript 笔记]第27条：使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...
- Java学习笔记之：Java封装
一.引言 在面向对象程式设计方法中,封装(英语:Encapsulation)是指,一种将抽象性函式接口的实作细节部份包装.隐藏起来的方法. 封装可以被认为是一个保护屏障,防止该类的代码和数据被外部类定 ...
- [Firefly引擎][学习笔记三][已完结]所需模块封装
原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
随机推荐
- 图解Python 【第二篇】：Python基础2
本节内容一览图 一.数据类型 1.数字 2 是一个整数的例子.长整数 不过是大一些的整数.3.23和52.3E-4是浮点数的例子.E标记表示10的幂.在这里,52.3E-4表示52.3 * 10-4. ...
- SpringCloud（三）之Feign实现负载均衡的使用
一 点睛 Feign是Netflix开发的声明式.模板化的HTTP客户端, Feign可以帮助我们更快捷.优雅地调用HTTP API. 在Spring Cloud中,使用Feign非常简单——创建一个 ...
- css清除浮动的几种方式，哪种最合适？
细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...
- .netcore centos配置systemctl自动启动
systemd分两种服务系统和用户服务 对应存储位路径为系统(/usr/lib/systemd/system).用户(/etc/systemd/user/) [Unit] Description=ap ...
- 改进后的socket轮子,欢迎挑战
运行环境.net core2.1 下载地址
- kubernetes安装dashboard步骤 【h】
本篇文章参考kubernetes---dashboardv1.8.3版本安装详细步骤及 kubernetes-dashboard(1.8.3)部署与踩坑这两篇文章,详细写了自己部署过程中的操作.遇到的 ...
- webdriver的八种定位
转自https://zhuanlan.zhihu.com/p/54588889 在UI层面的自动化测试开发中,元素的定位与操作是基础,也是经常遇到的困难所在.webdriver提供了8种定位: 1. ...
- 小林的VB6動態壁紙模擬程序
本項目參考了以下資料[這可能對你理解程序運行有幫助]: https://github.com/Yinmany/WinWallpaper https://blog.csdn.net/breaksoftw ...
- 【图像处理】FFmpeg解码H264及swscale缩放详解
http://blog.csdn.net/gubenpeiyuan/article/details/19548019 主题 FFmpeg 本文概要: 本文介绍著名开源音视频编解码库ffmpeg如何 ...
- C#常用处理数据类型转换、数据源转换、数制转换、编码转换相关的扩展
public static class ConvertExtensions { #region 数据类型转换扩展方法 /// <summary> /// object 转换成string ...