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 学习笔记一传送门学习笔记二传送门 学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
随机推荐
- react-hook的简单的动画插件react-simple-animate（其实是react插件，但是这里只介绍react-hook的简单用法）
1.useAnimate(普通anima动画的形式) (1)js const animate = useAnimate({ complete: { display: 'none' }, //动画完成的 ...
- CentOS 7服务器下Nginx安装配置
一.安装编译工具及库文件 $ yum -y install make zlib zlib-devel gcc gcc-c++ libtool openssl openssl-devel pcre pc ...
- mysql 创建++删除 数据库
创建RUNOOB数据库,并设定编码集为utf8 CREATE DATABASE IF NOT EXISTS RUNOOB DEFAULT CHARSET utf8 COLLATE utf8_gener ...
- SoundPool 播放短声音
SoundPool 最大只能申请1M的内存空间,只能用一些很短的声音片段,而不是用它来播放歌曲或者做游戏背景音乐. 使用 SoundPool 播放短声音实现步骤如下: // 创建SoundPool实例 ...
- 互斥锁lock、信号量semaphore、事件Event、
1.互斥锁lock 应用在多进程中互斥所lock:互斥锁是进程间的get_ticket互相排斥进程之间,谁先枪占到资源,谁就先上锁,等到解锁之后,下一个进程在继续使用.# 语法: 上锁: lock.a ...
- python实现在目录中查找指定文件的方法
python实现在目录中查找指定文件的方法 本文实例讲述了python实现在目录中查找指定文件的方法.分享给大家供大家参考.具体实现方法如下: 1. 模糊查找 代码如下: import os from ...
- 第一个React Native项目
1>下图操作创建第一个React Native项目: 用Xcode运行界面如下: 记住: 在使用项目文件期间,终端记住不要关闭的哟!!! 改变了程序代码,需要刷新运行,使用快捷键: Comman ...
- jQuery,javascript获得网页的高度和宽度【收藏】
网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...
- C#大文件流式压缩加解密
* * , CancellationToken token=default) { try { FileStream zipStream = new FileStream(writeFile, File ...
- ASP.NET Core 入门笔记5，ASP.NET Core MVC控制器入门
摘抄自https://www.cnblogs.com/ken-io/p/aspnet-core-tutorial-mvc-controller-action.html 一.前言 1.本教程主要内容 A ...