国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

leaflet繪制區域(仿高德地圖效果)

lwx12525 / 2710人閱讀

摘要:官網效果腳本地圖中心點昆明地圖縮放層級縮放禁止雙擊放大版權切片圖層地址繪制區域單擊移動清除雙擊移除事件保存方便后面刪除請入名稱鍵盤事件鍵拖動

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();

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88286.html

相關文章

  • 前端小知識--地圖坐標轉換

    摘要:實際中我們可能會用到不同的地圖,那么就對應到不同坐標系的轉換,比如說,你有一份的數據服務,你要展現在百度或者高德地圖上,這時候你就需要轉換了。 地圖坐標轉換 LBS,基于位置的服務(Location Based Service),近年來已經無處不在,尤其是我們前端,相信或多或少都有接觸一些地圖API服務,比如高德、百度啊、谷歌啊~但是用的時候可能看到下面這些字眼:比如BD09、火星坐標...

    liangdas 評論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 評論0 收藏0
  • 高德地圖 Javascript API 入門(二)

    摘要:鼠標在地圖上拉框即可繪制相應的矩形。鼠標在地圖上單擊繪制量測區域,鼠標左鍵雙擊或右鍵單擊結束當前量測操作,并顯示本次量測結果。參數設為時,鼠標操作關閉的同時清除地圖上繪制的所有覆蓋物對象設為時,保留所繪制的覆蓋物對象。 高德地圖 Javascript API 入門(二) 鼠標工具插件 測量距離 JS map.plugin([AMap.MouseTool],function ()...

    dockerclub 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<