我有一个使用appcaching的离线Web应用程序.我需要提供大约10MB - 20MB的数据,它将保存(客户端)主要由PNG图像文件组成.操作如下:

1. Web应用程序下载并安装在appcache中(使用清单)
2. 服务器PNG数据文件的Web应用程序请求(如何？ - 请参阅下面的替代方案)
3. 有时Web应用程序与服务器重新同步,并对PNG数据库进行小的部分更新/删除/添加
4. 仅供参考:服务器是JSON REST服务器,可以将文件放在wwwroot中以便提取

这是我目前对处理二进制blob存储的基于客户端的"数据库"的分析

在底部看到更新

• AppCache(通过清单添加所有PNG,然后按需更新)
  • CON:PNG数据库项目的任何更改都意味着清单中所有项目的完整下载(真的是坏消息!)
• WebStorage
  • CON:专为JSON存储而设计
  • CON:只能通过base64编码存储blob(由于解码成本可能导致致命缺陷)
  • CON:webStorage的硬限制为5MB http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.html
• PhoneGap和SQLLite
  • CON:赞助商将其拒绝为需要认证的原生应用
• ZIP文件
  • 服务器创建一个zip文件,将其放在wwwroot中,并通知客户端
  • 用户必须手动解压缩(至少这是我看到的)并保存到客户端文件系统
  • Web应用程序使用FileSystem API来引用文件
  • CON:ZIP可能太大(zip64？),创建时间长
  • CON:不确定FileSystem API是否总能读出沙箱(我想是这样)
• USB或SD卡(回到石器时代......)
  • 在脱机之前,用户将是服务器的本地用户
  • 所以我们可以让他插入SD卡,让服务器用PNG文件填充它
  • 然后用户将其插入笔记本电脑,平板电脑
  • Web应用程序将使用FileSystem API来读取文件
  • CON:不确定FileSystem API是否总能读出沙箱(我想是这样)
• 的WebSQL
  • CON:w3c放弃了它(非常糟糕)
  • 我可能会考虑使用IndexedDB和WebSQL作为后备的Javascript包装器
• FileSystem API
  • Chrome支持blob的读/写
  • CON:不清楚IE和FireFox(IE10,有非标准的msSave)
  • caniuse.com报告IOS和Android支持(但同样,这只是JSON的r/w,还是包含用于编写的完整blob API？
  • CON:FireFox人不喜欢FileSystem API而不清楚他们是否支持保存blob:https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/
  • PRO:许多按照jsperf比IndexedDB的更快斑点http://jsperf.com/indexeddb-vs-localstorage/15(第2页)
• IndexedDB的
  • IE10中的良好支持,FireFox(保存,读取blob)
  • 比文件系统更快速,更易于管理(删除,更新)
  • PRO:请参阅速度测试:http://jsperf.com/indexeddb-vs-localstorage/15
  • 请参阅有关在IndexedDB中存储和显示图像的文章:https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
  • CON:我确认Chrome还不支持blob写入(当前的bug,但不清楚何时修复)
  • 更新:Chrome开发人员确认他们正在为桌面和Android工作!还没有时间表.
• LawnChair JavaScript包装器http://brian.io/lawnchair/
  • PRO:非常干净的IndexedDB,WebSQL或任何数据库的包装器(想想polyfill)
  • CON:无法存储二进制blob,只能存储数据:uri(base64编码)(由于解码成本可能导致致命缺陷)
• IndexedDB JQUERY polyFill https://github.com/axemclion/jquery-indexeddb
  • Parashuram为原始的IndexedDB接口编写了一个很好的JQUERY包装器 …

如何设置视图以在Mapbox或Leaflet中查看地图上的所有标记？像Google Maps API一样bounds吗？

例如:

var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
  latlngbounds.extend(latlng[i]);
}
map.fitBounds(latlngbounds);

以下代码初始化传单映射.初始化函数基于用户位置使地图居中.调用初始化函数后,如何将地图中心更改为新位置？

function initialize() {
map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);

map.locate({setView: true, maxZoom: 8});    
} 

我已经开始使用传单作为开源地图,http://leaflet.cloudmade.com/

以下jQuery代码将允许在地图上创建标记点击:

 map.on('click', onMapClick);
function onMapClick(e) {
        var marker = new L.Marker(e.latlng, {draggable:true});
        map.addLayer(marker);
        marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
};

但是目前我(在我的代码中)没有办法删除现有标记,或者找到我在地图上创建的所有标记并将它们放入数组中.任何人都可以帮我理解如何做到这一点？单张文档可在此处获取:http://leaflet.cloudmade.com/reference.html

什么是Leaflet和Mapbox,两者的区别或用途是什么？他们的API有哪些主要区别？

var map = L.map('map');
var marker = L.marker([10.496093,-66.881935]).on('click', onClick);
function onClick(e) {alert(e.latlng);}
marker.addTo(map)

当我单击标记时,警报消息为:undefined

但如果我把它放在变量图中,它就可以了!(显示纬度和经度)

map.on('click', onClick); 

有人知道为什么它在标记中不起作用吗？

我正在尝试创建一个react-typescript应用程序以及传单。我使用了命令，

npm install leaflet react-leaflet @types/react @types/leaflet --save 安装依赖项。

但是当我启动应用程序时，它说，

    ./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

这是我的 package.json

{
  "name": "aq-monitor",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": …

我正在尝试删除LeafletJS地图上的缩放控件(+/-).

我正在使用Leaflet的MapBox.js版本,但大多数操作与Leaflet相同.我像这样实现我的地图:

var map = L.mapbox.map('map');

var layer = L.mapbox.tileLayer('MAPBOX-ID', {
    format: 'jpg70',
    minZoom: 13,
    maxZoom: 15,
    reuseTiles: true, 
    unloadInvisibleTiles: true
});
map.addLayer(layer);
map.setView([40.73547,-73.987856]);

该文件说,有将从地图中删除变焦控制zoomControl可选项,但我已经得到它的工作没有运气.

如何通过此实现删除缩放控件？

谢谢!

我的瓷砖需要遵守任何特定的规格吗？

我有一个大图像文件,我想用LeafletJS变成一张地图.我将使用Python Imaging Library将其切割成我需要的所有各种图块.

但是,我找不到有关在Leaflet中使用自定义地图的任何信息.我是否以某种方式为Leaflet提供X,Y,Z信息范围？我是否给它每个瓷砖的像素大小？它是否自己解决了这个问题？

将我的问题放在一个简洁的问题中:为了使图像文件能够与LeafletJS一起成为地图图块,我需要做些什么,以及在我的前端脚本中需要做什么？(除了明确指定我的自定义URL之外)

有没有办法随机更改原生Leaflet中的标记颜色？我正在使用可以设计风格的svg元素.我知道mapbox.js是可行的

编辑:澄清我打算做什么:如果您通过双击或其他东西添加标记,它应该有随机颜色.为了实现这一点,我想使用标记的svg图标来设置它们的样式.

这是我的代码:

myIcon = L.icon({
  iconUrl: "icon_33997.svg",
  iconAnchor: pinAnchor
});

newMarker = L.marker(lat, long], {
  icon: myIcon
});