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 学习笔记一传送门学习笔记二传送门 学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
随机推荐
- laravel 链式组合查询数据
laravel 链式组合查询数据 一.总结 一句话总结: - 就是链式操作的基本操作,因为返回的都是一直可以进行链式操作的对象,所以我们接收返回的对象即可 - $result = DB::table( ...
- ios-Realm数据库的使用
[集成 Realm] 本 Demo 使用 OC 创建,所以先进入 Realm 官网 (我记得之前都是有官方中文教程的,但现在最新版没有中文了),到 Objective-C -> Getting ...
- 如何在uboot下列出使用的设备树信息？
答: 使用fdt命令 1. fdt addr <fdt addr> (将设备树加载到fdt addr指定的位置,如tftpboot 0x80000000 my.dtb,那么fdt add ...
- C++ STL——模板
目录 一 函数模板的特性 二 模板的实现机制 三 类模板 四 类模板如何派生子类 五 普通类的.h和.cpp文件分离 六 类模板在类内类外的实现 七 模板的应用实例 注:原创不易,转载请务必注明原作者 ...
- nginx优化后的主配置文件
user web web; #nginx的程序账户和程序组 worker_processes auto; #worker进程数 auto设为默认 error_log /app/logs/nginx/w ...
- SpringMVC整合SpringFox实践总结
项目中使用的swagger框架在生成api文档时存在一些问题: 1. 控制器下方法无法点击展开 2.api内容结构混乱 基于上述原因,重新整合重构了一下api文档生成的代码.在此将重整过程记录下来,方 ...
- C# WinForm设置窗口无边框、窗口可移动、窗口显示在屏幕中央、控件去边框
1)窗口去除边框 在组件属性中FormBorderStyle设为None 2)窗口随着鼠标移动而动 添加引用using System.Runtime.InteropServices; 在初始化控件{I ...
- 微信小程序开发-框架
小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务.框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框 ...
- jenkins常用插件安装
1.常用jenkins插件 插件相关下载地址:http://updates.jenkins-ci.org/download/plugins/ git.hpi git-client.hpi gitlab ...
- Apriori算法--Python实现
# -*- coding: utf-8 -*- """ Created on Mon Nov 05 22:50:13 2018 @author: ZhuChaochao ...