在找leaflet和wfs的相关知识中  看到了这一效果 感觉不错：

这个效果的实现主要使用了JqueryUI的draggable和leaflet的containerPointToLatLng（可由屏幕坐标返回地理坐标）方法

// Drag & Drop

    $(".drag").draggable({

    helper: 'clone',

    containment: 'map',

    start: function(evt, ui) {

    $('#box').fadeTo('fast', 0.6, function() {});

    },

    stop: function(evt, ui) {

    $('#box').fadeTo('fast', 1.0, function() {});

    var options = {

    pid: guid(),

    type: ui.helper.attr('type'),

    icon: eval(ui.helper.attr('type') + 'Icon'),

    draggable: true

    };

    insertPoint(

    map.containerPointToLatLng([ui.offset.left, ui.offset.top]),

    options

    );

    }

    });

完整代码：

<!DOCTYPE html >

    <html>

    <head>

    <title>Tree Map</title>

    <meta charset="utf-8" />

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />

    <!--[if lte IE 8]>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" />

    <![endif]-->

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

    <style>

    * {

    padding: 0;

    margin: 0;

    }

    body,html {

    height: 100%;

    }

    #map {

    width: 100%;

    height: 100%;

    min-height: 100%;

    }

    * html #map {

    height: 100%;

    }

    #box {

    position: absolute;

    top: 10px;

    right: 10px;

    background-color: white;

    padding: 10px;

    z-index: 1000;

    }

    #box img {

    margin-left: 20px;

    margin-right: 5px;

    cursor: pointer;

    }

    </style>

    </head>

    <body>

    <div id="map"></div>

    <div id="box">拖动图标到地图:

    <span class="poi-type"><img class="drag" type="tree" src="icons/tree_green.png" alt="树: 绿色" />树</span>

    <span class="poi-type"><img class="drag" type="red" src="icons/poi_red.png" alt="兴趣点: 红" />红</span>

    <span class="poi-type"><img class="drag" type="black" src="icons/poi_black.png" alt="兴趣点: 黑" />黑</span>

    </div>

    <script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

    <script>

    // Configure map

    var map, user;

    var markers = [];

    var poiIcon = L.Icon.extend({

    options: {

    iconSize: [22,32],

    iconAnchor: [11,16],

    shadowUrl: 'icons/poi_shadow.png',

    shadowSize: [22,13],

    shadowAnchor: [-4,0],

    popupAnchor: [32,-2]

    }

    });

    var blackIcon = new poiIcon({iconUrl:'icons/poi_black.png'});

    var redIcon = new poiIcon({iconUrl:'icons/poi_red.png'});

    var treeIcon = new poiIcon({iconUrl:'icons/tree_green.png',shadowUrl:'icons/tree_shadow.png'});

    // Mapquest layer

    var mapquest = new L.TileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {

    maxZoom: 18,

    subdomains: ['1','2','3','4']

    });

    // Init application

    $(document).ready(function() {

    map = new L.Map('map', {

    center: new L.LatLng(30.68, 124.18),

    zoom: 6,

    layers: [mapquest],

    zoomControl: true

    });

    // Drag & Drop

    $(".drag").draggable({

    helper: 'clone',

    containment: 'map',

    start: function(evt, ui) {

    $('#box').fadeTo('fast', 0.6, function() {});

    },

    stop: function(evt, ui) {

    $('#box').fadeTo('fast', 1.0, function() {});

    var options = {

    pid: guid(),

    type: ui.helper.attr('type'),

    icon: eval(ui.helper.attr('type') + 'Icon'),

    draggable: true

    };

    insertPoint(

    map.containerPointToLatLng([ui.offset.left, ui.offset.top]),

    options

    );

    }

    });

    });

    // INSERT point

    function insertPoint(position,options) {

    var point = L.marker(position,options).addTo(map);

    point.bindPopup(

    '<a onClick="deletePoint(\'' + point.options.pid

    + '\');" href="#">Remove Me!</a>',

    {

    closeButton: false

    }

    );

    point.on('dragend', function(evt){

    updatePoint(point);

    });

    markers.push(point);

    }

    // DELETE point

    function deletePoint(pid) {

    for(i=0;i<markers.length;i++) {

    if(markers[i].options.pid === pid) {

    map.removeLayer(markers[i]);

    markers.splice(i, 1);

    }

    }

    }

                function S4() {

                        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);

                }

                function guid() {

                        return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());

                }

    </script>

    </body>

    </html>

