js:读取配置文件
2018-05-29 本文已影响9人
gis杭州
前言 ：gis开发中有很多地图url，直接写在各个js文件中，一旦需要修改（例如测试地址改为生产服务器上的arcgis服务地址）会非常麻烦。为了方便管理这些服务地址，让其他开发人员接手时也能明确项目中调用了哪些服务，引入配置文件显得很有必要。
下方代码是实际项目的一份js文件，里面带了3个gis相关的地址；一旦需要更改必须全局搜索然后逐个文件去修改地址，非常麻烦。（其他项目示例代码，与后文改造代码无关）
$(function () {
initData();
});
function initData() {
var touminigdu = 1;
HXcommon.ajax('facilitymge/service/InfoDivide/GetInfo', {}, function (data) {
var result = data.result;
var html1 = '';
var itemName = data.mainItem;
var items = [];
var no;
for (var k = 0; k < itemName.length; k++) {
if (itemName[k].mainBiz != '未划分') {
items.push(itemName[k]);
} else {
no = itemName[k];
}
}
items.push(no);
itemName = items;
for (var k = 0; k < itemName.length; k++) {
var colorStr = itemName[k].color;
var cs = colorStr.split(',');
var color = [];
for (var i = 0; i < cs.length; i++) {
color.push(cs[i]);
}
html1 += '<div class="layui-col-xs2"><span class="default-btn " id="' + itemName[k].mainBiz + '" style="background-color:rgb(' + colorStr + ');">' + itemName[k].mainBiz + '</span></div>';
}
$("#biz").html(html1);
});
}
require([
"esri/map", "esri/layers/FeatureLayer", "esri/geometry/Extent",
"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
"esri/renderers/SimpleRenderer", "esri/SpatialReference", "esri/graphic",
"esri/layers/GraphicsLayer", "esri/lang",
"esri/geometry/Polygon","esri/Color", "dojo/number", "dojo/dom-style",
"dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"
], function (Map, FeatureLayer, Extent,
SimpleFillSymbol, SimpleLineSymbol,
SimpleRenderer,SpatialReference, Graphic, GraphicsLayer, esriLang,
Polygon,Color, number, domStyle,
TooltipDialog, dijitPopup) {
var map, dialog;
var myDynamicMapServiceLayer;
var contentSql = "''";
map = new Map("mapDiv", {
slider: false,
logo: false,
minScale: 61984.128,
maxScale: 968.5019999999997,
extent: new Extent({xmin: -100, ymin: -4000, xmax: 8000, ymax: 100, spatialReference: 3857})
});
var mapUrl = "http://10.10.5.155:6080/arcgis/rest/services/wireless/wirelessMap/MapServer";
var featureUrl = "http://10.10.5.155:6080/arcgis/rest/services/wireless/wirelessMap/FeatureServer/1";
var mapBasicLayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapUrl);
map.addLayer(mapBasicLayer);
myDynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapUrl);
map.addLayer(myDynamicMapServiceLayer);
var gLayerPolygon = new GraphicsLayer();
map.addLayer(gLayerPolygon);
var symbol = new SimpleFillSymbol();
//填充色
symbol.setColor(new Color([0, 0, 0, 0.25]));
//边框颜色
symbol.outline.setColor([255, 0, 0, 1]);
symbol.outline.setWidth(3);
var featureLayer = new esri.layers.FeatureLayer(featureUrl, {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
var featureSymbol = new SimpleFillSymbol();//featureLayer加载空样式
featureSymbol.setColor(new Color([255, 255, 255, 0])); //网格填充色设为空
featureSymbol.outline.setColor([]);//边框颜色设为空
featureLayer.setRenderer(new SimpleRenderer(featureSymbol));
map.addLayer(featureLayer);//保持该图层在最上方 以便响应鼠标事件
// map.infoWindow.resize(245,125);
dialog = new TooltipDialog({
id: "tooltipDialog",
style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
});
dialog.startup();
map.on("load", function () {
map.graphics.enableMouseEvents();
map.graphics.on("mouse-out", closeDialog);
map.graphics.on("click", hightlightGraphicClickHandler);
});
//移开鼠标 关闭信息框
function closeDialog() {
map.graphics.clear();
dijitPopup.close(dialog);
};
//单击色块，弹出对应批文列表
function hightlightGraphicClickHandler(evt) {
console.log("频率信息是" + evt.graphic.attributes.CODE);
var freqInfo = evt.graphic.attributes.CODE;
HXcommon.layer.open('list.html?freqInfo=' + freqInfo, '批文列表', 'layer-fault-manage-txt', '1100', '570');
}
//色块鼠标移入添加高亮显示、信息框展示
featureLayer.on("mouse-over", function (evt) {
closeDialog();
var t = "<b>${TYPE}</b><hr><b>频率范围: </b>${CODE}<br>"
+ "<b>详细信息: </b>${DETAIL}<br>";
var highlightSymbol = new SimpleFillSymbol(//鼠标滑过高亮显示样式
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 1.5
),
new Color([125, 0, 0, 0.3])
);
var content = esriLang.substitute(evt.graphic.attributes, t);
var highlightGraphic = new Graphic(evt.graphic.geometry, highlightSymbol);
highlightGraphic.setAttributes(evt.graphic.attributes);
map.graphics.add(highlightGraphic);
dialog.setContent(content);
domStyle.set(dialog.domNode, "opacity", 0.85);
dijitPopup.open({
popup: dialog,
x: evt.pageX,
y: evt.pageY
});
});
//点击某一类别的无线电按钮，高亮显示该类别所有色块
$("#biz").on('click', 'span', function (evt) {
closeDialog();
map.setExtent(new Extent({xmin: -100, ymin: -4000, xmax: 8000, ymax: 100, spatialReference: 3857}));
var queryName = ",'" + evt.currentTarget.innerText + "'";
if ($(this).hasClass("cur")) {
contentSql = contentSql.split(queryName)[0] + contentSql.split(queryName)[1];
$(this).removeClass("cur");
$(this).css("border", "2px solid transparent");
} else {
contentSql += queryName;
$(this).addClass("cur");
$(this).css("border", "green 1px solid");
}
var layerDefinitions = [];
layerDefinitions[1] = "type in(" + contentSql + ")";
myDynamicMapServiceLayer.setLayerDefinitions(layerDefinitions);
if ("''" == contentSql) {//取消所有选中后恢复底图默认透明度
mapBasicLayer.setOpacity(1);
} else {
mapBasicLayer.setOpacity(0.1);
}
});
//点击定位按钮，频谱图定位到对应输入位置并标示范围(或单条竖线)
$("#navigate").on('click', function (evt) {
var startNumber,endNumber;
var hzStr = $("#endunit").find("option:selected").text();
var xyObj;
if(""==$("#startfreq").val()){//无输入
HXcommon.layer.alert("请输入频率值");
}else if(""!=$("#startfreq").val()&&""==$("#endfreq").val()){//单一输入，线条展示
startNumber = parseFloat($("#startfreq").val());
if(isNaN(startNumber)){//不是数字，错误输入
HXcommon.layer.alert("输入有误，请重新输入数值");
return;
}else{//正确输入了单一数值
xyObj = getXYvalue(hzStr, startNumber, startNumber);
creatGraphic(xyObj);
}
}else if(""!=$("#startfreq").val()&&""!=$("#endfreq").val()){//范围区域面展示
startNumber = parseFloat($("#startfreq").val());
endNumber = parseFloat($("#endfreq").val());
if(isNaN(startNumber)||isNaN(endNumber)){//不是数字，错误输入
HXcommon.layer.alert("输入有误，请重新输入数值");
return;
}else{//正确输入了两个数值
xyObj = getXYvalue(hzStr, startNumber, endNumber);
creatGraphic(xyObj);
}
}
});
function getXYvalue(hzStr, startNumber, endNumber) {
var xEnd = 0;
var yValue = 0;
var subtotal = 0;//每条频谱图代表频点范围数值
var ownNumber;//所属第几行数据
if (hzStr.toLowerCase() === "khz") {//1、2两行数据
if (endNumber <= 300) {//第1行数据
yValue = 20;
ownNumber = 1;
subtotal = 300;
} else if (startNumber >= 300 && endNumber <= 3000) {//第2行数据
yValue = -470;
ownNumber = 2;
subtotal = 3000 - 300;
} else if (startNumber > 3000) {//eg:21000.000kHz~21450.000kHz,表达为21MHz~21.45MHz,归入第三行显示
yValue = -980;
ownNumber = 3;
subtotal = 30 - 3;
startNumber = startNumber / 1000;
endNumber = endNumber / 1000;
}
} else if (hzStr.toLowerCase() === "mhz") {//3、4、5行数据
if (startNumber >= 3 && endNumber <= 30) {//第3行数据
yValue = -980;
ownNumber = 3;
subtotal = 30 - 3;
} else if (startNumber >= 30 && endNumber <= 300) {//第4行数据
yValue = -1495;
ownNumber = 4;
subtotal = 300 - 30;
} else if (startNumber >= 300 && endNumber <= 3000) {//第5行数据
yValue = -2008;
ownNumber = 5;
subtotal = 3000 - 300;
} else if (startNumber > 3000) {//eg:5780.000MHz~5780.000MHz,表达为5.78GHz~5.78GHz,归入第6行显示
yValue = -2520;
ownNumber = 6;
subtotal = 30 - 3;
startNumber = startNumber / 1000;
endNumber = endNumber / 1000;
}
} else if (hzStr.toLowerCase() === "ghz") {//6、7两行数据
if (startNumber >= 3 && endNumber <= 30) {//第6行数据
yValue = -2520;
ownNumber = 6;
subtotal = 30 - 3;
} else if (startNumber >= 30 && endNumber <= 1000) {//第7行数据
yValue = -3034;
ownNumber = 7;
subtotal = 280 - 30;
}
} else {//错误数据，传入数据格式不正确
console.warn("错误数据,检查数据格式是否带单位");
}
var startObj = getXAndName(startNumber, ownNumber);
var xStart = startObj.closestX + 7960 * (startNumber - startObj.closestName) / subtotal;
if (startNumber === endNumber) {//一条线
xEnd = xStart;
} else {//矩形，需要查询构成矩形下一个点的x坐标
var endObj = getXAndName(endNumber, ownNumber);
xEnd = endObj.closestX + 7960 * (endNumber - endObj.closestName) / subtotal;
}
return {xStart: xStart, xEnd: xEnd, y: yValue};
}
//查询后台最近点坐标并返回该最近点对应的x坐标与频点信息（name字段）
function getXAndName(name, ownNumber) {
var closestX = 0;//最近点x坐标
var closestName = 0;//最近点频点值
$.ajax({
type: "GET",
url: "http://10.10.5.155:8080/gisMap/wireless/getCoordinates/" + name + "/" + ownNumber,
dataType: "json",
async: false,
success: function (obj) {
console.log("--ok get it " + obj[0]);
closestX = Number(obj[0].x);
closestName = Number(obj[0].name);
},
error: function () {
console.log("请求错误");
closestX = "error";
closestName = "error";
HXcommon.layer.alert("输入范围跨度太大");
}
});
return {
closestX: closestX,
closestName: closestName
};
}
function creatGraphic(xyObj) {
gLayerPolygon.clear();
if(isNaN(xyObj.xStart)){//返回错误,不是数值的x
map.setExtent(new Extent({xmin: -100, ymin: -4000, xmax: 8000, ymax: 100, spatialReference: 3857}));
return;
}
mapBasicLayer.setOpacity(0.7);
//绘制多边形
var polygon = new Polygon(new SpatialReference({wkid: 3857}));
var YMOVE = 540;
var x1 = xyObj.xStart;
var y1 = xyObj.y;
var x2 = xyObj.xEnd;
var y2 = y1;
var x3 = xyObj.xEnd;
var y3 = y1 - YMOVE;
var x4 = x1;
var y4 = y1 - YMOVE;
polygon.addRing([[x1, y1], [x2, y2], [x3, y3], [x4, y4], [x1, y1]]);
var graphic = new Graphic(polygon, symbol);
gLayerPolygon.add(graphic);
// map.setScale(Number(map.getScale()) / 4);
map.centerAt(polygon.getExtent().getCenter());
};
//清除
$("#clerGraphic").on('click', function (evt) {
gLayerPolygon.clear();
map.setExtent(new Extent({xmin: -100, ymin: -4000, xmax: 8000, ymax: 100, spatialReference: 3857}));
})
});
END 前言结束
1 新建一个gisConfig.json文件，写入相关的地址（此处只写了一个地址测试用），存放在config目录下。
image.png
2 新建mapLoader.js，在html页面业务代码js文件前引入；在此编写读取配置文件代码
image.png
var HXDIGIS = {};
HXDIGIS.MapLoader = function(opt_options) {
this.gisConfig_ = null;
this.loadConfig_();
};
$.extend(HXDIGIS.MapLoader.prototype, {
loadConfig_: function() {
var me = this;
$.ajax({
async: false,
url: "configs/gisConfig.json",
type: 'GET',
dataType: 'json',
}).done(function(data) {
me.gisConfig_ = data;
}).fail(function(data, status, desc) {
alert("无法获取配置信息或配置信息有误！");
throw new Error(status + "\n" + desc);
});
},
getGISConfig: function() {
return this.gisConfig_;
}
});
3 修改原有的调用代码，改为从配置文件读取到的url地址
var maploader = new HXDIGIS.MapLoader();
var gisConfig = maploader.getGISConfig();
var baseMapUrl = gisConfig["Map"]["baseMapUrl"];
// var baseMapUrl = "http://10.10.1.122:6080/arcgis/rest/services/tile/gaodeTile/MapServer";
var baseLayer = new ArcGISTiledMapServiceLayer(baseMapUrl);
map.addLayer(baseLayer);
END 结束示例
上述写法引入了HXDIGIS这一全局变量，而且必须在html页面中引入读取配置文件的js文件。利用dojo的js模块化开发改进这一功能，具体步骤如下：
1新建模块，存放在myMoudles文件夹下
image.png
模块内代码如下 MapLoader.js
define([], function() {
var MapLoader = function(opt_options) {
this.gisConfig_ = null;
this.loadConfig_();
};
$.extend(MapLoader.prototype, {
loadConfig_: function() {
var me = this;
$.ajax({
async: false,
url: "configs/gisConfig.json",
type: 'GET',
dataType: 'json',
}).done(function(data) {
me.gisConfig_ = data;
}).fail(function(data, status, desc) {
alert("无法获取配置信息或配置信息有误！");
throw new Error(status + "\n" + desc);
});
},
getGISConfig: function() {
return this.gisConfig_;
}
});
return MapLoader;
}
);
2 在主页面html文件中配置本地模块的路径,注意，这段配置代码需要写在引入arcgis js api的init.js文件之前
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>pointMap</title>
<style>
html, body, #mapdiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" type="text/css"
href="http://10.10.5.155:8080/arcgis_js_api_3.20/library/3.20/3.20/esri/css/esri.css"/>
<link rel="stylesheet" href="css/bootstrap-3.3.5.css">
<link rel="stylesheet" href="css/mapChange.css">
</head>
<body>
<div id="mapdiv" class="MapClass"></div>
</body>
<script>var dojoConfig = {
parseOnLoad: true,
packages: [{
"name": "myModules",
"location": location.pathname.replace(/\/[^/]+$/, "") + "/js/myModules"
}]
};
</script>
<script src="js/coordtransform.js"></script>
<script type="text/javascript" src="http://10.10.5.155:8080/arcgis_js_api_3.20/library/3.20/3.20/init.js"></script>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap-3.3.5.js"></script>
<!--<script src="js/mapLoader.js"></script>-->
<script type="text/javascript" src="js/qingdaoPoint.js"></script>
<script src="js/mapChange.js"></script>
</html>
3 代码中调用
image.png
