在找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. PHP面向对象中的重要知识点(一)

    1. __construct: 内置构造函数,在对象被创建时自动调用.见如下代码: <?php class ConstructTest { private $arg1; private $arg ...

  2. SQL Server中参数化SQL写法遇到parameter sniff ，导致不合理执行计划重用的一种解决方案

    parameter sniff问题是重用其他参数生成的执行计划,导致当前参数采用该执行计划非最优化的现象.想必熟悉数据的同学都应该知道,产生parameter sniff最典型的问题就是使用了参数化的 ...

  3. C++程序设计之四书五经[转自2004程序员杂志]--下篇

    C++程序设计之四书五经(下篇) 作者:荣耀 我在上篇中“盘点”了TCPL和D&E以及入门教程.高效和健壮编程.模板和泛型编程等方面共十几本C++好书.冬去春来,让我们继续C++书籍精彩之旅. ...

  4. CentOS 7添加yum源

    RedHat下主要有两个distribution,一曰 RHEL(Red Hat Enterprise Linux) 一曰 Fedora.前者主要是供服务器使用,优点是稳定,缺点是老的掉牙,后者是供桌 ...

  5. VS2008 C++ 调用MATLAB 2009b 生成的DLL .

    转载: 刚开始学习用VC++调用matlab生成的DLL,找了网上一些资料,难以找到vs2008与MATLAB2009b版本的,按照以往版本做的总是有很多错误.经过两天努力,终于调试成功,这里将经验总 ...

  6. CSS3点点滴滴

    css查遗补漏 标签(空格分隔): css 如果值为若干单词,则要给值加引号.p {font-family: "sans serif";} body的字体有继承兼容性问题,通常这么 ...

  7. SQL--子查询

    什么是子查询 子查询:顾名思义,在一个查询中,有另外一个查询,这个查询就叫做,主查询的子查询. [把一个查询的结果,在另一个查询中使用就叫子查询.(将一个查询语句,作为一个结果集,供其他SQL语句使用 ...

  8. 一个ajax同步与异步引发的血案。

    前言 公司做网上促销活动,需要充值换取相应的抽奖资格,抽奖可以获得丰厚的礼品,而且抽奖资格门槛有点高,领导下达命令保证活动的正常上线与运行,领导很重视,就这样,在领导的安排下进行了相关活动的codin ...

  9. WinForm 容器控件

    容器控件: 布局:2个属性:Anchor:锁定位置Dock:填充位置一般Dock是与容器控件配合使用 Panel:就是一个区域,类似于DIV,可以独立布局,还可以让其它控件及容器在它的内部再次布局 F ...

  10. .Net在线付款---Paypal在线付款开发过程

    原文:.Net在线付款---Paypal在线付款开发过程 最近在做一个Web订单项目,项目有一个需求就是集成Paypal与Paydollar在线付款,一开始看到这个需求也是傻了眼,因为以前从来没有做过 ...