ArcGIS for js简单实现
2016-01-05 02:29
477 查看
<html>
<head>
<title>ItcastOA</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="style/blue/top.css" />
<script language="JavaScript" src="script/jquery.js"></script>
<script language="JavaScript" src="script/menu.js"></script>
<link type="text/css" rel="stylesheet" href="style/blue/menu.css" />
<link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
<script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script>
<script type="text/javascript" src="http://localhost:3616/arcgisjs/jsapi_vsdoc12_v38.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" />
<style>
html, body, #mainWindow {
font-family: sans-serif;
height: 100%;
width: 100%;
}
html, body {
margin: 0;
padding: 0;
}
#header {
height: 80px;
overflow: auto;
padding: 0.5em;
}
</style>
<script type="text/javascript">
var map, toolbar, symbol, geomTask,flag;
//dojo.require("esri.tasks.query");
require([
"esri/map",
"esri/toolbars/navigation",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/dijit/OverviewMap",
"esri/toolbars/draw",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/parser", "dijit/registry",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
], function (
Map, Navigation,IdentifyTask,IdentifyParameters,OverviewMap, Draw, Graphic,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
parser, registry
) {
parser.parse();
map = new Map("map", {
});
// var layer1 = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
// map.addLayer(layer1);
// map.setZoom(4);
map.on("load", createToolbar); //地图加载创建绘图工具对象
dojo.declare("TianDiTiledMapServiceLayer", esri.layers.TiledMapServiceLayer, {
constructor: function() {
this.spatialReference = new esri.SpatialReference({ wkid:4326 });
this.initialExtent = (this.fullExtent =
new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
this.tileInfo = new esri.layers.TileInfo({
"rows" : 256,
"cols" : 256,
"compressionQuality" : 0,
"origin" : { "x" : -180,"y" : 90},
"spatialReference" : {"wkid" : 4326},
"lods" : [
{"level" : 0, "resolution" : 0.703125, "scale" : 295497593.05875},
{"level" : 1, "resolution" : 0.3515625, "scale" : 147748796.529375},
{"level" : 2, "resolution" : 0.17578125, "scale" : 73874398.264688},
{"level" : 3, "resolution" : 0.087890625, "scale" : 36937199.132344},
{"level" : 4, "resolution" : 0.0439453125, "scale" : 18468599.566172},
{"level" : 5, "resolution" : 0.02197265625, "scale" : 9234299.783086},
{"level" : 6, "resolution" : 0.010986328125, "scale" : 4617149.891543},
{"level" : 7, "resolution" : 0.0054931640625, "scale" : 2308574.945771},
{"level" : 8, "resolution" : 0.00274658203125, "scale" : 1154287.472886},
{"level" : 9, "resolution" : 0.001373291015625, "scale" : 577143.736443},
{"level" : 10, "resolution" : 0.0006866455078125, "scale" : 288571.86822143558},
{"level" : 11, "resolution" : 0.00034332275390625, "scale" : 144285.93411071779},
{"level" : 12, "resolution" : 0.000171661376953125, "scale" : 72142.967055358895},
{"level" : 13, "resolution" : 8.58306884765625e-005, "scale" : 36071.483527679447},
{"level" : 14, "resolution" : 4.291534423828125e-005, "scale" : 18035.741763839724},
{"level" : 15, "resolution" : 2.1457672119140625e-005, "scale" : 9017.8708819198619},
{"level" : 16, "resolution" : 1.0728836059570313e-005, "scale" : 4508.9354409599309},
{"level" : 17, "resolution" : 5.3644180297851563e-006, "scale" : 2254.4677204799655}]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function(level, row, col) {
var levelMap = "";
if(level<10){
levelMap = "A0512_EMap";
}else if(level<12){
levelMap = "B0627_EMap1112";
}else if(level<18){
levelMap = "siwei0608";
}
return "http://t1.tianditu.cn/DataServer?T=vec_c&"+levelMap+"&X=" + col + "&Y=" + row + "&L=" + (level*1+1);
}
});
dojo.declare("TianDiBiaoZhuMapServiceLayer", TianDiTiledMapServiceLayer, {
getTileUrl: function(level, row, col) {
return "http://t1.tianditu.cn/DataServer?T=cva_c&X=" + col + "&Y=" + row + "&L=" + (level*1+1);
}
});
dojo.declare("TianDiYXMapServiceLayer", TianDiTiledMapServiceLayer, {
getTileUrl: function(level, row, col) {//wmts
return "http://t1.tianditu.cn/DataServer?T=img_c&X=" + col + "&Y=" + row + "&L=" + (level*1+1);
}
});
map.addLayer(new TianDiTiledMapServiceLayer());
map.addLayer(new TianDiBiaoZhuMapServiceLayer());
map.addLayer(new TianDiYXMapServiceLayer());
var button1 = dojo.byId("Button1");
var button2 = dojo.byId("Button2");
var button3 = dojo.byId("Button3");
var button4 = dojo.byId("Button4");
var button5 = dojo.byId("Button5");
var button6 = dojo.byId("Button6");
var button7 = dojo.byId("Button7");
var button8 = dojo.byId("Button8");
var button9 = dojo.byId("Button9");
var button10 = dojo.byId("Button10");
// dojo.connect(button10,"click",function(evt){
// // map.on("click",executeQueryTask);
// map.graphic.on("click",aa);
//});
var navToolbar = new esri.toolbars.Navigation(map);
dojo.connect(button1, "click", function (evt) {
navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);
});
dojo.connect(button2, "click", function (evt) {
navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);
});
dojo.connect(button3, "click", function (evt) {
map.panUp();
});
dojo.connect(button4, "click", function (evt) {
map.panDown();
});
dojo.connect(button5, "click", function (evt) {
map.panLeft();
});
dojo.connect(button6, "click", function (evt) {
map.panRight();
});
dojo.connect(button7, "click", function (evt) {
navToolbar.zoomToFullExtent()
;
});
dojo.connect(button8, "click", function (evt) {
navToolbar.activate(esri.toolbars.Navigation.PAN);
});
dojo.connect(button9, "click", function (evt) {
var overviewMap = new esri.dijit.OverviewMap({
map: map,
visible: true
});
overviewMap.startup();
});
dojo.connect(dian,"click",function(evt){
toolbar.activate(Draw["POINT"]);//执行绘图
map.hideZoomSlider();
});
dojo.connect(Multi_Point,"click",function(evt){
toolbar.activate(Draw["MULTI_POINT"]);//执行绘图
map.hideZoomSlider();
});
dojo.connect(Linee,"click",function(evt){
toolbar.activate(Draw["LINE"]);//执行绘图
map.hideZoomSlider();
});
dojo.connect(Polylinee,"click",function(evt){
toolbar.activate(Draw["POLYLINE"]);//执行绘图
map.hideZoomSlider();
});
dojo.connect(Polygonn,"click",function(evt){
toolbar.activate(Draw["POLYGON"]);//执行绘图
map.hideZoomSlider();
});
// 遍历所有dijit,连接onClick事件
//为按钮来激活绘图工具
registry.forEach(function (d) {
//D是引用的dijit
//可能是一个布局容器或一个按钮
if (d.declaredClass === "dijit.form.Button") {//判断是不是按钮
d.on("click", activateTool);
}
});
function activateTool() {
var tool = this.label.toUpperCase().replace(" ", "_");//转换为大写
alert(tool);
toolbar.activate(Draw[tool]);//执行绘图
map.hideZoomSlider();
}
function createToolbar(themap) {
toolbar = new Draw(map);
toolbar.on("draw-end", addToMap);
}
function addToMap(evt) {
var symbol;
toolbar.deactivate();//试对象无效
map.showZoomSlider();//地图放大缩小标尺显示
switch (evt.geometry.type) {
case "point":
case "multipoint":
symbol = new SimpleMarkerSymbol();
break;
case "polyline":
symbol = new SimpleLineSymbol();
break;
default:
symbol = new SimpleFillSymbol();
break;
}
var graphic = new Graphic(evt.geometry, symbol);
map.graphics.add(graphic);
}
});
</script>
</head>
<body>
<div >
<div>
<div id="Head1">
<div id="Logo">
<a id="msgLink" href="javascript:void(0)"></a>
<font color="#0000CC" style="color:#F1F9FE; font-size:28px; font-family:Arial Black, Arial">热力管线系统</font>
</div>
</div>
<div id="Head2">
<div>
<input id="Button1" type="button" value="放大" />
<input id="Button2" type="button" value="缩小" />
<input id="Button3" type="button" value="上移" />
<input id="Button4" type="button" value="下移" />
<input id="Button5" type="button" value="左移" />
<input id="Button6" type="button" value="右移" />
<input id="Button7" type="button" value="全屏" />
<input id="Button8" type="button" value="拖动" />
<input id="Button9" type="button" value="鹰眼" />
<input id="Button10" type="button" value="图属查询" />
<input id="BaoGuan" type="button" value="爆管分析" />
<input id="dian" type="button" value="点" />
<input id="Multi_Point" type="button" value="多点" />
<input id="Linee" type="button" value="线" />
<input id="Polylinee" type="button" value="线2" />
<input id="Polygonn" type="button" value="面" />
<button data-dojo-type="dijit/form/Button">Point</button>
<button data-dojo-type="dijit/form/Button">Multi Point</button>
<button data-dojo-type="dijit/form/Button">Line</button>
<button data-dojo-type="dijit/form/Button">Polyline</button>
<button data-dojo-type="dijit/form/Button">Polygon</button>
<button data-dojo-type="dijit/form/Button">Freehand Polyline</button>
<button data-dojo-type="dijit/form/Button">Freehand Polygon</button>
</div>
</div>
</div>
<div style=" width:1350px;height:467px;border:1px solid #0000FF;">
<div id="Menu"style="width:200px;height:467px;float:left;>
<ul id="MenuUl">
<li class="level1">
<div onClick="menuClick(this)" class="level1Style"><img src="style/images/MenuIcon/FUNC20001.gif" class="Icon" />数据列表</div>
<div>111111</div>
<div>222222</div>
</li>
</ul>
</div>
<div style="width:1150px;height:467px;float:left;">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 实例讲解多个js毫秒倒计时同时进行效果
- 基于JavaScript代码实现随机漂浮图片广告
- JavaScript实现下拉菜单的显示和隐藏
- 浅谈javascript 函数表达式和函数声明的区别
- JS常见问题之为什么点击弹出的i总是最后一个
- JavaScript类型系统之正则表达式
- bzoj1030【JSOI2007】文本生成器
- javascript简单比较日期大小的方法
- javascript设置和获取cookie的方法实例详解
- JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行）
- 基于javascript实现图片预加载
- this,this,再次讨论javascript中的this,超全面(经典)
- 基于javascript实现图片懒加载
- 深入浅析JavaScript系列（13）：This? Yes,this!
- javascript实现简单的全选和反选功能
- JavaScript实现简单的tab选项卡切换
- 学习笔记--json
- js中如何传递this对象
- javascript时间戳和日期字符串相互转换
- Javascript try catch finally