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 学习笔记一传送门学习笔记二传送门 学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
随机推荐
- 从char到QChar
char类型是c/c++中内置的类型,描述了1个字节的内存信息的解析.比如: char gemfield=’g’; 那么在由gemfield标记的这块内存的大小就是1个字节,信息就是01100111, ...
- ci框架总结（一）
在进行数据库操作前一定要先初始化数据库类:$this->load->database(); 在model类中: class Myiapp_model extends CI_Model{ p ...
- other备忘
wps CONCATENATE 只是因为格式 设置成了文本,把这列 格式 设置成 常规,双击下 结果就出来了 https://zhidao.baidu.com/question/21208668961 ...
- 性能测试 | 系统运行缓慢，CPU 100%，Full GC次数过多问题排查
处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过多的问题.当然,这些问题的最终导致的直观现象就是系统运行缓慢,并且有大量的报警.本文主要针对系统运行缓慢这 ...
- Android之SharedPreference存储数据
*路径: /data/data/包名/shared_prefs/ * 以Xml文件存储数据 * 编写步骤 // 1. 获取sp SharedPreferences sp = this.getShare ...
- C# WPF ASP.net 上传多文件和数据
C# WinForm 上传多文件和数据 public static class HttpHelper { private static readonly Encoding DEFAULTENCODE ...
- 实验一 绘制任意斜率的直线段 | 使用VS2017工具
这世界上有很多坑,注定有些坑是要填的.下面我就用VS2017使用MFC对这个课堂实验进行填坑. 一.实验目的 (1)掌握任意斜率直线段的重点 Bresenham 扫描转换算法: (2)掌握 Cline ...
- 利用beautifulsoup下载网页html代码中的css, js, img文件并保存
# -*- coding:utf-8 -*- from bs4 import BeautifulSoup as BS import urllib.request as rqst import os u ...
- kettle在linux安装
1 首先保证linux上面已经安装jdk,因为kettle是用Java开发,依赖于jdk 2 将pdi-ce-7.1.0.0-12.zip 上传到linux对应文件夹下面(笔者上传到/opt/kett ...
- 权限控制(delphi actionlist)
权限控制(delphi TActionList方案)在软件开发中,为软件加入权限控制功能,使不同的用户有不同的使用权限,是非常重要的一项功能,由其在开发数据库方面的应用,这项功能更为重要.但是,要为一 ...