流星+ ArcGIS JavaScript

Question

我目前正在嘗試將基於ArcGIS dojo的javascript庫集成到流星模板中（我希望僅在轉到某些路線時才下載它），但是由於該庫使用了require結構，因此我無法使其全部正常工作。

到目前為止，對我來說最好的方法是在特定路由上使用wait-for-lib並加載庫

this.route('newRoute', {
        waitOn: function(){
            return [IRLibLoader.load('http://js.arcgis.com/3.11/')]
        },
        path: '/newRoute',
        template: 'newRoute',
        layoutTemplate: 'layout'
    });

然后在模板上直接寫

<template name="newRoute">
<div id="mapDiv">
</div>
<script>
require(["esri/map", "dojo/domReady!"], function(Map) {
var map = new Map("mapDiv", {
center: [-118, 34.5],
zoom: 8,
basemap: "topo"
});

});
</script>

但是，如果我嘗試做比顯示單個地圖更復雜的事情（例如，使用地理編碼或路線樣本），我會得到一個白頁。 我試圖將所有js代碼放入mteor客戶端文件夾以及模板助手/渲染的單獨文件中，但到目前為止沒有任何效果。 例如，這不能遵循先前的技術：

   <div data-dojo-type="dijit/layout/BorderContainer" 
     data-dojo-props="design:'headline', gutters:false" 
     style="width:100%;height:100%;">
  <div data-dojo-type="dijit/layout/ContentPane" 
       data-dojo-props="region:'right'" 
       style="width:250px;">

    <div id="dir"></div>
  </div>
  <div id="map" 
       data-dojo-type="dijit/layout/ContentPane" 
       data-dojo-props="region:'center'">
  </div>
</div>
<script>
  require([
    "esri/urlUtils", "esri/map", "esri/dijit/Directions", 
    "dojo/parser", 
    "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
  ], function(
    urlUtils, Map, Directions,
    parser
  ) {
    parser.parse();
    //all requests to route.arcgis.com will proxy to the proxyUrl defined in this object.
    urlUtils.addProxyRule({
      urlPrefix: "route.arcgis.com",  
      proxyUrl: "/proxy/"
    });
    urlUtils.addProxyRule({
      urlPrefix: "traffic.arcgis.com",  
      proxyUrl: "/proxy/"
    });

    var map = new Map("map", {
      basemap: "streets",
      center:[-98.56,39.82],
      zoom: 4
    });

    var directions = new Directions({
      map: map
    },"dir");
    directions.startup();
  });
</script>

此外，我不確定在嘗試使用安全的資源（如路線服務）時應如何瀏覽代理。 我在服務器端創建了這樣的“代理”

Router.route('/proxy/',
function () {
    // NodeJS request object
    var req = this.request;

    // NodeJS  response object
    var res = this.response;


    var url = req.url;

    var test = {
        proxy: /^\/proxy\/(.+)$/,
        hosts: /^https?:\/\/(route\.)?arcgis\.com\//
    };

    var matchProxy = url.match(test.proxy);

    if (!matchProxy) {
        res.statusCode = 404;
        res.end('404 Error');
        return ret;
    }

    var target = matchProxy[1];
    var matchHosts = target.match(test.hosts);

    if (!matchHosts) {
        return notFound(res);
    }

    var headers = req.headers;
    var method = req.method;

    delete headers.host;


    if (expirationTime <(new Date).getTime())
        esriLogin();

    req.pipe(request({
        url: target,
        headers: headers,
        method: method
    })).pipe(res);

},
{ waitOn: function(){
    return [IRLibLoader.load('http://js.arcgis.com/3.11/')]},
    where: 'server'
});

但是無論如何，因為方向示例未加載到模板上，所以我無法檢查代理概念是否是加載安全內容的正確方法。

任何人都曾嘗試將arcgis整合到流星上，並且可以讓我了解如何進行整合？ :)

Answer 1

我為“延遲加載”外部.js和.css庫制作了一個Meteor 程序包 ，它也可以處理您的情況。

看一下在線示例 （我使用了ArcGis網站上的示例進行測試）。

尚未測試代理，但請告訴我是否仍然存在問題。

希望能幫助到你 ：）

Answer 2

在嘗試了許多不同的東西之后，我才找到了一種使用require加載庫和所需模塊的方法。 萬一有人遇到相同的問題，您可以嘗試以下操作：

1）安裝meteor modernizr軟件包2）將arcgis庫和所需的dojo模塊加載到模板助手中/為例如創建/渲染

Template.newAuction.created = function() {
Modernizr.load([ {
    // Load common resorces
    load : ['http://js.arcgis.com/3.11/'],
    complete: function(){
        require([
            "esri/urlUtils", "esri/map", "esri/dijit/Directions",
            "dojo/parser",
            "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
        ], function (urlUtils, Map, Directions,
                     parser) {
            parser.parse();
            //all requests to route.arcgis.com will proxy to the proxyUrl defined in this object.
            urlUtils.addProxyRule({
                urlPrefix: "route.arcgis.com",
                proxyUrl: "/proxy/"
            });
            urlUtils.addProxyRule({
                urlPrefix: "traffic.arcgis.com",
                proxyUrl: "/proxy/"
            });

            var map = new Map("map", {
                basemap: "streets",
                center: [-98.56, 39.82],
                zoom: 4
            });

            var directions = new Directions({
                map: map
            }, "dir");
            directions.startup();

        });
    }
} ]);

};

3）使用之前顯示的代理概念（它可以解決一些小問題），但請確保將以下部分（req.pipe ....）更改為：

 HTTP.post(
            url, {params: {
                token: userToken
                }
            },
            function(error, result){
                if (!error) {
                    res.statusCode = result.statusCode;
                    for (var index in result.headers) {
                        if (!result.headers.hasOwnProperty(index)) {
                            continue;
                        }
                        res.setHeader(index, result.headers[index]);
                    }
                    res.end(result.content);
                }
                else {
                    res.statusCode = 404;
                    res.end('404 error');
                }
            }
        );

並創建使用正確的http.call到arcgic服務器的登錄功能（您可以選擇其他登錄類型來實現該功能）。

希望能有所幫助，讓我發瘋了幾天:)