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"
  }
}