arcgis js:動態引入js、css依賴
從測試環境到生產環境,每個頁面中的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"
}
}
相關文章
- JS動態引入模組JS
- 依賴引入 | Android依賴引入史上最全攻略Android
- js實現的動態引入css檔案程式碼例項JSCSS
- AngularJs動態載入模組和依賴注入簡單介紹AngularJS依賴注入
- js/css相關引入JSCSS
- nodeJs的模組依賴NodeJS
- Vue.js 依賴收集Vue.js
- android引入依賴,合集Android
- 一, 建立工程,引入依賴
- nodejs 中的依賴管理NodeJS
- AngularJS 4(六)【依賴注入】AngularJS依賴注入
- kmdjs和迴圈依賴JS
- AngularJS動態設定CSSAngularJSCSS
- PHP動態壓縮js,cssPHPJSCSS
- 動態載入JS和CSSJSCSS
- js動態載入 js檔案和 css檔案JSCSS
- maven中新增Servlet和jsp依賴MavenServletJS
- require.js 迴圈依賴介紹UIJS
- 前端 | gulp 打包 require.js 模組依賴前端UIJS
- 動態庫遞迴依賴專項遞迴
- GeoJson轉ArcGIS的EsriJsonJSON
- bower解決js的依賴管理備記JS
- eureka客戶端依賴引入爆紅客戶端
- Backbone React Requirejs 應用實戰(一)——RequireJS管理React依賴ReactUIJS
- js動態改變css偽類樣式JSCSS
- mui仿京東地址 css + js (動態資料)UICSSJS
- 動態JSJS
- JS--JS動態效果JS
- Linux 依賴動態庫 / 靜態庫的動態態庫 / 靜態庫Linux
- 基於 element-plus 封裝一個依賴 json 動態渲染的查詢控制元件封裝JSON控制元件
- 原生JS動態載入JS、CSS檔案及程式碼指令碼JSCSS指令碼
- 動態建立script引入js檔案導致亂碼現象JS
- 優雅的實現動態載入 css、jsCSSJS
- javascript如何動態載入js或者css檔案JavaScriptJSCSS
- js動態載入外部css檔案程式碼JSCSS
- nestjs後端開發實戰(一)——依賴注入JS後端依賴注入
- AMD and CMD are dead之KMDjs核心之依賴分析JS
- ArcGIS API for JS 中的styleAPIJS