javascript - Meteor + ArcGIS JavaScript

Question

我目前正在尝试将基于ArcGIS dojo的javascript库集成到 meteor 模板中(我希望仅在前往某些路线时才下载它)，但由于使用了需要的结构，我在使其全部工作时遇到问题由图书馆提供。

到目前为止，对我来说最好的方法是在某个路由上使用 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>

但是，如果我尝试做一些比显示单个 map 更复杂的事情(例如使用地理编码或方向示例)，我会得到一个白页。我尝试将所有 js 代码放入 mteor 客户端文件夹以及模板 helpers/rendered 上的单独文件中，但到目前为止没有任何效果。 例如，按照以前的技术，这不起作用:

   <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'
});

但无论如何，由于方向示例未加载到模板上，我无法检查代理想法是否是加载安全内容的正确方法。

有人尝试过在 Meteor 上集成 arcgis 并且可以告诉我应该如何进行集成吗？ :)

Answer 1

有一颗 meteor package我已经制作了“延迟加载”外部 .js 和 .css 库，它可以 handle你的情况也是如此。

看看online example (我使用 ArcGis 站点上的 example 进行测试)。

尚未测试代理，但如果这仍然是问题，请告诉我。

希望有帮助:)