Question

我在Android中使用Leaflet，所以我想通过一次点击来绘制多边形，因为通过在平板电脑上点击两次到同一点来绘制它太难了。

我正在使用Leaflet.draw插件，这个演示完全适用于浏览器，您只需点击一下即可在浏览器上绘制多边形。

https://github.com/Leaflet/Leaflet.draw/

但如果我在android上使用相同的demo，我必须在同一点上单击两次以绘制多边形。

这不是用户友好的。

我该怎么做？

示例代码如下所示。

注意：我正在使用cordova 2.9.0进行webview

MainActivity.java

package com.example.testdrawing;

import org.apache.cordova.CordovaWebView;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
import android.webkit.WebSettings;

public class MainActivity extends DroidGap {

    public void onCreate(Bundle savedInstanceState) {
        super.setBooleanProperty("showTitle", true);
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        appView = (CordovaWebView) findViewById(R.id.tutorialView);
        appView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        appView.getSettings().setJavaScriptEnabled(true);

        super.setIntegerProperty("loadUrlTimeoutValue", 70000);
        appView.loadUrl("file:///android_asset/Leaflet.draw-master/examples/basic.html");

    }

}

activity_main.xml中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >



      <org.apache.cordova.CordovaWebView
            android:id="@+id/tutorialView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />


</RelativeLayout>

传单方面取自here，我使用的是basic.html示例。

basic.html

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet.draw drawing and editing tools</title>

    <link rel="stylesheet" href="libs/leaflet.css" />
    <link rel="stylesheet" href="../dist/leaflet.draw.css" />


    <script src="libs/leaflet-src.js"></script>

    <script src="../src/Leaflet.draw.js"></script>

    <script src="../src/edit/handler/Edit.Poly.js"></script>
    <script src="../src/edit/handler/Edit.SimpleShape.js"></script>
    <script src="../src/edit/handler/Edit.Circle.js"></script>
    <script src="../src/edit/handler/Edit.Rectangle.js"></script>

    <script src="../src/draw/handler/Draw.Feature.js"></script>
    <script src="../src/draw/handler/Draw.Polyline.js"></script>
    <script src="../src/draw/handler/Draw.Polygon.js"></script>
    <script src="../src/draw/handler/Draw.SimpleShape.js"></script>
    <script src="../src/draw/handler/Draw.Rectangle.js"></script>
    <script src="../src/draw/handler/Draw.Circle.js"></script>
    <script src="../src/draw/handler/Draw.Marker.js"></script>

    <script src="../src/ext/LatLngUtil.js"></script>
    <script src="../src/ext/GeometryUtil.js"></script>
    <script src="../src/ext/LineUtil.Intersect.js"></script>
    <script src="../src/ext/Polyline.Intersect.js"></script>
    <script src="../src/ext/Polygon.Intersect.js"></script>

    <script src="../src/Control.Draw.js"></script>
    <script src="../src/Tooltip.js"></script>
    <script src="../src/Toolbar.js"></script>

    <script src="../src/draw/DrawToolbar.js"></script>
    <script src="../src/edit/EditToolbar.js"></script>
    <script src="../src/edit/handler/EditToolbar.Edit.js"></script>
    <script src="../src/edit/handler/EditToolbar.Delete.js"></script>
</head>
<body>
    <div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
    <button id="changeColor">Rectangle -> Blue</button>
    <script>
        var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
            cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}),
            map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 });


/*L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution : false,
                maxZoom : 18,
                crs : L.CRS.EPSG4326
                    }).addTo(map);*/
        var drawnItems = new L.FeatureGroup();
        map.addLayer(drawnItems);

        // Set the title to show on the polygon button
        L.drawLocal.draw.toolbar.buttons.polygon = 'Draw a sexy polygon!';

        var drawControl = new L.Control.Draw({
            position: 'topleft',
            draw: {
                polyline: {
                    metric: true
                },
                polygon: {
                    allowIntersection: false,
                    showArea: true,
                    drawError: {
                        color: '#b00b00',
                        timeout: 1000
                    },
                    shapeOptions: {
                        color: '#bada55'
                    }
                },
                circle: {
                    shapeOptions: {
                        color: '#662d91'
                    }
                },
                marker: false
            },
            edit: {
                featureGroup: drawnItems,
                remove: false
            }
        });
        map.addControl(drawControl);

        map.on('draw:created', function (e) {
            var type = e.layerType,
                layer = e.layer;

            if (type === 'marker') {
                layer.bindPopup('A popup!');
            }

            drawnItems.addLayer(layer);
        });

        map.on('draw:edited', function (e) {
            var layers = e.layers;
            var countOfEditedLayers = 0;
            layers.eachLayer(function(layer) {
                countOfEditedLayers++;
            });
            console.log("Edited " + countOfEditedLayers + " layers");
        });

        L.DomUtil.get('changeColor').onclick = function () {
            drawControl.setDrawingOptions({ rectangle: { shapeOptions: { color: '#004a80' } } });
        };

    </script>
</body>
</html>

Leaflet Draw Plugin：如何通过单击绘制多边形？

0 个答案: