Ionic / Leaflet - 无法获取 Tiles 404 Not Found(从缓存)

2024-04-05

我被一个非常奇怪的问题所困扰。 我在用着leaflet http://leafletjs.com/ with 角度传单指令 https://github.com/tombatossals/angular-leaflet-directive。 在之前的应用程序上,一切正常。

现在在一个新的应用程序上,我想实现一个新的传单地图。 因此我复制了以前的代码。

我的问题是,传单地图打开,我的标记已创建,但是

瓷砖未加载

(我的应用程序确实拥有互联网和互联网权利) 每个尝试加载的图块都会失败并出现以下问题:

GET http://a.tile.openstreetmap.org/18/98891/132985.png 404 (Not Found)

如您所见,如果直接访问该图块,您可以在浏览器上看到它。

每个 Tile GET 请求的标头

    GENERAL
      Request URL:http://a.tile.openstreetmap.org/18/98892/132984.png
      Request Method:GET
      **Status Code:404 Not Found (from cache)**
    RESPONSE HEADERS
      Client-Via:shouldInterceptRequest
    REQUEST HEADERS
      Provisional headers are shown
      Accept:image/webp,*/*;q=0.8
      User-Agent:Mozilla/5.0 (Linux; Android 5.0.1; GT-I9505 Build/LRX22C; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.137 Mobile Safari/537.36

我的感觉是它试图从缓存加载它而不是 直接从开放提供商加载它 我仍然不明白我的两个项目之间有什么不同

我的其他工作应用程序的每个图块都有以下标题:

GENERAL 
  Remote Address:192.163.219.40:80
  Request URL:http://c.tile.openstreetmap.org/18/98818/132892.png
  Request Method:GET
  Status Code:200 OK
Response Headers
  view source
  Access-Control-Allow-Origin:*
  Cache-Control:max-age=604800
  Content-Length:3584
  Content-Type:image/png
  Date:Fri, 08 May 2015 13:57:36 GMT
  ETag:"51fb8a7a0f719b211641dca08bf1d76b"
  Expires:Fri, 15 May 2015 13:57:36 GMT
  Server:Apache/2.4.7 (Ubuntu)
  Via:1.1 nadder-02.openstreetmap.org:3128 (squid/2.7.STABLE9)
  X-Cache:MISS from nadder-02.openstreetmap.org
  X-Cache-Lookup:MISS from nadder-02.openstreetmap.org:3128
Request Headers
  view source
  Accept:image/webp,*/*;q=0.8
  Accept-Encoding:gzip, deflate
  Accept-Language:fr-FR,en-US;q=0.8
  Connection:keep-alive
  Host:c.tile.openstreetmap.org
  User-Agent:Mozilla/5.0 (Linux; Android 5.0.1; GT-I9505 Build/LRX22C; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.137 Mobile Safari/537.36
  X-DevTools-Emulate-Network-Conditions-Client-Id:01BAB1E4-1122-4CEF-AC90-BDE2C1113EF4
  X-Requested-With:com.myapp.myapp

AngularJS 配置

缓存已禁用。

$httpProvider.defaults.cache = false;

我还尝试了以下添加剂,因为 HTTP TILE LOADING 已获取(未成功)

  //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    
//disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get.Pragma = 'no-cache';

HTML 创建传单指令

  <div data-tap-disabled="true" style="height: 90%; {{iosPlatform ? 'top:10%; position:relative' : ''}}">
    <leaflet id="map" defaults="defaults" center="center"
    bounds="bounds" event-broadcast="events" markers="markers"
    height="100%" width="100%" class="animation" layers="layers"></leaflet>

  </div>

AngularJS 代码

angular.extend($scope, {
            center: {
                lat: -2.6273,
                lng: -44.1932,
                zoom: 18
            },
            markers: {},
            defaults: {
                scrollWheelZoom: true
            },
            bounds: {
                southWest: {
                    lat: -2.628074696286876,
                    lng: -44.19960723876953125,
                },
                northEast: {
                    lat: -2.629410211532874,
                    lng: -44.19617401123046874,
                }
            },
            events: {
                map: {
                    enable: ['popupopen'],
                    logic: 'emit'
                }
            },
            tiles: {
                url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                options: {
                    attribution: ''
                }
            },
            layers: {
                "baselayers": {
                    "osm": {
                        "name": "Cidade",
                        "url": "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                        "type": "xyz",
                        "layerParams": {},
                        "layerOptions": {}

                    }


                },
                overlays: {

                }
            },
            controls: {}
        });

当我打开地图时,我会调用以下函数:

 $scope.getMyMap = function() {
        var d = $q.defer();
         leafletData.getMap('map').then(function(map) {
            $scope.map = map;
            map.invalidateSize();
            d.resolve(map);
        }, function(err) {

            d.reject(err);
        });
        return d.promise;

    };

经过多次测试,我终于安装了科尔多瓦白名单插件 https://github.com/apache/cordova-plugin-whitelist有了它,一切都恢复正常。

我还真不知道为什么最近白名单会有这样的变化。 如果我有有关该变化和影响的其他信息,我会及时通知您

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ionic / Leaflet - 无法获取 Tiles 404 Not Found(从缓存) 的相关文章

随机推荐

  • 获取 Eclipse 编辑器的当前源代码?

    我正在使用 Eclipse IDE 我想首先开发一个插件 这个插件允许我以简单的字符串形式获取整个源代码 我使用模板 hello world command 制作了一个简单的 hello the world 插件 现在我正在寻找从 Ecli
  • 为什么 UIMenuItem 操作的发送者总是 nil?

    我添加了一个UIMenuItem实例到UIMenuController 当我在文本字段中点击两次时 我会看到带有复制 剪切 粘贴 维基百科查找的文本编辑菜单 这是我的操作方法 void lookupInWikipedia id sender
  • 为什么 TFS 2017 Sonar Build Definition 给出“未指定有效规则”错误?

    我有一个为 HTML TypeScript Javascript 创建的 TFS 2017 构建定义 它执行声纳任务 在执行声纳构建定义后 我得到错误 未指定有效规则我的构建摘要中显示的消息 此错误是在构建定义中的运行代码分析任务期间创建的
  • 使用 Java 中的 Office 365 REST API 构建守护程序或服务应用程序

    我正在尝试构建批处理作业来访问 Office 365 Mail API 正在检查文档 https azure microsoft com en us documentation articles active directory authe
  • Spring Boot - @PreAuthorize 在测试中不起作用

    我有这样的控制器 RestController RequestMapping value test PreAuthorize hasRole ADMIN public class TestController RequestMapping
  • 是否可以选择严格传播对象?

    我想知道是否有编译器选项或类似的东西可以使传播对象严格 请参阅以下示例以了解我的意思 interface Foo a string interface Bar a string b number const barObject Bar a
  • 如何在 SwiftUI 中删除列表分隔线

    所以问题很简单 就在标题中 我想删除 SwiftUI iOS 14 中的行分隔符 以前 我使用的是 UITableView appearance separatorStyle none以前在 iOS 13 中可以完成这项工作 但是现在它不起
  • 递归忽略特定目录中除 .json 文件之外的所有文件

    我有一个类似于下面的文件结构 foo bar foo node modules foo bar json node modules foo bar foo bar 我想要做的是忽略里面的所有文件node modules文件夹除了json文件
  • 如何将不同记录的数据添加到一条记录中?

    如果没有时间请看一下示例 我有两种类型的用户 临时用户和永久用户 临时用户以访客身份使用系统 只需提供他们的姓名并使用它 但系统需要跟踪他们 永久用户是指已注册且永久的用户 一旦用户为自己创建永久记录 我需要将用户作为访客时跟踪的所有信息复
  • Node.js 和 WebSockets (Socket.io) 单元测试

    有人可以使用 WebSockets Socket io 为 Node js 提供坚如磐石 极其简单的单元测试吗 我在 Node js 中使用 socket io 并在测试中查看了 socket io client 来建立与服务器的客户端连接
  • 从 PendingIntent(通知按钮)启动 JobIntentService?

    在我的应用程序中 我有一个通知按钮 它使用 IntentService 在后台触发一个简短的网络请求 在这里显示 GUI 没有意义 这就是我使用服务而不是 Activity 的原因 请参阅下面的代码 Build the Intent use
  • Selenium 在 Firefox 中下载 PDF 的问题

    我正在结合 Firefox 61 0 和 Geckodriver 0 21 0 将我们的内部 Java Selenium 框架升级到最新版本 3 14 0 当我使用 Firefox 自动下载 PDF 文件时遇到问题 例如在这个link ht
  • 在 H2 数据库中找不到函数“TO_DATE”

    我有一个 SQL 语句并尝试使用 Java 中的 H2 内存数据库执行 抛出以下异常 SQL SELECT ACCT RULE ID ACCT ACTION ID FROM ACCT RULE WHERE ACCT ACTION ID AN
  • 当列数据是动态时,如何对交叉表查询中的列进行排序?

    我一直在对这个主题进行一些研究 但我似乎找不到一个可行的解决方案 也找不到一个解释得足够好让我可以实施的解决方案 如果您曾经在 Access 中创建过交叉表查询 您就会知道默认情况下 Access 按字母顺序对列进行排序 您可以通过访问更改
  • Oracle 数据脱敏

    我们有一个要求 即使用 Oracle 函数来屏蔽特定的表列 该函数提供持久的屏蔽输出字符串 我们尝试了Oracle Hash Function 但它没有给出String类型的返回值 我们尝试了 Oracle Random 函数 dbms r
  • Angular-防止从下拉列表中选择相同的选项

    I made this dropdown with a textarea for input in angular material dialog There I have only three options in the dropdow
  • 双击选择 PhpStorm 中的空白

    在 Sublime 中 我可以双击两个字符之间的空白 以便仅选择空白 例如在 foo bar 将导致选择 foo bar 然而在 PhpStorm 中它选择整行 是否有一个设置可以切换 以便可以通过双击来选择空白 就像我可以双击变量来选择它
  • MultiAutoCompleteTextView 不显示结果

    我的活动中有以下代码 ParseQuery
  • Android:定时器/延迟替代方案

    我想让一个图像在 60 毫秒内可见 然后不可见 然后我想让另一个图像执行相同的操作 等等 我认为我没有正确使用计时器 因为当我运行该应用程序时 两个图像会同时打开 并且当我按下使用此功能的按钮时 两个图像不会消失 这是一些示例代码 time
  • Ionic / Leaflet - 无法获取 Tiles 404 Not Found(从缓存)

    我被一个非常奇怪的问题所困扰 我在用着leaflet http leafletjs com with 角度传单指令 https github com tombatossals angular leaflet directive 在之前的应用