Question

我有一个应用程序，用户可以通过放置标记并在其周围绘制多边形，在Mapbox驱动的地图上标记自己的位置。（用户可以绘制简单的圆圈，但它们只是转换为12点多边形，因此这个新功能只需要处理多边形）

列出所有用户时会遇到问题。地图，因为从数据库加载所有标记和多边形点，然后将它们渲染出来，变得非常慢，我想要的只是它们的位置的小预览。

我想知道是否有一种方法，应用程序可以编程方式呈现并保存地图的预览与用户＆＃39;自定义标记和多边形，以任何方式成图像格式？希望以PNG或JPEG格式生成的地图的某些类型的快照。

我不知道发布此问题的任何现有代码是否相关，但如果需要，可以参考以下内容：

// initialises the map
MyMaps.initialise = function(){
    L.mapbox.accessToken = MAPBOX_API_KEY;  
    MyMaps.center = L.latLng(MyMaps.latitude, MyMaps.longitude);
    MyMaps.map = L.mapbox.map('map', 'mapbox.streets')
        .setView(MyMaps.center, MyMaps.zoom);

    MyMaps.map.on('click', function(e) {
        let center = new L.latLng(e.latlng.lat, e.latlng.lng);
        MyMaps.drawPolyGonCircle(center, MyMaps.getRadius()); // getRadius() reads the radius from an <input> element
    });
}

// draws a circle around the clicked area
MyMaps.drawPolyGonCircle = function(center, radius) {
    if(MyMaps.polygon) {
        MyMaps.map.removeLayer(MyMaps.polygon);
    }
    var polygonArray = MyMaps.polygonCircleForCoordinate(center, radius); // this converts a simple circle into a 12-point polygon
    MyMaps.polygon = L.polygon(polygonArray).addTo(MyMaps.map);
};

// prepares <input> elements for posting the polygon points back to the backend
MyMaps.onBeforeSave = function(){
    let centerLat = $('<input>').attr('name', 'latitude').attr('type', 'hidden').val(MyMaps.centerLat);
    let centerLon = $('<input>').attr('name', 'longitude').attr('type', 'hidden').val(MyMaps.centerLon);
    $('#Form').append(latitude).append(longitude);
    for(let i in MyMaps.points) {
        let latitude = $('<input>').attr('name', 'latitudes[]').attr('type', 'hidden').val(MyMaps.points[i].latitude);
        let longitude = $('<input>').attr('name', 'longitudes[]').attr('type', 'hidden').val(MyMaps.points[i].longitude);
        $('#Form').append(latitude).append(longitude);
    }
};

以编程方式生成自定义多边形的静态图像预览

0 个答案: