在找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. Git的奇技淫巧🙈

    Git的奇技淫巧

  2. SQL Server如何在变长列上存储索引

    这篇文章我想谈下SQL Server如何在变长列上存储索引.首先我们创建一个包含变长列的表,在上面定义主键,即在上面定义了聚集索引,然后往里面插入80000条记录: -- Create a new t ...

  3. JS魔法堂：彻底理解0.1 + 0.2 === 0.30000000000000004的背后

    Brief 一天有个朋友问我“JS中计算0.7 * 180怎么会等于125.99999999998,坑也太多了吧!”那时我猜测是二进制表示数值时发生round-off error所导致,但并不清楚具体 ...

  4. 在Visual Studio 2015 Preview 中使用Github 版本控制

    打开Visual Studio,新建项目,右下角勾选,如下图: 点击‘OK’后,出现下图窗口,选择'Git' : 如果是现有项目可以在‘文件’菜单下找到‘Add to Source Control’ ...

  5. VS2015 新Web项目(C#6)出现CS1617错误的解决

    VS2015新增了对C#6的支持. 在新的Web项目模板中通过引入nuget包Microsoft.CodeDom.Providers.DotNetCompilerPlatform:1.0.0并在web ...

  6. c#如何采集需要登录的页面

    首先说明:代码片段是从网络获取,然后自己修改.我想好的东西应该拿来分享. 先说下原理:当我们采集页面的时候,如果被采集的网站需要登录才能采集.不管是基于Cookie还是基于Session,我们都会首先 ...

  7. Win10 IoT C#开发 3 - GPIO Pin 控制发光二极管

    Windows 10 IoT Core 是微软针对物联网市场的一个重要产品,与以往的Windows版本不同,是为物联网设备专门设计的,硬件也不仅仅限于x86架构,同时可以在ARM架构上运行. 上一篇文 ...

  8. 透过IL看C#：switch语句(转)

    透过IL看C# switch语句(上) 摘要: switch语句是 C#中常用的跳转语句,可以根据一个参数的不同取值执行不同的代码.本文介绍了当向 switch语句中传入不同类型的参数时,编译器为其生 ...

  9. [测试] Firemonkey Android 照相自订分辨率测试

    在 Delphi 10 Seattle 提供了照相及相册自订分辨率的功能,请见官方网站教学: http://docwiki.embarcadero.com/RADStudio/Seattle/en/T ...

  10. Bzoj 2038---[2009国家集训队]小Z的袜子(hose) 莫队算法

    题目链接 http://www.lydsy.com/JudgeOnline/problem.php?id=2038 Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色 ...