流星+ ArcGIS JavaScript

Question

我目前正在尝试将基于ArcGIS dojo的javascript库集成到一个流星模板中(我希望它只在到达特定路径时才被下载)，但由于库所使用的需求结构，我在使其全部工作时遇到了问题。

到目前为止，对我来说最好的方法是在特定的路由上使用等待库并加载库。

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>

此外，在尝试使用安全资源(如directions服务)时，我不确定应该如何通过代理导航。我在服务器端创建了这样一个“代理”

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 .js，它也可以为您的情况提供手柄。

看看在线示例 (我使用了来自ArcGis站点的示例进行测试)。

还没有测试代理，但让我知道，如果这仍然是一个问题。

希望它有帮助:)

Answer 2

在尝试了许多不同的东西之后，我找到了一种方法来用require加载库和需要的模块。为了防止任何人面临同样的问题，您可以尝试这样做：

1)安装meteor现代化软件包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');
                }
            }
        );

并创建一个loginfunction，该函数将正确的http.call用于北极服务器(您可以实现选择不同的登录类型)。

希望有帮助，让我疯狂了几天:)