leaflet绘制区域(仿高德地图效果)

lwx12525 发布于2019-08-21 15:51 / 2478人阅读

摘要：官网效果脚本地图中心点昆明地图缩放层级缩放禁止双击放大版权切片图层地址绘制区域单击移动清除双击移除事件保存方便后面删除请入名称键盘事件键拖动

leaflet官网：http://leafletjs.com/

效果：

脚本：

var map = L.map("map", {
    center: [25.1026993454,102.9312515259], // 地图中心点(昆明)
    zoom: 16, // 地图缩放层级
    zoomControl: false, // 缩放
    doubleClickZoom: false, // 禁止双击放大
    attributionControl: false // 版权
});
var kmgLayer = L.tileLayer.wms("wms切片图层地址", {
    layers: "airport:kmg",
    format: "image/jpeg",
    transparent: false
});
map.addLayer(kmgLayer);

// 绘制区域
var layerObj = {};
function drawPolygon() {
    var points = [],
        points_length = 0,
        polyline,
        polygon;
    // 单击
    var clickFlag,
        clickTimes = 1,
        isDrag = false;
    map.on("mousedown", function(e) {
        map.off("mousemove");
        if(clickFlag) clearTimeout(clickFlag);
        clickFlag = setTimeout(function() {
            if(clickTimes==1 && !isDrag) {
                points.push([e.latlng.lat, e.latlng.lng]);
                points_length = points.length;
                // 移动
                map.on("mousemove", function(e) {
                    // 清除
                    if(polyline) map.removeLayer(polyline);
                    if(polygon) map.removeLayer(polygon);
                    // polyline
                    points[points_length] = [e.latlng.lat, e.latlng.lng];
                    polyline = new L.Polyline(points);
                    map.addLayer(polyline);
                    // polygon
                    polygon = new L.Polygon(points);
                    map.addLayer(polygon);
                });
            }
        }, 300);
    });
    // 双击
    map.on("dblclick", function() {
        if(points.length) {
            clickTimes = 2;
            // polyline
            polyline = new L.Polyline(points);
            map.addLayer(polyline);
            // polygon
            polygon = new L.Polygon(points);
            map.addLayer(polygon);
            // 移除事件
            map.off("mousemove");
            setTimeout(function() {
                clickTimes = 1;
                // 保存layer(方便后面删除)
                var layerName = prompt("请入名称");
                if(layerName) {
                    layerObj[layerName] = [polyline, polygon];
                    console.log(layerObj);
                }
                points = [];
            }, 300);
        }
    });
    // 键盘事件
    $(document).keyup(function(e) {
        if(e.keyCode == 27) {// esc键
            if(points.length) {
                map.off("mousemove");
                clickTimes = 1;
                map.removeLayer(polyline);
                map.removeLayer(polygon);
                points = [];
            }
        }
    });
    // 拖动
    map.on("movestart", function() {
        isDrag = true;
    });
    map.on("moveend", function() {
        isDrag = false;
    });
}
drawPolygon();

混合云 idc机房托管仿高德高德地图高德地图大数据高德地图android

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88286.html

前端小知识--地图坐标转换

摘要：实际中我们可能会用到不同的地图，那么就对应到不同坐标系的转换，比如说，你有一份的数据服务，你要展现在百度或者高德地图上，这时候你就需要转换了。地图坐标转换 LBS，基于位置的服务（Location Based Service)，近年来已经无处不在，尤其是我们前端，相信或多或少都有接触一些地图API服务，比如高德、百度啊、谷歌啊~但是用的时候可能看到下面这些字眼：比如BD09、火星坐标...

liangdas 2019-08-22 15:08 评论0 收藏0
入门Leaflet之小Demo

入门 Leaflet 之小 Demo 写在前面 ---- WebGIS 开发基础之 Leaflet GIS 基本概念：GIS、Map、Layer、Feature、Geometry、Symbol、Data（Point、Polyline、Polygon）、Renderer、Scale、Project、Coordinates； GIS 开发概述：架构模式、常用平台和 SDK、二维三维使用 Lea...

Eminjannn 2019-08-22 15:23 评论0 收藏0
android: 高德地图

摘要：添加相关类为设置属性生成对象设置给的给设置相关第二个方法添加一组地图会移动到该组所在区域的中心在地图上添一个图片标记对象。在地图上添一组图片标记对象，并设置是否改变地图状态以至于所有的对象都在当前地图可视区域范围内显示。分为地图,定位,搜索(我还没做导航功能) 建议采用gradle方式集成添加依赖在project/build.gradle文件下添加jcenter的仓库地址 all...

Carbs 2019-06-25 12:39 评论0 收藏0
android精品源码，下拉刷新效果高德地图五子棋游戏定制日历全民TV源码

摘要：实现多种下拉刷新效果上拉加载更多以及配置自定义头高德地图大集合欢乐五子棋游戏源码自定义曲线路径动画框架定制日历，支持周月切换，日期标记，农历显示，节自定义上下文菜单仿的动画下拉刷新上拉加载更多侧滑删除仿全民基于模块规模合理采用优雅的解耦幸运实现多种下拉刷新效果、上拉加载更多以及配置自定义头... showImg(https://segmentfault.com/img/remote/...

Java_oldboy 2019-06-25 11:43 评论0 收藏0
高德地图 Javascript API 入门（二）

摘要：鼠标在地图上拉框即可绘制相应的矩形。鼠标在地图上单击绘制量测区域，鼠标左键双击或右键单击结束当前量测操作，并显示本次量测结果。参数设为时，鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象设为时，保留所绘制的覆盖物对象。高德地图 Javascript API 入门（二）鼠标工具插件测量距离 JS map.plugin([AMap.MouseTool],function ()...

dockerclub 2019-08-20 14:29 评论0 收藏0