二次元同好交流新大陆
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
地理,一个古老的名词,怎么诠释,在你我心中。或许在你的眼里,那是一条河流,而在我的心中,它是行疆土边界,是动物繁衍的分水岭,是鱼鸟的栖息地...它更是弯曲的折线,一堆有序坐标..
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(154)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_095075',
blogTitle:'Openlayers从开发环境到生产环境 - Java&GIS - BlogJava',
blogAbstract:'Openlayers项目开发完成后，需要将系统从开发环境转移到生产环境。开发环境下，Openlayers框架由上百个独立的javascript程序文件组成，通过lib目录中的Openlayers.js动态加载，便于各个功能模块的开发调试。Openlayers是一个非常庞大的Web地图客户端应用框架，提供了很多功能模块，通常在开发过程中不会用到全部模块。将系统中用到的独立javascript程序库组织成一个Openlayers.js文件，可以减少代码冗余，加快加载速度，同时也便于对代码进行压缩和重编码，在一定程度上保护软件产品。Openlayers提供了代码组合和压缩工具，在build目录下，使用Python脚本实现。运行该工具，需要安装Python解释器。build文件夹中提供了三种预设的配置文件，它们是：',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:3,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'地理,一个古老的名词,怎么诠释,在你我心中。或许在你的眼里,那是一条河流,而在我的心中,它是行疆土边界,是动物繁衍的分水岭,是鱼鸟的栖息地...它更是弯曲的折线,一堆有序坐标..',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}1822人阅读
JavaScript（3）
&&&&&&&&大家都知道不管是静态语言还是动态脚本一般都有他们自己的导入方法，比如Java，在一个特定的运行环境中（jar包或是规定的目录结构中）用import关键字来导入非本包中的类，注意这里还有个包的概念，就是说把一组在某些方面相似的类（如一起实现同一个功能、类的性质相同等）组织在一起，互相就不需要再导入了。&&&&&&而JavaScript是在页面里面用script标签引入的，并没有导入的概念，就更没有包的概念了（其实这也造成了名称空间的问题）。最终的效果就是把所有的JavaScript代码都引入到页面里面就对了。在JavaScript被当作一门很重要的web编程语言之前大家编写的JavaScript代码相对较小，一般一两个文件就足够了，有几个文件就用几个标签引入就行。但是随着JavaScript的重要性和实用性被充分发掘后，用JavaScript编写的表现层中间件、Ajax应用、webGIS客户端显示系统等都已经不是一个两个文件能够容纳的了，或者说不是这么简单的目录结构能够解决的。&&&&&&好比Openlayers（一个即将一统天下的webGIS客户端显示系统）这样一个完全由JavaScript编写的系统，它目前的版本的源代码已经有100个左右的js文件，10多个文件目录（当然不是那种压成一个文件的）。我们不可能100多个script标签来把它们全部引入进来，这样既不优雅也难以维护。Openlayers就提供了一种比较好的解决方式，我们马上来分析一下。不过在分析好的之前我们来看一个个人认为比较坏的例子，其实很多早期的JavaScript系统都是使用这种方式。&&&&&&这个比较坏的例子是取自一个知名地图厂商提供的webGIS客户端，不过这个webGIS客户端已经是3年前开发的了，可能他们现在的已经改掉了，仅仅作为一个教材，并没有任何感情色彩。&&&&&&它的做法是这样的：&&&&&&在页面中引入一个名为abc_include.js(化名，呵呵，还是谨慎点好)的文件，在这个文件里面把其他的文件全部导入进来。
&1&2&!--&3//////////////////////////////////////////&4//&&&&&&&&&&&&&&&&&&&&//&5//&&&&&&&&&&&&&&&&&&&&//&6//&&&&包含所有引用的程序包&&&&&&&&//&7//&&&&&&&&&&&&&&&&&&&&//&8//&&&&&&&&&&&&&&&&&&&&//&9//////////////////////////////////////////<SPAN style="COLOR: #<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_1.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_2.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_3.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_4.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_5.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_6.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_7.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_8.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_9.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_10.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_11.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_12.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_13.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_14.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_15.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_16.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_17.js"&&/script&');<SPAN style="COLOR: #document.write('&script&language="javascript"&src="abc_js/abc_18.js"&&/script&');<SPAN style="COLOR: #<SPAN style="COLOR: #//--&
&&&&&&这些代码其实很容易理解，就是把标签用JavaScript的方式写进去，而不是直接写在html代码中，这样确实达到了一些目的，但是出现了一个很严重的问题。在页面中包含的代码其实就是&script&language="javascript"&src="abc_js/abc_1.js"&&/script&这样的script标签，大家会发现这里的路径都是abc_js/，也就是说我调用这个系统的页面必须与abc_js保持在同一目录。同事在开发的时候就犯了这样的错误，把页面没和它放在同一个目录，叫我过去帮忙看看，我怀着对这个地图厂商的崇拜和信任找了半个小时，最后发现居然是这种问题，完全不是一个负责任的厂商写的系统，还是要小BS一下。&&&&&&下面我们再来看看Openlayers是如何处理的，其实Openlayers的基本思想也是这样的，最终也是为了把这些标签都写入进去，但Openlayers完全解决了路径的问题，并且加入了浏览器的兼容，实现的更为优雅。(function() {&&& /**&&&& * Before creating the OpenLayers namespace, check to see if&&&& * OpenLayers.singleFile is true.& This occurs if the&&&& * OpenLayers/SingleFile.js script is included before this one - as is the&&&& * case with single file builds.&&&& */&&& var singleFile = (typeof OpenLayers == "object" && OpenLayers.singleFile);&&& &&& /**&&&& * Namespace: OpenLayers&&&& * The OpenLayers object provides a namespace for all things OpenLayers&&&& */&&& window.OpenLayers = {&&&&&&& &&&&&&& /**&&&&&&&& * Property: _scriptName&&&&&&&& * {String} Relative path of this script.&&&&&&&& */&&&&&&& _scriptName: (!singleFile) ? "lib/OpenLayers.js" : "OpenLayers.js",
&&&&&&& /**&&&&&&&& * Function: _getScriptLocation&&&&&&&& * Return the path to this script.&&&&&&&& *&&&&&&&& * Returns:&&&&&&&& * {String} Path to this script&&&&&&&& */&&&&&&& _getScriptLocation: function () {&&&&&&&&&&& var scriptLocation = "";&&&&&&&&&&& var scriptName = OpenLayers._scriptN&&&&&&&& &&&&&&&&&&& var scripts = document.getElementsByTagName('script');&&&&&&&&&&& for (var i=0, len=scripts. i& i++) {&&&&&&&&&&&&&&& var src = scripts[i].getAttribute('src');&&&&&&&&&&&&&&& if (src) {&&&&&&&&&&&&&&&&&&& var index = src.lastIndexOf(scriptName); &&&&&&&&&&&&&&&&&&& // set path length for src up to a query string&&&&&&&&&&&&&&&&&&& var pathLength = src.lastIndexOf('?');&&&&&&&&&&&&&&&&&&& if (pathLength & 0) {&&&&&&&&&&&&&&&&&&&&&&& pathLength = src.&&&&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&&&&&& // is it found, at the end of the URL?&&&&&&&&&&&&&&&&&&& if ((index & -1) && (index + scriptName.length == pathLength)) {&&&&&&&&&&&&&&&&&&&&&&& scriptLocation = src.slice(0, pathLength - scriptName.length);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&& }&&&&&&&&&&& }&&&&&&&&&&& return scriptL&&&&&&&& }&&& };&&& /**&&&& * OpenLayers.singleFile is a flag indicating this file is being included&&&& * in a Single File Library build of the OpenLayers Library.&&&& * &&&& * When we are *not* part of a SFL build we dynamically include the&&&& * OpenLayers library code.&&&& * &&&& * When we *are* part of a SFL build we do not dynamically include the &&&& * OpenLayers library code as it will be appended at the end of this file.&&&&& */&&& if(!singleFile) {&&&&&&& var jsfiles = new Array(&&&&&&&&&&& "OpenLayers/Util.js",&&&&&&&&&&& "OpenLayers/BaseTypes.js",&&&&&&&&&&& "OpenLayers/BaseTypes/Class.js",&&&&&&&&&&& "OpenLayers/BaseTypes/Bounds.js",&&&&&&&&&&& "OpenLayers/BaseTypes/Element.js",&&&&&&&&&&& "OpenLayers/BaseTypes/LonLat.js",&&&&&&&&&&& "OpenLayers/BaseTypes/Pixel.js",&&&&&&&&&&& "OpenLayers/BaseTypes/Size.js",&&&&&&&&&&& "OpenLayers/Console.js",&&&&&&&&&&& "OpenLayers/Tween.js",&&&&&&&&&&& "Rico/Corner.js",&&&&&&&&&&& "Rico/Color.js",&&&&&&&&&&& "Gears/gears_init.js",&&&&&&&&&&& "OpenLayers/Ajax.js",&&&&&&&&&&& "OpenLayers/Request.js",&&&&&&&&&&& "OpenLayers/Request/XMLHttpRequest.js",&&&&&&&&&&& "OpenLayers/Events.js",&&&&&&&&&&& "OpenLayers/Projection.js",&&&&&&&&&&& "OpenLayers/Map.js",&&&&&&&&&&& "OpenLayers/Layer.js",&&&&&&&&&&& "OpenLayers/Icon.js",&&&&&&&&&&& "OpenLayers/Marker.js",&&&&&&&&&&& "OpenLayers/Marker/Box.js",&&&&&&&&&&& "OpenLayers/Popup.js",&&&&&&&&&&& "OpenLayers/Tile.js",&&&&&&&&&&& "OpenLayers/Tile/Image.js",&&&&&&&&&&& "OpenLayers/Tile/WFS.js",&&&&&&&&&&& "OpenLayers/Layer/Image.js",&&&&&&&&&&& "OpenLayers/Layer/SphericalMercator.js",&&&&&&&&&&& "OpenLayers/Layer/EventPane.js",&&&&&&&&&&& "OpenLayers/Layer/FixedZoomLevels.js",&&&&&&&&&&& "OpenLayers/Layer/Google.js",&&&&&&&&&&& "OpenLayers/Layer/VirtualEarth.js",&&&&&&&&&&& "OpenLayers/Layer/Yahoo.js",&&&&&&&&&&& "OpenLayers/Layer/HTTPRequest.js",&&&&&&&&&&& "OpenLayers/Layer/Grid.js",&&&&&&&&&&& "OpenLayers/Layer/MapGuide.js",&&&&&&&&&&& "OpenLayers/Layer/MapServer.js",&&&&&&&&&&& "OpenLayers/Layer/MapServer/Untiled.js",&&&&&&&&&&& "OpenLayers/Layer/KaMap.js",&&&&&&&&&&& "OpenLayers/Layer/KaMapCache.js",&&&&&&&&&&& "OpenLayers/Layer/MultiMap.js",&&&&&&&&&&& "OpenLayers/Layer/Markers.js",&&&&&&&&&&& "OpenLayers/Layer/Text.js",&&&&&&&&&&& "OpenLayers/Layer/WorldWind.js",&&&&&&&&&&& "OpenLayers/Layer/WMS.js",&&&&&&&&&&& "OpenLayers/Layer/WMS/Untiled.js",&&&&&&&&&&& "OpenLayers/Layer/GeoRSS.js",&&&&&&&&&&& "OpenLayers/Layer/Boxes.js",&&&&&&&&&&& "OpenLayers/Layer/TMS.js",&&&&&&&&&&& "OpenLayers/Layer/TileCache.js",&&&&&&&&&&& "OpenLayers/Popup/Anchored.js",&&&&&&&&&&& "OpenLayers/Popup/AnchoredBubble.js",&&&&&&&&&&& "OpenLayers/Popup/Framed.js",&&&&&&&&&&& "OpenLayers/Popup/FramedCloud.js",&&&&&&&&&&& "OpenLayers/Feature.js",&&&&&&&&&&& "OpenLayers/Feature/Vector.js",&&&&&&&&&&& "OpenLayers/Feature/WFS.js",&&&&&&&&&&& "OpenLayers/Handler.js",&&&&&&&&&&& "OpenLayers/Handler/Click.js",&&&&&&&&&&& "OpenLayers/Handler/Hover.js",&&&&&&&&&&& "OpenLayers/Handler/Point.js",&&&&&&&&&&& "OpenLayers/Handler/Path.js",&&&&&&&&&&& "OpenLayers/Handler/Polygon.js",&&&&&&&&&&& "OpenLayers/Handler/Feature.js",&&&&&&&&&&& "OpenLayers/Handler/Drag.js",&&&&&&&&&&& "OpenLayers/Handler/RegularPolygon.js",&&&&&&&&&&& "OpenLayers/Handler/Box.js",&&&&&&&&&&& "OpenLayers/Handler/MouseWheel.js",&&&&&&&&&&& "OpenLayers/Handler/Keyboard.js",&&&&&&&&&&& "OpenLayers/Control.js",&&&&&&&&&&& "OpenLayers/Control/Attribution.js",&&&&&&&&&&& "OpenLayers/Control/Button.js",&&&&&&&&&&& "OpenLayers/Control/ZoomBox.js",&&&&&&&&&&& "OpenLayers/Control/ZoomToMaxExtent.js",&&&&&&&&&&& "OpenLayers/Control/DragPan.js",&&&&&&&&&&& "OpenLayers/Control/Navigation.js",&&&&&&&&&&& "OpenLayers/Control/MouseDefaults.js",&&&&&&&&&&& "OpenLayers/Control/MousePosition.js",&&&&&&&&&&& "OpenLayers/Control/OverviewMap.js",&&&&&&&&&&& "OpenLayers/Control/KeyboardDefaults.js",&&&&&&&&&&& "OpenLayers/Control/PanZoom.js",&&&&&&&&&&& "OpenLayers/Control/PanZoomBar.js",&&&&&&&&&&& "OpenLayers/Control/ArgParser.js",&&&&&&&&&&& "OpenLayers/Control/Permalink.js",&&&&&&&&&&& "OpenLayers/Control/Scale.js",&&&&&&&&&&& "OpenLayers/Control/ScaleLine.js",&&&&&&&&&&& "OpenLayers/Control/LayerSwitcher.js",&&&&&&&&&&& "OpenLayers/Control/DrawFeature.js",&&&&&&&&&&& "OpenLayers/Control/DragFeature.js",&&&&&&&&&&& "OpenLayers/Control/ModifyFeature.js",&&&&&&&&&&& "OpenLayers/Control/Panel.js",&&&&&&&&&&& "OpenLayers/Control/SelectFeature.js",&&&&&&&&&&& "OpenLayers/Control/NavigationHistory.js",&&&&&&&&&&& "OpenLayers/Control/Measure.js",&&&&&&&&&&& "OpenLayers/Geometry.js",&&&&&&&&&&& "OpenLayers/Geometry/Rectangle.js",&&&&&&&&&&& "OpenLayers/Geometry/Collection.js",&&&&&&&&&&& "OpenLayers/Geometry/Point.js",&&&&&&&&&&& "OpenLayers/Geometry/MultiPoint.js",&&&&&&&&&&& "OpenLayers/Geometry/Curve.js",&&&&&&&&&&& "OpenLayers/Geometry/LineString.js",&&&&&&&&&&& "OpenLayers/Geometry/LinearRing.js",&&&&&&& &&&&&&&&&&& "OpenLayers/Geometry/Polygon.js",&&&&&&&&&&& "OpenLayers/Geometry/MultiLineString.js",&&&&&&&&&&& "OpenLayers/Geometry/MultiPolygon.js",&&&&&&&&&&& "OpenLayers/Geometry/Surface.js",&&&&&&&&&&& "OpenLayers/Renderer.js",&&&&&&&&&&& "OpenLayers/Renderer/Elements.js",&&&&&&&&&&& "OpenLayers/Renderer/SVG.js",&&&&&&&&&&& "OpenLayers/Renderer/Canvas.js",&&&&&&&&&&& "OpenLayers/Renderer/VML.js",&&&&&&&&&&& "OpenLayers/Layer/Vector.js",&&&&&&&&&&& "OpenLayers/Strategy.js",&&&&&&&&&&& "OpenLayers/Strategy/Fixed.js",&&&&&&&&&&& "OpenLayers/Strategy/Cluster.js",&&&&&&&&&&& "OpenLayers/Strategy/Paging.js",&&&&&&&&&&& "OpenLayers/Strategy/BBOX.js",&&&&&&&&&&& "OpenLayers/Protocol.js",&&&&&&&&&&& "OpenLayers/Protocol/HTTP.js",&&&&&&&&&&& "OpenLayers/Protocol/SQL.js",&&&&&&&&&&& "OpenLayers/Protocol/SQL/Gears.js",&&&&&&&&&&& "OpenLayers/Layer/PointTrack.js",&&&&&&&&&&& "OpenLayers/Layer/GML.js",&&&&&&&&&&& "OpenLayers/Style.js",&&&&&&&&&&& "OpenLayers/StyleMap.js",&&&&&&&&&&& "OpenLayers/Rule.js",&&&&&&&&&&& "OpenLayers/Filter.js",&&&&&&&&&&& "OpenLayers/Filter/FeatureId.js",&&&&&&&&&&& "OpenLayers/Filter/Logical.js",&&&&&&&&&&& "OpenLayers/Filter/Comparison.js",&&&&&&&&&&& "OpenLayers/Filter/Spatial.js",&&&&&&&&&&& "OpenLayers/Format.js",&&&&&&&&&&& "OpenLayers/Format/XML.js",&&&&&&&&&&& "OpenLayers/Format/GML.js",&&&&&&&&&&& "OpenLayers/Format/GML/Base.js",&&&&&&&&&&& "OpenLayers/Format/GML/v2.js",&&&&&&&&&&& "OpenLayers/Format/GML/v3.js",&&&&&&&&&&& "OpenLayers/Format/KML.js",&&&&&&&&&&& "OpenLayers/Format/GeoRSS.js",&&&&&&&&&&& "OpenLayers/Format/WFS.js",&&&&&&&&&&& "OpenLayers/Format/WKT.js",&&&&&&&&&&& "OpenLayers/Format/OSM.js",&&&&&&&&&&& "OpenLayers/Format/GPX.js",&&&&&&&&&&& "OpenLayers/Format/SLD.js",&&&&&&&&&&& "OpenLayers/Format/SLD/v1.js",&&&&&&&&&&& "OpenLayers/Format/SLD/v1_0_0.js",&&&&&&&&&&& "OpenLayers/Format/SLD/v1.js",&&&&&&&&&&& "OpenLayers/Format/Filter.js",&&&&&&&&&&& "OpenLayers/Format/Filter/v1.js",&&&&&&&&&&& "OpenLayers/Format/Filter/v1_0_0.js",&&&&&&&&&&& "OpenLayers/Format/Text.js",&&&&&&&&&&& "OpenLayers/Format/JSON.js",&&&&&&&&&&& "OpenLayers/Format/GeoJSON.js",&&&&&&&&&&& "OpenLayers/Format/WMC.js",&&&&&&&&&&& "OpenLayers/Format/WMC/v1.js",&&&&&&&&&&& "OpenLayers/Format/WMC/v1_0_0.js",&&&&&&&&&&& "OpenLayers/Format/WMC/v1_1_0.js",&&&&&&&&&&& "OpenLayers/Layer/WFS.js",&&&&&&&&&&& "OpenLayers/Control/MouseToolbar.js",&&&&&&&&&&& "OpenLayers/Control/NavToolbar.js",&&&&&&&&&&& "OpenLayers/Control/PanPanel.js",&&&&&&&&&&& "OpenLayers/Control/Pan.js",&&&&&&&&&&& "OpenLayers/Control/ZoomIn.js",&&&&&&&&&&& "OpenLayers/Control/ZoomOut.js",&&&&&&&&&&& "OpenLayers/Control/ZoomPanel.js",&&&&&&&&&&& "OpenLayers/Control/EditingToolbar.js",&&&&&&&&&&& "OpenLayers/Lang.js",&&&&&&&&&&& "OpenLayers/Lang/en.js"&&&&&&& ); // etc.
&&&&&&& var agent = navigator.userA&&&&&&& var docWrite = (agent.match("MSIE") || agent.match("Safari"));&&&&&&& if(docWrite) {&&&&&&&&&&& var allScriptTags = new Array(jsfiles.length);&&&&&&& }&&&&&&& var host = OpenLayers._getScriptLocation() + "lib/";&&& &&&&&&& for (var i=0, len=jsfiles. i& i++) {&&&&&&&&&&& if (docWrite) {&&&&&&&&&&&&&&& allScriptTags[i] = "&script src='" + host + jsfiles[i] +&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& "'&&/script&"; &&&&&&&&&&& } else {&&&&&&&&&&&&&&& var s = document.createElement("script");&&&&&&&&&&&&&&& s.src = host + jsfiles[i];&&&&&&&&&&&&&&& var h = document.getElementsByTagName("head").length ? &&&&&&&&&&&&&&&&&&&&&&&&&& document.getElementsByTagName("head")[0] : &&&&&&&&&&&&&&&&&&&&&&&&&& document.&&&&&&&&&&&&&&& h.appendChild(s);&&&&&&&&&&& }&&&&&&& }&&&&&&& if (docWrite) {&&&&&&&&&&& document.write(allScriptTags.join(""));&&&&&&& }&&& }})();
/**&* Constant: VERSION_NUMBER&*/OpenLayers.VERSION_NUMBER="$Revision: 8012 $";
&&&&&&这个文件可以在Openlayers最新的版本中找到，它除了定义了一个名称空间外最重要的作用就是完成了需要引入代码的导入工作。&&&&&&大家都应该不难看懂这些代码到底做了些什么，还是把实现的基本过程说一遍。首先我们会在页面里面包含一个主文件，如&script src="../lib/OpenLayers.js"&&/script&，OpenLayers._getScriptLocation方法首先找到这个标签，取出src属性里面的内容../lib/OpenLayers.js，这个时候根据定义好的_scriptName--lib/OpenLayers.js找出它之前的location目录../，这样不管前面是怎么样的目录，我们只要确定了location目录就可以顺利的导入其他的文件了，也就是说只要知道其他文件与lib/OpenLayers.js的相对位置，我们就可以顺利的导入了。&jsfiles中定义了所有需要导入的文件，然后下面就用一个for循环集体导入，貌似这又是一个什么设计模式，呵呵。确实比X厂商的代码优雅了许多。导入的for循环里面也做了浏览器的兼容，这年头不做好浏览器的兼容哪里敢称真正的js系统。这里又要顺便提请各位同仁们在写稍复杂的JavaScript程序的时候最好多考虑兼容问题，如果你怕麻烦其实建议也更推荐使用象mootools、prototpye等这样的js库。因为只能在IE下跑的程序在今天看来真是逊掉了，并且你也无情的打击了Firefox用户们。&&&&&&其实一切在代码里都明白了，所以推荐大家多看看优秀开源项目的源代码，可以学到很多好东西。
&&&&这篇文章不错，相信能学到好多东西。。。。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：54780次
排名：千里之外
原创：25篇
转载：35篇
(1)(1)(2)(1)(3)(2)(4)(5)(1)(4)(2)(1)(2)(4)(1)(1)(1)(1)(2)(2)(13)(5)(1)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&让OpenLayers添加百度地图(未完版）
让OpenLayers添加百度地图(未完版）
& & &KoalaGIS的在线地图系统，打算采用国内外主要的几个地图服务：google地图、百度地图、OpenStreet Map、天地图。google、百度、openstreet的服务器性能好，速度快，但google由于政策原因，不确定因素太多，Openstreet Map个人感觉配图不怎么好看，添加天地图完全就是为了顾忌下咱们这个GIS专业的脸面，毕竟总要搞点专业的东西吧，虽然他很垃圾，但胜于无！
& & &为此，需要在OpenLayers上扩展一个百度地图图层出来，让其能在Openlayers中显示出来。为了叠加百度地图，首先必须了解其瓦片的组织规则，通过对百度api的js文件解析和网上相关资料的收集，经过程序测试，推论正确，现讲解下其基本的参数，以及编写的KoalaGIS.Layer.WMTS.Baidu图层。
& & &百度地图也是采用的魔卡托投影，个人感觉和google的web 墨卡托投影是一样的，但据网友测试，两者计算结果有点出入，我猜测可能是百度或者google地图有偏移参数的影响吧，该文暂不分析此原因，且该问题本人还没正式测试过，有待考证！
利用百度提供的API进行坐标转换
var projection =new BMap.MercatorProjection();var point = projection.lngLatToPoint(new BMap.Point(116.404, 39.915));得出的结果是5923.77
用Openlayers提供的web墨卡托投影对该经纬度投影得出的结果为：？？？？
百度地图的分辨率问题
对百度地图api的js脚本进行解析，可以看到该函数：
可以看到两个获取分辨率相关的函数如下：
getZoomUnits: function(T) {& & &return Math.pow(2, (18 - T))&&&&//从这里可以看出，百度地图的分辨率几乎就是固定的2的N次幂来计算的},
详细请见该文《百度地图的瓦片参数解析》
百度地图的坐标系统：平面坐标系的原点与经纬度的原点一致，即赤道与0度经线相交的位置
百度地图瓦片编号方式：
百度地图API在展示地图时是将整个地图图片切割成若干图块来显示的，当地图初始化或是地图级别、中心点位置发生变化时，地图API会根据当前像素坐标计算出视野内需要的图块坐标（也叫图块编号），从而加载对应的图块用以显示地图。
百度地图的图块坐标原点与平面坐标一致，从原点向右上方开始编号为0, 0：
如何通过一个坐标和缩放级别计算出百度瓦片所在的行列号呢？
百度瓦片的计算方式很简单，大致如下：
1.计算出坐标的平面坐标位置，瓦片的切割起止点就是0,0
2. 用平面坐标除以分辨率就能得到坐标到起点的像素大小，然后除以每张瓦片的大小取整就是瓦片的行列号了
& &cx = [( ( x - 0 ) / res ) / tileWidth]
　cy = [( ( y - 0 ) / res ) / tileHeight]
& &分辨率前面已经讲过，res = Math.Pow(2, level - 18 );
3.举例来说吧，第18级下，选取经纬度为（116.404, 39.915）的坐标点，该点大致在北京天安门那，经过投影得出其平面位置为（25923.77）采用百度的api计算出来的，用openlayers计算的不是该坐标。利用上面的行列号计算公式推算出瓦片行列号为：5。利用百度地图提供的瓦片服务器地址，根据行列号和缩放级别，可以调用该瓦片地址：
OpenLayers中添加百度地图
遇到的问题：
1，坐标系不一致。
Openlayers中采用的坐标系并非百度地图的数学坐标系
2，行列号的计算方式不一样
百度地图是从左到右，从下到上；但Openlayers和google以及通常的wmts服务都是从左到右，从上到下的！
解决办法：坐标系还是按照Openlayers的思路，所有的方式都不动，只是把他计算瓦片的方式改变就OK了。
KoalaGIS.Layer.WMTS.Baidu.js文件
代码如下：
(function () {window.KoalaGIS = {VERSION: '1.0.0',Author: 'KolaGIS Studio'};
KoalaGIS.Layer = {};
KoalaGIS.Layer.WMTS = {};
KoalaGIS.Layer.WMTS.Baidu = OpenLayers.Class(OpenLayers.Layer.XYZ, {
url: null,
tileOrigin: new OpenLayers.LonLat(-, ),
tileSize: new OpenLayers.Size(256, 256),
type: 'png',
useScales: false,
overrideDPI: false,
initialize: function (options) {this.resolutions = [];for (var i = 0; i & 19; i++) {this.resolutions[i] = Math.pow(2, 18 - i);}
OpenLayers.Layer.XYZ.prototype.initialize.apply(this, arguments);
if (this.resolutions) {this.serverResolutions = this.this.maxExtent = this.getMaxExtentForResolution(this.resolutions[0]);}
// this block steps through translating the values from the server layer JSON // capabilities object into values that we can use. This is also a helpful// reference when configuring this layer directly.if (this.layerInfo) {// alias the objectvar info = this.layerI
// build our extentsvar startingTileExtent = new OpenLayers.Bounds(info.fullExtent.xmin,info.fullExtent.ymin,info.fullExtent.xmax,info.fullExtent.ymax);
// set our projection based on the given spatial reference.// esri uses slightly different IDs, so this may not be comprehensivethis.projection = 'EPSG:' + info.spatialReference.this.sphericalMercator = (info.spatialReference.wkid == 102100);
// convert esri units into openlayers units (basic feet or meters only)this.units = (info.units == "esriFeet") ? 'ft' : 'm';
// optional extended section based on whether or not the server returned// specific tile informationif (!!info.tileInfo) {// either set the tiles based on rows/columns, or specific width/heightthis.tileSize = new OpenLayers.Size(info.tileInfo.width || info.tileInfo.cols,info.tileInfo.height || info.tileInfo.rows);
// this must be set when manually configuring this layerthis.tileOrigin = new OpenLayers.LonLat(info.tileInfo.origin.x,info.tileInfo.origin.y);
var upperLeft = new OpenLayers.Geometry.Point(startingTileExtent.left,startingTileExtent.top);
var bottomRight = new OpenLayers.Geometry.Point(startingTileExtent.right,startingTileExtent.bottom);
if (this.useScales) {this.scales = [];} else {this.resolutions = [];}
this.lods = [];for (var key in info.tileInfo.lods) {if (info.tileInfo.lods.hasOwnProperty(key)) {var lod = info.tileInfo.lods[key];if (this.useScales) {this.scales.push(lod.scale);} else {this.resolutions.push(lod.resolution);}
var start = this.getContainingTileCoords(upperLeft, lod.resolution);lod.startTileCol = start.x;lod.startTileRow = start.y;
var end = this.getContainingTileCoords(bottomRight, lod.resolution);lod.endTileCol = end.x;lod.endTileRow = end.y;this.lods.push(lod);}}
this.maxExtent = this.calculateMaxExtentWithLOD(this.lods[0]);this.serverResolutions = this.if (this.overrideDPI && info.tileInfo.dpi) {// see comment above for 'overrideDPI'OpenLayers.DOTS_PER_INCH = info.tileInfo.}}}},
getContainingTileCoords: function (point, res) {// return new OpenLayers.Pixel(// Math.max(Math.floor((point.x - this.tileOrigin.lon) / (this.tileSize.w * res)), 0),// Math.max(Math.floor((this.tileOrigin.lat - point.y) / (this.tileSize.h * res)), 0)// );
return new OpenLayers.Pixel(Math.floor((point.x - this.tileOrigin.lon) / (this.tileSize.w * res)),Math.floor((point.y - this.tileOrigin.lat) / (this.tileSize.h * res)));},
calculateMaxExtentWithLOD: function (lod) {// the max extent we're provided with just overlaps some tiles// our real extent is the bounds of all the tiles we touch
var numTileCols = (lod.endTileCol - lod.startTileCol) + 1;var numTileRows = (lod.endTileRow - lod.startTileRow) + 1;
var minX = this.tileOrigin.lon + (lod.startTileCol * this.tileSize.w * lod.resolution);var maxX = minX + (numTileCols * this.tileSize.w * lod.resolution);
var maxY = this.tileOrigin.lat - (lod.startTileRow * this.tileSize.h * lod.resolution);var minY = maxY - (numTileRows * this.tileSize.h * lod.resolution);return new OpenLayers.Bounds(minX, minY, maxX, maxY);},
calculateMaxExtentWithExtent: function (extent, res) {var upperLeft = new OpenLayers.Geometry.Point(extent.left, extent.top);var bottomRight = new OpenLayers.Geometry.Point(extent.right, extent.bottom);var start = this.getContainingTileCoords(upperLeft, res);var end = this.getContainingTileCoords(bottomRight, res);var lod = {resolution: res,startTileCol: start.x,startTileRow: start.y,endTileCol: end.x,endTileRow: end.y};return this.calculateMaxExtentWithLOD(lod);},
getUpperLeftTileCoord: function (res) {var upperLeft = new OpenLayers.Geometry.Point(this.maxExtent.left,this.maxExtent.top);return this.getContainingTileCoords(upperLeft, res);},
getLowerRightTileCoord: function (res) {var bottomRight = new OpenLayers.Geometry.Point(this.maxExtent.right,this.maxExtent.bottom);return this.getContainingTileCoords(bottomRight, res);},
getMaxExtentForResolution: function (res) {var start = this.getUpperLeftTileCoord(res);var end = this.getLowerRightTileCoord(res);
var numTileCols = (end.x - start.x) + 1;
//var numTileRows = (end.y - start.y) + 1;
var numTileRows = (start.y - end.y) + 1;
var minX = this.tileOrigin.lon + (start.x * this.tileSize.w * res);var maxX = minX + (numTileCols * this.tileSize.w * res);
//var maxY = this.tileOrigin.lat - (start.y * this.tileSize.h * res);var maxY = this.tileOrigin.lat + (start.y * this.tileSize.h * res);var minY = maxY - (numTileRows * this.tileSize.h * res);return new OpenLayers.Bounds(minX, minY, maxX, maxY);},
clone: function (obj) {if (obj == null) {obj = new OpenLayers.Layer.ArcGISCache(this.name, this.url, this.options);}return OpenLayers.Layer.XYZ.prototype.clone.apply(this, [obj]);},
getMaxExtent: function () {var resolution = this.map.getResolution();return this.maxExtent = this.getMaxExtentForResolution(resolution);},
getTileOrigin: function () {//var extent = this.getMaxExtent();return new OpenLayers.LonLat(extent.left, extent.bottom);},
getURL: function (bounds) {//
var z = this.map.getZoom();
var res = this.getResolution();
// z = 18 -
// var res = Math.pow(2, z - 18);
// tile centervar originTileX = (this.tileOrigin.lon + (res * this.tileSize.w / 2));// var originTileY = (this.tileOrigin.lat - (res * this.tileSize.h / 2));
var originTileY = (this.tileOrigin.lat + (res * this.tileSize.h / 2));
originTileX = 0;originTileY = 0;
var center = bounds.getCenterLonLat();//center.lat = ;//center.lon = ;var point = { x: center.lon, y: center.lat };
// var x = (Math.round(Math.abs((center.lon - originTileX) / (res * this.tileSize.w))));// //var y = (Math.round(Math.abs((originTileY - center.lat) / (res * this.tileSize.h))));// var y = (Math.round(Math.abs((center.lat - originTileY) / (res * this.tileSize.h))));
var x = (Math.round((center.lon - originTileX) / (res * this.tileSize.w)));//var y = (Math.round(Math.abs((originTileY - center.lat) / (res * this.tileSize.h))));var y = (Math.round((center.lat - originTileY) / (res * this.tileSize.h)));
// x = Math.round(center.lon * 1 / this.tileSize.w);// y = Math.round(center.lat * 1 / this.tileSize.h);
//var x = Math.floor(Math.abs((center.lon) * res / this.tileSize.w));//var y = (Math.round(Math.abs((originTileY - center.lat) / (res * this.tileSize.h))));//var y = Math.floor(Math.abs((center.lat ) * res / this.tileSize.h));
//x = Math.round(Math.abs(x) / 256 );// y = Math.round(Math.abs(y) / 256 );
// this prevents us from getting pink tiles (non-existant tiles)if (this.lods) {var lod = this.lods[this.map.getZoom()];if ((x & lod.startTileCol || x & lod.endTileCol)|| (y & lod.startTileRow || y & lod.endTileRow)) {}}else {var start = this.getUpperLeftTileCoord(res);var end = this.getLowerRightTileCoord(res);// if ((x & start.x || x &= end.x)// || (y & start.y || y &= end.y)) {//// }
if ((x & start.x || x &= end.x)|| (y &= start.y || y & end.y)) {//}}
// Construct the url stringvar url = this.var s = '' + x + y +
if (OpenLayers.Util.isArray(url)) {url = this.selectUrl(s, url);}
// Accessing tiles through ArcGIS Server uses a different path// structure than direct access via the folder structure.if (this.useArcGISServer) {// AGS MapServers have pretty url access to tilesurl = url + '/tile/z/{y}/{x}';&}&else&{&//&The&tile&images&are&stored&using&hex&values&on&disk.&//x&=&'C'&+&this.zeroPad(x,&8,&16);&//&y&=&'R'&+&this.zeroPad(y,&8,&16);&//&z&=&'L'&+&this.zeroPad(z,&2,&16);&//&url&=&url&+&'/{z}/y/{x}.' + this.
var x_str = 'x′;varystr=′{y}';if (x & 0)x_str = 'Mx′;if(y&0)ystr=′M{y}';url = url + '/u=x=' + x_str + ';y=' + y_str + ';z=${z};v=011;type=web&fm=44';}
// Write the values into our formatted urlurl = OpenLayers.String.format(url, { 'x': Math.abs(x), 'y': Math.abs(y), 'z': z });
zeroPad: function (num, len, radix) {var str = num.toString(radix || 10);while (str.length & len) {str = "0" +}},
CLASS_NAME: 'KoalaGIS.Layer.WMTS.Baidu'
参考资料：
2.一撇一捺的博客&
发表评论：
TA的最新馆藏[转]&}