demo：http://www.fenglgis.com/examples/leaflet_drag/drag.html

原文地址：http://blog.georepublic.info/2012/leaflet-example-with-wfs-t/

【Leafletjs】3.拖拽添加marker的更多相关文章

  1. 关于jqueryUI里的拖拽排序

    主要参考http://jsfiddle.net/KyleMit/Geupm/2/  (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序 这 ...

  2. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  3. D3.js+Es6+webpack构建人物关系图(力导向图)，动态更新数据，点击增加节点，拖拽增加连线...

    觉得不错的麻烦加个Star:https://github.com/zhangzn3/D3-Es6 在线预览地址:https://zhangzn3.github.io/D3-Es6 功能列表:1. 增加 ...

  4. Bootstrap 可视化布局--拖拽后弹窗进行编辑

    Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...

  5. H5 语义化、基本事件 浅析 （含file对象、drag拖拽等）

    1.语义化标签 帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...

  6. day25—JavaScript实现文件拖拽上传案例实践

    转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...

  7. 【Leafletjs】2.添加marker到地图

    本人建了一个Leaflet交流群:Leaflet&WebGIS  331437754 接着上篇我们在地图中添加一个marker,非常简单只需添加如下代码即可: var marker = L.m ...

  8. 让Web页面中的编辑器支持黏贴或直接拖拽来添加图片

    基本原理是将剪贴板中的图片二进制数据转为Base64编码 代码: <html> <head> </head> <body> <script src ...

  9. Qt窗口添加鼠标移动拖拽事件

    1. .h文件中添加 private:    QPoint dragPosition; 2. 在cpp文件中重写鼠标点击和拖拽函数 void ShapeWidget::mousePressEvent( ...

随机推荐

  1. 【数据压缩】Huffman编码

    1. 压缩编码概述 数据压缩在日常生活极为常见,平常所用到jpg.mp3均采用数据压缩(采用Huffman编码)以减少占用空间.编码\(C\)是指从字符空间\(A\)到码字表\(X\)的映射.数据压缩 ...

  2. Elasticsearch 文件目录解释

    下载后解压的Elasticsearch中,有以下几个基本的目录: home---这是Elasticsearch解压的目录 bin---这里面是ES启动的脚本 conf---elasticsearch. ...

  3. html/css基础篇——关于浏览器window、document、html、body高度的探究

    首先说明本人所理解的这几个元素的计算 window高度应当是文档所在窗口的可视高度(没有包括浏览器的滚动条),计算方法document.documentElement.clientHeight doc ...

  4. Android系统如何录制屏幕（录制成mp4格式）

    不管是教学,还是为了演示,如果能将Android手机(或平板)的屏幕录制成视频文件,那是一件非常酷的事(iOS8已经提供了这一功能,能通过OS X直接在Mac上录制iPad.iPhone的屏幕,win ...

  5. 30天C#基础巩固----查找XML文件元素

    一:XML文档 了解xml文档. 利用代码来创建XML文档. //引用命名空间+using System.Xml; XmlDocument xdoc=new XmlDocument(); XmlDec ...

  6. 相关子查询【SQL Server】

    查询book表中大于该类图书价格平均值的图书信息 先将第一条记录的类编号的值为2代入子查询中,子查询为 select avg(price) from book b where b.id=2 则得到类编 ...

  7. C# 模拟提交 Form表单的数据

    用 HttpWebRequest Post方法模拟提交Form表单数据时,需要设置 ContentType 为 "application/x-www-form-urlencoded" ...

  8. The Web server is configured to not list the contents of this directory.

    部署一个ASP.NET MVC网站至一个全新的服务器Windows Server 2008 R2, 数据为MS SQL Server 2014 64bit Expression版本. 运行时,它第一次 ...

  9. 孙鑫MFC学习笔记12：文件读写

    1.指向常量的指针 2.指针常量 3.C语言对文件操作是在缓冲区,在缓冲区满或文件关闭时写入文件 读取相同 4.fflush刷新缓冲区,使缓冲区数据写入文件 5.fseek改变文件指针偏移量 6.st ...

  10. Raising Error Conditions with MySQL SIGNAL / RESIGNAL Statements

    http://www.mysqltutorial.org/mysql-signal-resignal/ Summary: in this tutorial, you will learn how to ...