首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >geoJson层以保存[用于发送DB]地图上绘制的功能--传单绘制

geoJson层以保存[用于发送DB]地图上绘制的功能--传单绘制
EN

Stack Overflow用户
提问于 2015-09-19 04:06:45
回答 2查看 4.7K关注 0票数 3

我用了这种方法,但是

代码语言:javascript
运行
复制
var features = [];
map.on('draw:created', function (e) {
  drawnItems.addLayer(e.layer);
  var layers = drawnItems._layers;
  for (var key in layers) features.push(layers[key].toGeoJSON());
  console.log(drawnItems)
});

但是控制台日志中会出现以下错误:

代码语言:javascript
运行
复制
Object { options: Object, _layers: Object, _initHooksCalled: true, _leaflet_id: 24, _map: Object, _leaflet_events: Object }

当我尝试以下代码时:

代码语言:javascript
运行
复制
        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
            map = new L.Map('map', {layers: [osm], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 });

        var drawnItems = L.geoJson();
        map.addLayer(drawnItems);

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

        var geojson_for_FeatureCollection = drawnItems.toGeoJSON();

//to get the drawn item geo data--for poly line
//initialize the array for collect drawn items.
var features = [];


map.on('draw:created', function (e) {

    var type = e.layerType,
        layer = e.layer;

    if (type === 'polyline') {
        // structure the geojson object
        var geojson = {};
        geojson['type'] = 'Feature';
        geojson['geometry'] = {};
        geojson['geometry']['type'] = "Polyline";

        // export the coordinates from the layer
        coordinates = [];
        latlngs = layer.getLatLngs();
        for (var i = 0; i < latlngs.length; i++) {
            coordinates.push([latlngs[i].lng, latlngs[i].lat])
        }

        // push the coordinates to the json geometry
        geojson['geometry']['coordinates'] = [coordinates];

        // Finally, show the poly as a geojson object in the console
        console.log(JSON.stringify(geojson));

    }
    else if 
//to get the drawn item geo data--for polygon   
    (type === 'polygon') {
        // structure the geojson object
        var geojson = {};
        geojson['type'] = 'Feature';
        geojson['geometry'] = {};
        geojson['geometry']['type'] = "Polygon";

        // export the coordinates from the layer
        coordinates = [];
        latlngs = layer.getLatLngs();
        for (var i = 0; i < latlngs.length; i++) {
            coordinates.push([latlngs[i].lng, latlngs[i].lat])
        }

        // push the coordinates to the json geometry
        geojson['geometry']['coordinates'] = [coordinates];

        // Finally, show the poly as a geojson object in the console
       // console.log(JSON.stringify(geojson));
var down = JSON.stringify(geojson);
var a = document.createElement('a');
a.href = 'data:' + down;
a.download = 'down.json';
a.innerHTML = 'download JSON';

var container = document.getElementById('container');
container.appendChild(a);

console.log(down);
    }

    drawnItems.addLayer(layer);

});

//testing.........for featureGroup geo json once  download
map.on('draw:edited', function (e) {
  var layers = drawnItems._layers;
  for (var key in layers) features.push(layers[key].toGeoJSON());
  console.log(drawnItems)
});

map.on('draw:created', function (e) {
  drawnItems.addLayer(e.layer);
  var layers = drawnItems._layers;
  for (var key in layers) features.push(layers[key].toGeoJSON());
  console.log(JSON.stringify(geojson_for_FeatureCollection));
});`enter code here`

    </script>

控制台显示:

代码语言:javascript
运行
复制
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[175.26536464691162,-37.77241087974657],[175.26291847229004,-37.778007869815774],[175.273175239563,-37.77410698208879]]]}}

{"type":"FeatureCollection","features":[]}

我想知道的是,如何将绘制的项附加到geojson对象以将其发送到数据库?

EN

Stack Overflow用户

回答已采纳

发布于 2015-09-19 09:29:42

L.LayerGroupL.FeatureGroupL.GeoJSON有一个名为toGeoJSON的方法,它返回一个GeoJSON FeatureCollection:

代码语言:javascript
运行
复制
var collection = drawnItems.toGeoJSON();

返回图层组的GeoJSON表示形式(GeoJSON FeatureCollection)。

http://leafletjs.com/reference.html#layergroup-togeojson

票数 6
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32664079

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档