成都网站建设那家好,wordpress文章底部删除,下载百度语音导航地图安装,网站建设与维护1997年深入浅出 Javascript API#xff08;二#xff09;--地图显示与基本操作 地图显示与基本操作#xff08;放大、缩小、移动、坐标显示#xff09;是JavascriptAPI的基本功能#xff0c;也是一个WebGIS应用的基本内容#xff0c;Javascript提供了非常便捷的开发方法#x…深入浅出 Javascript API二--地图显示与基本操作 地图显示与基本操作放大、缩小、移动、坐标显示是JavascriptAPI的基本功能也是一个WebGIS应用的基本内容Javascript提供了非常便捷的开发方法当然在线浏览需要Ags服务器支持如果自己电脑上没有配置Server服务可以使用ArcGIS Online在线服务。 内容目录1.Cache和非Cache地图展示2.地图基本操作如放大、缩小、移动并和鼠标键盘按键关联3.客户端显示鼠标当前地理位置 直接使用在线地图查看最终效果http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/Map/AddMapShowXYCoords.html 使用过Dojo的开发人员应该很熟悉整个页面结构1.使用dojo提供的样式表style typetext/css import http://serverapi.arcgisonline.com/jsapi/arcgis/1/js/dojo/dijit/themes/tundra/tundra.css;/style2.引用脚本文件script typetext/javascript srchttp://serverapi.arcgisonline.com/jsapi/arcgis/?v1/script 这里可能会有一个疑问为什么是这样的目录结构里面包含了dojo和javascriptapi所需要的js库吗其实部署javascriptapi时针对不同类型服务器端代码Java、.Net、php会有不同的Default页面以.Net为例Default.ashx引用了三个文件context.Response.WriteFile(context.Server.MapPath(jsesriesri.js));context.Response.WriteFile(context.Server.MapPath(jsdojodojodojo.xd.js));context.Response.WriteFile(context.Server.MapPath(jsesrijsapi.js));将该页面设为起始页后访问http://ip/js/arcgis时会直接将这三个js文件合并下载大概300多KB。3.接下来就要对页面中所添加的地图元素与功能进行定制同样是在脚本中完成使用javascript apiscript typetext/javascript dojo.require(esri.map); var myMap, myTiledMapServiceLayer; function init() { myMap new esri.Map(mapDiv); myTiledMapServiceLayer new esri.layers.ArcGISTiledMapServiceLayer(http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer); myMap.addLayer(myTiledMapServiceLayer); } dojo.addOnLoad(init);/script dojo.require引入所需的包其中的esri.Map类实现了图层、Graphics、消息窗口查询属性、其他导航控制的方法这里在指定的div中创建了一个地图。esri.layers.ArcGISTiledMapServiceLayer的作用是获取REST API所提供的cache地图服务这是一个在线服务REST所能提供的其他服务可以查看RESTAPI文档。esri.layers.ArcGISTiledMapServiceLayer继承于esri.layers.ArcGISMapServiceLayer该父类下还有另外一个子类ArcGISDynamicMapServiceLayer用于获取非cache地图服务。 最后通过esri.Map的addLayer方法将该服务中的图层添加到当前地图中显示。 dojo.addOnLoad(init)等价于body οnlοadinit页面加载的时候将执行init()脚本。4.页面body区域body div idmapDiv classtundra stylewidth:900px; height:600px; border:1px solid #000;/div h4Work flow:/h4 ul liCreate a map./li liAdd an ArcGISTiledMapServiceLayer./li /ul/body 最终地图将在mapDiv区域绘出。5.放大缩小平移 esri.Map类包含地图放大缩小平移等基本功能的实现可以将这些操作和业务应用绑定。通过esri.Map构造方法生成的地图对象实际已经包含一些基础操作的快捷方式如键盘方向键上下左右完成地图上下左右的固定单位移动鼠标滚轮实现地图放大缩小shift单击为居中shift双击为居中放大放大一级-缩小一级。6.动态显示当前鼠标位置的经纬度坐标 动态显示鼠标经纬度坐标大体上有两种方式一是服务器端生成坐标二是客户端生成坐标孰优孰劣都很清楚了服务器生成坐标值会消耗大量服务器资源onMouseMove总是在不停向服务器发送请求这种模式下经常会碰到鼠标移动已经停止了但是状态栏上的坐标信息还在变化这就是服务器计算造成的延时造成的因此对于真正上线的webgis网站更多使用客户端方式通过获取屏幕坐标在投影参考系下换算地理坐标显示在页面。 Javascript API提供了一套API获取地理坐标function showCoordinates(evt) { var mp evt.mapPoint; dojo.byId(info).innerHTML mp.x , mp.y;} mapPoint是地理坐标screenPoint是屏幕坐标。7.通过dojo.connect建立对鼠标事件的监听dojo.connect(map, onMouseMove, showCoordinates);dojo.connect(map, onMouseDrag, showCoordinates); 同时监听鼠标拖拽事件添加到map.onLoad中就可以了当然body区域中要加入显示坐标的divdiv idinfo stylepadding:5px; margin:5px; background-color:#eee;/div 完工显示效果界面很简单但包含了鼠标和键盘的快捷键操作 博客园链接http://www.cnblogs.com/flyingis/archive/2008/07/20/1246963.html 本主题由 flyingis 于 2008-10-16 09:00 设置高亮转载于:https://www.cnblogs.com/liufei88866/archive/2009/07/06/1517617.html
