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 学习笔记一传送门学习笔记二传送门 学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
随机推荐
- 使用策略模式减少if else
首先要明确的说出策略模式会不可避免导致你的代码类变得很多,如果对应方法逻辑很复杂时可采用,如果逻辑不是很复杂就有点大材小用了. package com.zihexin.application.stra ...
- 从char到QChar
char类型是c/c++中内置的类型,描述了1个字节的内存信息的解析.比如: char gemfield=’g’; 那么在由gemfield标记的这块内存的大小就是1个字节,信息就是01100111, ...
- AB窗体互传参数本质
一.找了好几个,都不靠谱,不是说不靠谱,自己感觉太繁琐,根本就是本窗体的属性(对象)的传递,1实例化2把实例化后的窗体属性=本窗体的对象 二.传递的的时候都是在互相引用的时候传递,推荐的个人认为最简单 ...
- 对每个CheckBox的循环
$("input[name='ck2']").each(function(){ if(this.checked == false){ $(this).parent().parent ...
- AutoMapUtility
实体属性自动映射,支持对象间属性值复制和List复制 安装 Install-Package AutoMapUtility -Version 1.0.2 https://github.com/leopa ...
- 扩展：Zero Copy
- lumen返回网站base url
可以使用全局帮助函数url() echo url(); //输出http://test.domain.com
- 【Hadoop】MapReduce练习：多job关联实现倒排索引
概述 倒排索引(英语:Inverted index),也常被称为反向索引.置入档案或反向档案,是一种索引方法,被用来存储在全文搜索下某个单词在一个文档或者一组文档中的存储位置的映射.它是文档检索系统中 ...
- realpython教程之机器学习之Windows下的环境配置
不得不说,realPython的教程确实写的仔细,准确,有逻辑.果然高质量的学习材料还是更利于学的. 反观我们学校,似乎就有些急功近利了.连Python语言基础都没学,就直接讲深度学习.完全不符合学习 ...
- shell-常用命令，重定向和文件包含
shell的知识点并不多,这里简单介绍一下常用的一些东西 常用命令 echo 显示普通字符串 echo "test" 显示转义字符 echo "\"test\& ...