在找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. Microsoft Azure News(4) Azure新D系列虚拟机上线

    <Windows Azure Platform 系列文章目录> Update 2016-05-07 注意事项: Azure的数据中心建设是有先后顺序的,最早是落地了A系列的虚拟机,然后是D ...

  2. PetaPoco - 轻量级高性能的ORM框架（支持.NET Core）

    我们都知道ORM全称叫做Object Relationship Mapper,也就是可以用object来map我们的db. 而且市面上的orm框架有很多,有重量级的Entity Framework,有 ...

  3. 主成分分析(PCA)的一种直观理解

    源自知乎的一个答案,网上很多关于PCA的文章,不过很多都只讲到了如何理解方差的投影,却很少有讲到为什么特征向量就是投影方向.本文从形象角度谈一谈,因为没有证明,所以不会严谨,但是应该能够帮助形象理解P ...

  4. 加速Web开发的9款知名HTML5框架

    与手工编码比起来,HTML5框架在准确性和正确率方面给予了保证.大多数HTML5框架都会有一个组合或者包含一些额外的组件,比如jQuery Scripts.CSS3样式表则以改善多媒体特征的功能性和响 ...

  5. Design Pattern: Observer Pattern

    1. Brief 一直对Observer Pattern和Pub/Sub Pattern有所混淆,下面打算通过这两篇Blog来梳理这两种模式.若有纰漏请大家指正. 2. Use Case 首先我们来面 ...

  6. C#读取Appconfig中自定义的节点

    今天在使用Nlog的时候,发现了一个之前没注意的问题. 以前,我的app配置文件都是这么写的,当然配置比较多的时候会改用xml. 如果<appSettings>节点中的内容很多的话,我自己 ...

  7. char导致的验证异常

    表的一个字段: Moblie  char(15) 对应的mvc代码: @Html.EditorFor(c => c.Mobile) [RegularExpression("^1[3|4 ...

  8. Java泛型－类型擦除

    一.概述 Java泛型在使用过程有诸多的问题,如不存在List<String>.class, List<Integer>不能赋值给List<Number>(不可协变 ...

  9. Response.Redirect 无法跳转页面

    错误现象:Response.Redirect(Server.MapPath("BackIndex.aspx")); 打断点测试执行了这一句,Server.MapPath(" ...

  10. 在使用vs2012中的MVC4出的错误！类型“System.Data.Entity.DbContext”在未被引用的程序集中定义

    理解决方案的nuget程序包2.选中已安装的包,找到EntityFramework,点击管理 由于我是在Taobao_DAL中用到了EF的“数据上下文对象”,他报错了.所以我们要选中它,将EF5.0安 ...