zoukankan      html  css  js  c++  java
  • Google Map API V3调用arcgis发布的瓦片地图服务

    由于最近项目需要用到CAD制作的地图,但之前一直使用的是用谷歌离线瓦片地图的方式,怎么样把CAD图像地图一样有缩放,移动的功能放到网页显示成了难题,

    原先的谷歌地图的代码难道就不能用了?重新写一套代码得多久呢,得花多少时间精力呢?

    于是开始尝试了N种方法,最后找的可能算是最好的方法可以沿用现有的代码,方法是:首先要用ARCGIS软件,把CAD图转化为mxd文件(当然其中各种困难就不提了,而且转换后的效果不一定能和CAD完全一样),

    最后请教的是学地理信息系统专业的朋友才搞定的。其次把mxd发布成GIS服务,需要生成瓦片文件,如果发布成功访问http://localhost/ArcGIS/rest/services/服务名称/MapServer 会显示相应地图信息,

    最后用下面谷歌地图脚本文件调用相应url

    复制代码
       
            //设置中心位置
            var myCenter = new google.maps.LatLng(34.573380321227, 115.42915725708); 
            function CoordMapType() {
            }
            CoordMapType.prototype.tileSize = new google.maps.Size(256, 256);
            CoordMapType.prototype.maxZoom = 15;
            CoordMapType.prototype.minZoom = 11;
    
        CoordMapType.prototype.getTile </span>= <span style="color: #0000ff;">function</span><span style="color: #000000;"> (coord, zoom, ownerDocument) {
            </span><span style="color: #0000ff;">var</span> img = ownerDocument.createElement("img"<span style="color: #000000;">);
            img.style.width </span>= <span style="color: #0000ff;">this</span>.tileSize.width + "px"<span style="color: #000000;">;
            img.style.height </span>= <span style="color: #0000ff;">this</span>.tileSize.height + "px"<span style="color: #000000;">;
            </span><span style="color: #0000ff;">var</span> strURL = "http://localhost/ArcGIS/rest/services/服务名称/MapServer/tile/" + zoom + "/" + coord.y + "/" +<span style="color: #000000;"> coord.x;
            img.src </span>=<span style="color: #000000;"> strURL;
            </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> img;
        };
    
    
        CoordMapType.prototype.name </span>= "Tile #s"<span style="color: #000000;">;
        CoordMapType.prototype.alt </span>= "Tile Coordinate Map Type"<span style="color: #000000;">;
    
        </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> GetCoordinateMapType() {
            </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">new</span><span style="color: #000000;"> CoordMapType();
        }
    
        </span><span style="color: #008000;">//</span><span style="color: #008000;">初始化地图</span>
        <span style="color: #0000ff;">function</span><span style="color: #000000;"> initialize() {
            </span><span style="color: #0000ff;">var</span> mapOptions =<span style="color: #000000;"> {
                zoom: </span>11<span style="color: #000000;">,
                center: myCenter,
                mapTypeId: </span>"coordinate"<span style="color: #000000;">
            };
            Variable.map </span>= <span style="color: #0000ff;">new</span> google.maps.Map(document.getElementById("map_canvas"<span style="color: #000000;">), mapOptions);
            Variable.map.mapTypes.set(</span>'coordinate'<span style="color: #000000;">, GetCoordinateMapType());
        }<br><br>      //html代码<br> <br></span>       &lt;div id="map_canvas"&gt;&lt;/div&gt;</pre>
    
     
    复制代码
  • 相关阅读:
    hdu 4002 Find the maximum
    hdu 2837 坑题。
    hdu 3123
    zoj Treasure Hunt IV
    hdu 2053 Switch Game 水题一枚,鉴定完毕
    poj 1430 Binary Stirling Numbers
    hdu 3037 Saving Beans
    hdu 3944 dp?
    南阳oj 求N!的二进制表示最低位的1的位置(从右向左数)。
    fzu 2171 防守阵地 II
  • 原文地址:https://www.cnblogs.com/jpfss/p/7488556.html
Copyright © 2011-2022 走看看