2018-3-19
ArcGIS api for JavaScript 在3.4之后就已经抛弃了过时的写法,采用了AMD的写法,AMD规范即异步模块加载机制,这种规范让JS就像其它面向对象语言(比如Java)一样,通过模块去管理代码。dojo的模块有点像java的包,而我们所需要的类就是在不同的模块中。
我现在有点纠结了,公司GIS模块的代码使用的是过时的写法,同时还自己写了很多类,看起来非常复杂,而公司部署的api版本是3.2的,注意不是3.2x版本哈,这个版本是很老的了;现在官网的Demo全是用的AMD规范写的,我真还不晓得该怎么办了。
但是无非就是两种:1将公司的代码使用AMD规范重写一遍(工作量非常之大,还容易出错);
2在官方学到的内容,在自己本上用AMD规范写,之后转换成过时写法,如果公司有需要将转换过后的内容添加上去(表面上要简单些,实际上不清楚,重点是对于公司的代码该怎么加上去是个问题);
今天就第二种先在本地实际操作了一下发现的坑:
先附上代码
//AMD规范写法
var map;
require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol","esri/renderers/SimpleRenderer","esri/InfoTemplate","esri/graphic","dojo/on","dojo/_base/Color", "dojo/domReady!"], function(Map,ArcGISDynamicMapServiceLayer,FeatureLayer,SimpleFillSymbol,SimpleLineSymbol,SimpleRenderer,InfoTemplate,Graphic,on,Color) {
map = new Map("map", {
//basemap: "streets", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
//center: [-96.45, 39.75], // longitude, latitude
zoom: 4,
sliderStyle:"small",
logo:false
}); var dynamicMapLayer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/V1/CityFeature/MapServer"); map.addLayer(dynamicMapLayer1); //map加载事件,鼠标移除清空绘制的图形(高亮)和信息框
map.on("load",function(){
map.graphics.on("mouse-out",function(evt){
map.graphics.clear();
map.infoWindow.hide();
});
}); //创建一个特征图层并选出符合条件的要素
var olderStates = new FeatureLayer("http://localhost:6080/arcgis/rest/services/V1/CityFeature/MapServer/6",{
mode:FeatureLayer.Mode_SNAPSHOT,
outFields:["OBJECTID","name","floors","BianHao"]
});
//olderStates.setDefinitionExpression("floors<=20");
//创建一个符号,用来渲染符合条件的要素
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,255,255,0.35]),1),new Color([125,125,125,0.35]));
olderStates.setRenderer(new SimpleRenderer(symbol));
//将特征图层加载到地图中
map.addLayer(olderStates); //创建一个信息框
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("${OBJECTID}");
infoTemplate.setContent("<b>名称:</b>${name}<br/>"+"<b>楼层数:</b>${floors}<br/>"+"<b>编号:</b>${BianHao}");
//设置信息框的大小
map.infoWindow.resize(245,125); //创建一个高亮符号
var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), new Color([125,125,125,0.35]))); //鼠标经过事件,将目标图形(evt对象中)高亮渲染并显示信息框信息
olderStates.on("mouse-over",function(evt){
map.graphics.clear();
evt.graphic.setInfoTemplate(infoTemplate);
var content = evt.graphic.getContent();
map.infoWindow.setContent(content);
var title = evt.graphic.getTitle();
map.infoWindow.setTitle(title);
var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
map.graphics.add(highlightGraphic);
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoit)); //evt的中心点 }); });
然后是
//过时的写法
dojo.require("esri/map");
dojo.require("esri/layers/ArcGISDynamicMapServiceLayer");
dojo.require("esri/layers/FeatureLayer");
dojo.require("esri/symbols/SimpleFillSymbol");
dojo.require("esri/symbols/SimpleLineSymbol");
dojo.require("esri/renderers/SimpleRenderer");
dojo.require("esri/InfoTemplate");
dojo.require("esri/graphic");
dojo.require("dojo/on");
dojo.require("dojo/_base/Color");
dojo.require("dojo/domReady!"); var map; function init(){
map = new esri.Map("map",{
zoom:4,
logo:false
}); var dynamicMapLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/V1/CityFeature/MapServer"); map.addLayer(dynamicMapLayer1); //map加载事件,鼠标移除清空绘制的图形(高亮)和信息框
map.on("load",function(){
map.graphics.on("mouse-out",function(evt){
map.graphics.clear();
map.infoWindow.hide();
});
}); //创建一个特征图层并选出符合条件的要素
var olderStates = new esri.layers.FeatureLayer("http://localhost:6080/arcgis/rest/services/V1/CityFeature/MapServer/6",{
mode:esri.layers.FeatureLayer.Mode_SNAPSHOT,
outFields:["OBJECTID","name","floors","BianHao"]
}); //创建一个符号,用来渲染符合条件的要素
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([255,255,255,0.35]),1),new dojo.Color([125,125,125,0.35]));
olderStates.setRenderer(new esri.renderer.SimpleRenderer(symbol));
//将特征图层加载到地图中
map.addLayer(olderStates); //创建一个信息框
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setTitle("${OBJECTID}");
infoTemplate.setContent("<b>名称:</b>${name}<br/>"+"<b>楼层数:</b>${floors}<br/>"+"<b>编号:</b>${BianHao}");
//设置信息框的大小
map.infoWindow.resize(245,125); //创建一个高亮符号
var highlightSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), new dojo.Color([125,125,125,0.35]))); //鼠标经过事件,将目标图形(evt对象中)高亮渲染并显示信息框信息
olderStates.on("mouse-over",function(evt){
map.graphics.clear();
evt.graphic.setInfoTemplate(infoTemplate);
var content = evt.graphic.getContent();
map.infoWindow.setContent(content);
var title = evt.graphic.getTitle();
map.infoWindow.setTitle(title);
var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);
map.graphics.add(highlightGraphic);
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoit)); //evt的中心点 }); }
dojo.addOnLoad(init);
我将不同的地方用红色标出来了,可以发现,过时的写法大体上和AMD规范没得什么区别,需要注意的是require的引用,还有之后调用esri资源中的对象时要加上些东西;
坑在有些和引用的不太一样,比如说FeatureLayer 和SimpleFillSymbol 的调用就是有区别,一个是esri.layers. 一个是esri.symbol. 还有color : dojo.Color 没有资源上的_base;
这些以后还有,得注意一下。