arcgis js:动态引入js、css依赖

image.png

从测试环境到生产环境，每个页面中的arcgis js 、css依赖修改也较为繁琐，在此，将其写入配置文件中，动态引入。
gisInit.js代码如下：

var gisConfigUrl = "configs/gisConfig.json";

loadConfig(gisConfigUrl,function(gisConfig) {
  console.log(gisConfig);

  var arcgisInitUrl = gisConfig.Map.arcgisInitUrl;
  var arcgisCSSUrl = gisConfig.Map.arcgisCSSUrl;

  var $arcgisCSS = "<link rel='stylesheet' type='text/css' href='"+arcgisCSSUrl+"'/>";
  $("head").append($arcgisCSS);

  loadScript(arcgisInitUrl, function () {
    var $qingdao = $("<script src='js/qingdaoPoint.js'></script>");
    $("body").append($qingdao);
  })
})

/**
 * 用于初始化加载arcgisJS文件
 * @param url传入arcgisJS地址，读取配置文件传入
 * @param callback 完成加载后回调函数
 */
function loadScript(url, callback) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  if (typeof(callback) != "undefined") {
    if (script.readyState) {
      script.onreadystatechange = function() {
        if (script.readyState == "loaded" || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {
      script.onload = function() {
        callback();
      };
    }
  };
  script.src = url;
  document.body.appendChild(script);

}

/**
 * 加载配置文件
 * @param configUrl 配置文件路径
 * @param callBack 回调
 */
 function loadConfig(configUrl,callBack) {
  $.ajax({
    async: false,
    url: configUrl,
    type: 'GET',
    dataType: 'json',
  }).done(function(data) {
    callBack(data);
  }).fail(function(data, status, desc) {
    alert("无法获取配置信息或配置信息有误！");
    throw new Error(status + "\n" + desc);
  });
}

配置文件如下：

{
  "Map": {
    "arcgisCSSUrl":"http://10.10.5.155:8080/arcgis_js_api_3.20/library/3.20/3.20/esri/css/esri.css",
    "arcgisInitUrl": "http://10.10.5.155:8080/arcgis_js_api_3.20/library/3.20/3.20/init.js",
    "baseMapUrl": "http://10.10.1.122:6080/arcgis/rest/services/tile/gaodeTile/MapServer"
    }
}

上述代码保证了在arcgis init.js引入后再加载业务js文件，避免了报require未定义的错误

---

2018.6.20改进更新，将底图加载也写在这一配置js中，同时将地图操作js代码gisMap.js对应的路径也写入配置，方便更改

var basePath = location.origin + location.pathname.substring(0, location.pathname.substr(1).indexOf('/') + 1);
var gisConfigUrl = basePath + "/configs/gisConfig.json";
// var gisMapJsUrl = "js/gisMap.js";
var dojoConfig = {
  parseOnLoad: true,
  packages: [{
    "name": "myModules",
    "location": basePath + "/js/myModules"
  }]
};

loadConfig(gisConfigUrl, function (gisConfig) {
  console.log(gisConfig);
  var arcgisInitUrl = gisConfig["Map"]["arcgisInitUrl"];
  var arcgisCSSUrl = gisConfig["Map"]["arcgisCSSUrl"];
  var gisMapJsUrl = gisConfig["JS"]["gisMapJsUrl"];

  var $arcgisCSS = "<link rel='stylesheet' type='text/css' href='" + arcgisCSSUrl + "'/>";
  $("head").append($arcgisCSS);

  loadScript(arcgisInitUrl, function () {
    initMap(gisConfig);
    var $gisMapJs = $("<script src='" + gisMapJsUrl + "'></script>");
    $("body").append($gisMapJs);
  })

})

/**
 * 用于初始化加载arcgisJS文件
 * @param url传入arcgisJS地址，读取配置文件传入
 * @param callback 完成加载后回调函数
 */
function loadScript(url, callback) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  if (typeof(callback) != "undefined") {
    if (script.readyState) {
      script.onreadystatechange = function () {
        if (script.readyState == "loaded" || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {
      script.onload = function () {
        callback();
      };
    }
  }
  ;
  script.src = url;
  document.body.appendChild(script);

}

/**
 * 加载配置文件
 * @param configUrl 配置文件路径
 * @param callBack 回调
 */
function loadConfig(configUrl, callBack) {
  $.ajax({
    async: false,
    url: configUrl,
    type: 'GET',
    dataType: 'json',
  }).done(function (data) {
    callBack(data);
  }).fail(function (data, status, desc) {
    alert("无法获取配置信息或配置信息有误！");
    throw new Error(status + "\n" + desc);
  });
}


/**
 * 基础底图在此初始化
 * @param gisConfig 配置信息
 */
function initMap(gisConfig){
  require(["esri/map",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "dojo/domReady!"],
    function (Map, ArcGISTiledMapServiceLayer) {
      map = new Map("mapdiv", {
        center: [120.313, 36.206],
        zoom: 10,
        maxZoom: 17,
        minZoom: 4,
        slider: false,
        logo: false
      });

      var baseMapUrl = gisConfig["Map"]["baseMapUrl"];
      var baseLayer = new ArcGISTiledMapServiceLayer(baseMapUrl);
      map.addLayer(baseLayer);
    })
}

gisConfig.json

{
  "Map": {
    "arcgisCSSUrl":"http://10.10.5.155:8080/arcgis_js_api_3.20/library/3.20/3.20/esri/css/esri.css",
    "arcgisInitUrl": "http://10.10.5.155:8080/arcgis_js_api_3.20/library/3.20/3.20/init.js",
    "baseMapUrl": "http://10.10.1.122:6080/arcgis/rest/services/tile/gaodeTile/MapServer"
    },
  "JS": {
    "gisMapJsUrl": "js/gisMap.js"
  }
}