`
jiava9900
  • 浏览: 86595 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论
阅读更多

    //全局变量
var map,EPSG4326,EPSG900913,lineFeature_map,vectorLayer_map,markers_map;
function init(){
var lonLat= new OpenLayers.LonLat( 121.123, 38.9);
//很重要因为谷歌用得图层投影不一样,所以要统一图层 全要转成该种投影
var XY = lonLat.clone().transform( EPSG4326, EPSG900913 );

   var options = {
                controls: [],
                maxResolution: "auto",
                projection: EPSG900913,
               // displayProjection: EPSG4326,
                munZoomLevels: 5,
                units: "m",
                maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                                 20037508,20037508.34)
            };
//加载地图
            map= new OpenLayers.Map('trackInfoMap', options);
            var gphy = new OpenLayers.Layer.Google(
                "Google Physical",
                { type: G_PHYSICAL_MAP ,numZoomLevels: 20,'sphericalMercator':true,}
            );
            var gmap = new OpenLayers.Layer.Google(
                "Google Streets", // the default
                {numZoomLevels: 20 ,'sphericalMercator':true,}
            );
            var ghyb = new OpenLayers.Layer.Google(
                "Google Hybrid",
                { type: G_HYBRID_MAP, numZoomLevels: 20 ,'sphericalMercator':true,}
            );
            var gsat = new OpenLayers.Layer.Google(
                "Google Satellite",
                { type: G_SATELLITE_MAP, numZoomLevels: 20,'sphericalMercator':true, }
            );
vectorLayer_map = new OpenLayers.Layer.Vector("Vector Layer",
{ styleMap: new OpenLayers.StyleMap(featureStyle) });
markers_map = new OpenLayers.Layer.Markers("marker");
map.addLayer(vectorLayer_map);
map.addLayer(markers_map);
var style_green = {
                strokeColor: "#339933",
                strokeOpacity: 1,
                strokeWidth: 3,
                pointRadius: 6,
                pointerEvents: "visiblePainted"
            };
          
            lineFeature_map = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.LineString(XY.lon, XY.lat), null, style_green);
           vectorLayer_map.addFeatures([lineFeature_map]);
//添加图层
           map.addLayers([gmap,gphy ,ghyb ,gsat ]);
//设置中心点坐标及放大倍数
           map.setCenter(XY,9);
           fn_Line();
//移除下边的logo 看着有使用说明啥的 确实不舒服
            $("div").remove(".olLayerGoogleCopyright");
            $("div").remove(".olLayerGooglePoweredBy&gmnoprint");
//其实还有很多东西没写  第一写博客 ,也是第一次用这个写,写着很不舒服 ,因为我也//不会弄.还有好多的 控制条啥的  要根据自己需要自己加吧,就写到这吧。opanlayers 确实很强大
   }
//画图函数
function fn_Line() {
var px,py;
       if (x < 20) {
         px = Math.random() * (122 - 121 + 0.001) + 121;
         py = Math.random() * (30 - 29 + 0.001) + 38;
         var lonLat = new OpenLayers.LonLat(px, py);
         var lonLat_ = lonLat.clone().transform(EPSG4326, EPSG900913);
         var p1_ = new OpenLayers.Geometry.Point(lonLat_lon, lonLat_lat);
//划线
         lineFeature_map.geometry.addPoint(p1_);
         vectorLayer_map.drawFeature(lineFeature_map);
//加标记
          markers_map.clearMarkers();
          var marker = new OpenLayers.Marker(lonLat_);
          markers_map.addMarker(marker);
                x++;
                setTimeout(fn, 1000);
            }
        }
 
0
1
分享到:
评论

相关推荐

    ngeo一个旨在简化基于AngularJS和OpenLayers应用程序开发的JS库

    ngeo提供了一层抽象,使得开发者能更轻松地在AngularJS应用中使用OpenLayers,包括但不限于创建地图、添加图层、设置地图控件等操作。 **3. 主要功能** - **地图创建与配置**:ngeo提供了便捷的方法来初始化地图,...

    Openlayers2扩展markers图层

    OpenLayers 是一个强大的开源JavaScript库,用于在Web浏览器中创建交互式地图应用。它支持多种地图数据源,包括WMS、WFS等,并且能够处理各种地图操作,如缩放、平移等。本篇文章主要关注的是OpenLayers的一个重要...

    openlayers3 调用离线谷歌切片地图 示例

    这个示例专注于使用OpenLayers 3调用离线谷歌切片地图,这是一个非常实用的功能,特别是对于那些无法连接到互联网或者希望在本地环境中运行地图应用的用户。 首先,我们需要了解OpenLayers 3的基本概念。OpenLayers...

    openlayers5加载谷歌地图.zip

    6. 更改URL:由于谷歌地图的API政策,直接使用官方URL可能需要API密钥,所以实际应用时,你可能需要找到一个公开可用的谷歌地图瓦片服务器,或者使用自己的API密钥。 示例代码可能如下: ```javascript // 创建...

    openlayers加载本地离线底图瓦片google数据直接运行即可(亲测)

    本案例的主题是“openlayers加载本地离线底图瓦片google数据直接运行即可”,这意味着我们可以通过OpenLayers加载已经下载好的Google Maps离线瓦片数据。离线地图瓦片是一种将大型地图分割成许多小块图片(通常为256...

    OpenLayers

    OpenLayers支持多种图层类型,如瓦片图层、图像图层、矢量图层等。你还可以通过图层叠加实现不同数据的展示。例如,添加一个WMS图层: ```javascript var wmsLayer = new ol.layer.Tile({ source: new ol.source....

    openlayers中文.rar

    OpenLayers 是一个强大的开源JavaScript库,用于在网页上创建交互式的地图应用。它支持多种地图数据源,包括WMS、WMTS、TMS、GeoJSON等,使得开发者能够轻松地将地理信息集成到Web应用中。这个"openlayers中文.rar...

    openLayers geoserver常见问题

    创建谷歌地图效果,OpenLayers提供了兼容Google Maps的图层类型。 OpenLayers API和类用于画点、线、面,如`OpenLayers.Geometry.Point`, `OpenLayers.Geometry.LineString`, `OpenLayers.Geometry.Polygon`。 ...

    openlayers很多特效demo

    OpenLayers 是一个强大的开源JavaScript库,用于在网页上创建交互式的地图应用。它支持多种地图服务,包括WMS、WMTS等,并且能够处理多种数据格式,如GeoJSON、KML等。"openlayers很多特效demo" 提供了一系列示例,...

    openlayers加载本地切片、高亮显示

    OpenLayers 是一个强大的开源JavaScript库,用于在Web浏览器中创建交互式的地图应用。它支持多种数据源,包括WMS、WFS等,并且能够轻松地处理地图图层、控件、事件等。在这个主题中,我们将深入探讨如何利用...

    vue+openlayers简单示例

    你可以根据需要替换其他地图源,如Google Maps或Bing Maps,或者添加自定义图层。 此外,Vue和OpenLayers结合的好处在于,你可以利用Vue的状态管理(如Vuex)和响应式特性,实现更复杂的功能,如动态加载图层、添加...

    openlayers离线文档

    每个图层都由一个OpenLayers.Layer对象表示,你可以通过指定URL和服务类型来创建图层。例如,WMS图层可以通过`new OpenLayers.Layer.WMS()`构造函数创建。 "控制"(Controls)是OpenLayers提供的一组交互工具,如...

    openlayers加载google微信影像,完整demo,可直接使用浏览器运行

    【标题】"openlayers加载google微信影像,完整demo,可直接使用浏览器运行"涉及的关键知识点主要集中在OpenLayers库以及WebGIS应用上。OpenLayers是一个开源的JavaScript库,它允许开发者在网页上创建交互式的地图...

    openLayers-API中文

    9. **图层叠加(Stacking)**:你可以通过调整图层的Z-index来决定图层的显示顺序,实现图层的叠加效果。 10. **动态渲染(Dynamic Rendering)**:OpenLayers 可以根据地图的视口变化动态请求并渲染地图数据,提高用户...

    openlayers-map

    OpenLayers 是一个开源JavaScript库,专门用于在网页上创建交互式的地图应用。它支持多种地图数据源,包括WMS、WFS、KML等,并且兼容各种浏览器,包括IE、Firefox、Chrome等。OpenLayers的强大之处在于其丰富的功能...

    openlayers

    总之,OpenLayers 是一款强大且灵活的开源地图库,它为开发人员提供了构建交互式地图应用所需的全部工具,无论你是GIS专家还是初学者,都能从中受益。通过熟练掌握OpenLayers API,你可以创造出满足各种需求的地图...

    openLayers-API中文版

    - **集成Google Maps、Bing Maps等**:OpenLayers允许你在其上叠加第三方地图服务,如Google Maps或Bing Maps。 通过学习和实践OpenLayers API中文版,开发者可以创建出功能丰富的地图应用,满足各种业务需求,...

    openlayers项目分析文档

    OpenLayers 是一个强大的开源JavaScript库,专为构建WebGIS应用程序而设计。该项目由MetaCarta公司发起,并遵循BSD许可证发布,允许自由使用和修改。OpenLayers 的最新版本为2.5,它支持多种行业标准,如OpenGIS的...

    openLayers-API中文版.zip

    学习OpenLayers API,你需要理解基本的地图概念,如投影、坐标系统和图层管理。然后,你可以通过阅读API文档来了解如何创建地图对象、添加图层、处理地图事件、以及与其他Web服务集成。通过实践示例代码,你将掌握...

Global site tag (gtag.js) - Google Analytics