以下段落是刚刚接触JS API时为了测试用做的记录 比较啰嗦
什么是WebGIS?
WebGIS是一个分散式的地理信息网络服务 通过在互联网上部署GIS 可让地理信息通过OGC(开放地理信息联盟)标准和W3C的界面互相沟通存取 凭借良好的互操作性达成以往需要庞大数据量才能实现的功能
为了帮助用户构建WebGIS应用程序访问ArcGIS Server提供的各类服务 ESRI推出了一系列的API 包括ArcGISServer JavaScript API ArcGIS API forFlex ArcGIS API for MicrosoftSilverlight等
其中ArcGIS Server JavaScript API又包括ArcGISJavaScript API ArcGIS Google地图JavaScript扩展与ArcGIS微软Bing地图JavaScript扩展三大部分 可以帮助用户运用ArcGIS Server提供的服务去搭建轻量级高性能的客户端(浏览器)GIS应用程序
Why JavaScript?
所有主流的浏览器均支持JavaScript 无需安装任何插件
JavaScript是世界最常用的开发语言之一 轻量级的Web开发脚本语言
纯粹的客户端语言(运行在客户端的浏览器内) 包括桌面和移动端
有各种成熟的JavaScript框架: Dojo JQuery ExtJS Prototype YUI……
在线引入API示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>HelloWorld</title>
<!-- 在线引入样式文件 -->
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
<style>
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.esriScalebar {
padding: 20px 20px;
}
#map {
padding: 0;
}
</style>
<script type="text/javascript">
// dojo内置的全局设置对象 控制dojo行为 http://www.cnblogs.com/Icebird/archive/2006/08/02/dojo_study_2.html
var djConfig = {
parseOnLoad: true
};
</script>
<!-- 在线引入API -->
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
<script type="text/javascript">
// 布局小部件
dojo.require("dijit.layout.BorderContainer");
// 面板
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
var map;
// 初始化地图属性
function init() {
// 初始化地图范围
var initExtent = new esri.geometry.Extent({
"xmin":-122.46,
"ymin":37.73,
"xmax":-122.36,
"ymax":37.77,
// 空间参考系统wkid
"spatialReference":{
"wkid":4326
}
});
// 地图对象
map = new esri.Map("map",{
// 投影坐标系转经纬度地理坐标系
extent:esri.geometry.geographicToWebMercator(initExtent)
});
// 切片地图服务(REST服务)
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(basemap);
// 地图加载完成方法绑定范围重置方法
dojo.connect(map, 'onLoad', function(theMap) {
dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
});
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center"
style="border: 1px solid #000; padding: 0;">
</div>
</div>
</body>
</html>
离线引入API方法:
1. 下载ArcGIS API for JavaScript3.1离线包 包括Library与SDK两部分 http://support.esrichina.com.cn/2011/0223/960.html
2. 解压离线包 将文件夹arcgis_js_v31_skd与文件夹arcgis_js_v31_api内的两个arcgis_js_api文件夹合并
3. 在MyEclipse中创建Web Project 将arcgis_js_api文件夹放到Web root folder下 默认路径为WebRoot/arcgis_js_api
4. 在EditPlus中找到WebRoot下的arcgis_js_api文件夹 依次打开目录arcgis_js_api/library/3.1/
5. 目录jsapi上右键选择”在目录中查找” 弹出的查找框中输入[HOSTNAME_AND_PATH_TO_JSAPI]勾选”包含子文件夹”后开始查找
查找结果(离线包版本不同查找结果也不同):
“*\arcgis_js_api\library\3.1\jsapi\init.js”*
“*\arcgis_js_api\library\3.1\jsapi\js\dojo\dojo\dojo.js”*
双击查找结果显示文件内容 在工具栏”搜索”选项中找到”替换”功能
查找输入: "[HOSTNAME_AND_PATH_TO_JSAPI]
替换输入: djConfig.jsModulePath +"/arcgis_js_api/library/3.1/jsapi/
当前文件替换完成并保存后双击下一行查找结果按同样方法进行替换 直到在jsapi目录中查找不到[HOSTNAME_AND_PATH_TO_JSAPI]
6. 目录jsapicompact上右键选择”在目录中查找” 弹出的查找框中输入[HOSTNAME_AND_PATH_TO_JSAPI]勾选”包含子文件夹”后开始查找
查找结果(离线包版本不同查找结果也不同):
“*\arcgis_js_api\library\3.1\jsapicompact\init.js”*
“*\arcgis_js_api\library\3.1\jsapicompact\js\dojo\dojo\dojo.js”*
双击查找结果显示文件内容 在工具栏”搜索”选项中找到”替换”功能
查找输入: "[HOSTNAME_AND_PATH_TO_JSAPI]
替换输入: djConfig.jsModulePath +"/arcgis_js_api/library/3.1/jsapicompact/
当前文件替换完成并保存后双击下一行查找结果按同样方法进行替换 直到在jsapicompact目录中查找不到[HOSTNAME_AND_PATH_TO_JSAPI]
7. 刷新项目 打开WebLogic的Configuration Wizard模块进行工程部署
8. WebRoot下创建DEMO.html编写测试代码(默认端口7007):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>DEMO</title>
<link rel="stylesheet" type="text/css" href="http://localhost:7007/WebRoot/arcgis_js_api/library/3.1/jsapi/js/dojo/dijit/themes/tundra/tundra.css">
<style>
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.esriScalebar {
padding: 20px 20px;
}
#map {
padding: 0;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true,
jsModulePath: "localhost:7007/WebRoot/"
};
</script>
<script type="text/javascript" src="http://localhost:7007/WebRoot/arcgis_js_api/library/3.1/jsapi/index.jsp"></script>
<script type="text/javascript">
// 布局小部件
dojo.require("dijit.layout.BorderContainer");
// 面板
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
var map;
// 初始化地图属性
function init() {
// 初始化地图范围
var initExtent = new esri.geometry.Extent({
"xmin":-122.46,
"ymin":37.73,
"xmax":-122.36,
"ymax":37.77,
// 空间参考系统wkid
"spatialReference":{
"wkid":4326
}
});
// 地图对象
map = new esri.Map("map",{
// 投影坐标系转经纬度地理坐标系
extent:esri.geometry.geographicToWebMercator(initExtent)
});
// 切片地图服务(REST服务)
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(basemap);
// 地图加载完成方法绑定范围重置方法
dojo.connect(map, 'onLoad', function(theMap) {
dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
});
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center"
style="border: 1px solid #000; padding: 0;">
</div>
</div>
</body>
</html>
打开浏览器输入: http://localhost:7007/WebRoot/DEMO.html查看结果