在找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. Robot Framework自动化测试（七）--- jybot模式

    虽然,很久不用关于Robot Framework框架了,但我这里应该是除了@齐涛-道长之外分享Robot Framework 相关资料比较多的地方了.所以,常常被问到一些关于该框架的问题. 虽然,我一 ...

  2. Office PPT保持提示无法保存Gill Sans 等非TrueType字体

    升级office到最新版了 我有一天在做PPT,保存文件后提示保存:无法保存Gill Sans 等非TrueType字体 我知道PPT可以替换字体.于是使用替换字体功能,但是提示非TrueType不能 ...

  3. Windows Azure Service Bus (5) 主题(Topic) 使用VS2013开发Service Bus Topic

    <Windows Azure Platform 系列文章目录> 项目文件,请在这里下载 在笔者之前的文章中Windows Azure Service Bus (1) 基础 介绍了Servi ...

  4. Hyperledger fabric Client Node.js Hello World示例程序

    简介 Hyperledger fabric Client (HFC)提供了基于Node.js的应用接口来访问Hyperledger区块. 本文介绍了一个使用HFC访问IBM Bluemixr区块服务的 ...

  5. Java魔法堂：内部类详解

    一.前言 对于内部类平时编码时使用的场景不多,比较常用的地方应该就是绑定事件处理程序的时候了(从C#.JS转向Java阵营的孩子总不不习惯用匿名内部类来做事件订阅:().本文将结合Bytecode对四 ...

  6. MVC过滤器的用法

    APS.NET MVC中的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再加一些额外的逻辑处理.这时候就用到了过滤器. 在Asp.netMvc中当你有以下及类似 ...

  7. EditText html 出现提示 This text field does not specify an inputType or a hint

      1 <EditText 2 android:layout_width="fill_parent" 3 android:layout_height="wrap_c ...

  8. IOS中Json解析的四种方法

    作为一种轻量级的数据交换格式,json正在逐步取代xml,成为网络数据的通用格式. 有的json代码格式比较混乱,可以使用此“http://www.bejson.com/”网站来进行JSON格式化校验 ...

  9. 从头开始 启动开源电商项目jShop

    1. 引言 干了三年C#, 有了转Java 的念想,所以尝试学习一下java web,java语法本身和C#没有太多的差别,所以打算看看开源的java项目,开源的Java项目还是非常非常多的,曾经看了 ...

  10. FAILED BINDER TRANSACTION

    最近开发Widget,要在Widget上显示图片,出现了FAILED BINDER TRANSACTION错误,后来才发现是因为图片太大了.Widget使用的是RemoteViews,而Intent传 ...