1

我正在尝试使用 Polymaps 渲染一个简单的地图，但 CORS 问题出现在中间：

服务器端

对于服务器，我将 TileStache 与以下配置文件一起使用：

 {  
  "cache":
       { "name": "Test", "path": "/home/jose/data/maps", "umask": "0000"   },

 "layers":
       { "local": {
             "provider": {"name": "mbtiles", "tileset": "mundo.mbtiles" }

            },
         "arpt":  { 
             "allowed origin": "*",
             "provider": { "name": "vector", "driver": "GeoJSON",
                             "parameters": {"file": "/home/user/data/data.geojson"},
                             "properties": ["ICAO"] }

             }
      }
  }

我正在通过以下方式执行这样的服务器：

$ tilestache-server.py -c config.cfg -i localhost -p 8080

鉴于我能够实际看到地图图块并且我能够获取 geojson 图块，因此该服务器似乎工作正常。

客户端

这是我遇到问题的地方。火狐抱怨：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8080/arpt/5/15/12.geojson. This can be fixed by moving the resource to the same domain or enabling CORS.

（对请求的每个 GeoJSON 磁贴重复）

我正在运行的 JavaScript 代码是：

<!DOCTYPE html>
 <head>
    <title></title>
    <script type="text/javascript" src="polymaps.min.js"></script>
    <link rel="points" type="application/json" href="http://localhost:8080/arpt"> 
    <style type="text/css">

 @import url("example.css");

 #map {
   background: #E6E6E6;
 }

 .layer use {
   stroke: #ccc;
   stroke-opacity: .5;
 }

 #copy {
   color: #000;
   opacity: .5;
 }

 #copy a {
   color: #000;
 }

    </style>    
 </head>
 <body>
   <h1>Comienzo</h1>
   <p>Fin</p>  
     <!--Polymaps Build--> 
     <!--div id="map"></div -->
   <script>
 //curl -H "Origin: http://example.com" -H "Access-Control-Request-Methos: POST" -H      "Access-Control-Request-Headers: X-Requested-With"  -X OPTIONS --head --verbose      http://localhost:8080/arpt/3/2/0.geojson  
   //window.document.domain = 'http://localhost';
   var po = org.polymaps;

         //Add Image tiles as base
 var map = po.map()
     //.container( document.getElementById("map").appendChild(po.svg("svg")) )
     .container( document.body.appendChild(po.svg("svg")) )
     .zoom(5)
     .zoomRange([1,5])
     .center({lat: 37.76, lon: 0 })
     .add( po.interact() );

 // Control de zoom sin control de dirección
 map.add( po.compass().pan("none") );

 // Tile que vienen de mbtiles.
 map.add( po.image().url( "http://127.0.0.1:8080/local/{Z}/{X}/{Y}.png") );

 // Tile GeoJSON
 map.add( po.geoJson()
    .url("http://127.0.0.1:8080/arpt/{Z}/{X}/{Y}.geojson")
    .tile(true)
    //.zoomRange([3,5])
    .on("load", load) );

 function load (e) {
    for (var i=0;i<e.featureslength;i++) {
                 console.log(e.properties.ICAO,e.features[i].geometry.coordinates);
    }
    /* po.stylist()
       //.attr("stroke", function(d) { return "blue"; })
       .title(e.properties.ICAO; });*/
 }
   </script>  
   <!-- script type="text/javascript" src="ex01.js">

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

我只是一个学习 JavaScript 并使用这些技术的新手。鉴于我在虚拟机中运行所有 localhost，我不太了解 CORS 问题。

任何关于我做错了什么的线索将不胜感激。

亲切的问候，

何塞·M。

4

0 回答 0