`

包含多个图层、缩放条、工具条、鼠标位置、弹出窗口

阅读更多

<style type="text/css">

        #map {

            width: 640px;

            height: 475px;

            border: 1px solid black;

        }

 

        .olControlPanel div {

          display:block;

          position: absolute;

                    top: 0px;

                    left: 190px;

          width:  60px;

          height: 23px;

          margin: 5px;

        }

        .olControlPanel .olControlMouseDefaultsItemActive {

          background-image: url("/openlayers/img/Pan.gif");

        }

        .olControlPanel .olControlMouseDefaultsItemInactive {

          background-image: url("/openlayers/img/PanSelected.gif");

        }

        .olControlPanel .olControlZoomBoxItemInactive {

          width:  60px; 

          height: 23px;

          position: absolute;

                    top: 0px;

                    left: 250px;

          background-image: url("/openlayers/img/ZoomInSelected.gif");

        }

        .olControlPanel .olControlZoomBoxItemActive {

          width:  60px; 

          height: 23px;

          position: absolute;

                    top: 0px;

                    left: 250px;

          background-image: url("/openlayers/img/ZoomIn.gif");

        }

         .olControlPanel .olControlSelectFeatureItemInactive {

          width:  60px; 

          height: 23px;

          position: absolute;

                    top: 0px;

                    left: 310px;

          background-image: url("/openlayers/img/InfoSelected.gif");

        }

        .olControlPanel .olControlSelectFeatureItemActive {

          width:  60px; 

          height: 23px;

          position: absolute;

                    top: 0px;

                    left: 310px;

          background-image: url("/openlayers/img/Info.gif");

        }

    </style>

JS代码,核心部分。

<script src="/openlayers/OpenLayers.js"></script>

    <script type="text/javascript">

        <!--

        //定义全局变量

        var map, layer, selectControl, selectedFeature;

        //关闭弹出窗口的函数

        function onPopupClose(evt) {

            selectControl.unselect(selectedFeature);

        }

        //构造弹出窗口的函数

        function onFeatureSelect(feature) {

            selectedFeature = feature;

            popup = new OpenLayers.Popup.Anchored("chicken",

                                     feature.geometry.getBounds().getCenterLonLat(),

                                     new OpenLayers.Size(250,75),

                                     "<div style='font-size:.8em'>" + feature.attributes['cq:LNAME'] +"</div>",

                                     null, true, onPopupClose);

            feature.popup = popup;

            map.addPopup(popup);

        }

        //销毁弹出窗口的函数

        function onFeatureUnselect(feature) {

            map.removePopup(feature.popup);

            feature.popup.destroy();

            feature.popup = null;

        }

        //地图和页面加载函数

        function init(){

            //设置地图缩放范围和缩放等级,0级比例尺最小

            map = new OpenLayers.Map( $('map'), {  maxScale: 500, minScale: 500000, numZoomLevels: 5 });

            //加载行政区图层,WMS栅格图像

            layer = new OpenLayers.Layer.WMS( "District",

                    "http://192.98.151.17:8081/geoserver/wms", {layers: 'cq:GMAP_DISTRICT'} );

            map.addLayer(layer);

            //加载水系图层,WMS栅格图像

            layer = new OpenLayers.Layer.WMS( "Water",

                    "http://192.98.151.17:8081/geoserver/wms", {layers: 'cq:GMAP_LAKE', 'transparent': true, format: 'image/png' } );

            map.addLayer(layer);

            //加载单位图层,WFS矢量数据,由openlayers在客户端绘制,注意:数量太多会导致速度缓慢

            layer = new OpenLayers.Layer.WFS( "Unit",

                    "http://192.98.151.17:8081/geoserver/wfs", {typename: 'cq:GPOI_GOV'},

               { 

                      typename: 'unit',

                      featureNS: 'http://www.openplans.org/cq',

                      extractAttributes: true,

                      maxfeatures: 10,

                      textAttrToDisplay: 'lname'

               } );

            map.addLayer(layer);

            //在地图上添加按钮和工具条

            zb = new OpenLayers.Control.ZoomBox();

            var panel = new OpenLayers.Control.Panel({defaultControl: zb});

            selectControl = new OpenLayers.Control.SelectFeature(layer, {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect, hover: true});

            panel.addControls([

                new OpenLayers.Control.MouseDefaults(), zb, selectControl

            ]);

            map.addControl(panel);

          

            map.addControl(new OpenLayers.Control.PanZoomBar({zoomWorldIcon:false}));

            map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));

            map.addControl(new OpenLayers.Control.MousePosition());

            //设置初始地图的中心坐标和缩放等级

            map.setCenter(new OpenLayers.LonLat(106.5, 29.5), 3);

           

        }

        // -->

    </script>

HTML代码

<body onload="init()">

    <h1>OpenLayers Test</h1>

    <div id="panel"></div>

    <div id="map"></div>

    <textarea style="display:none" id="serialize" cols="96" rows="10"/>

  </body>

分享到:
评论

相关推荐

    百度地图api实现部分功能,根据多个坐标连成轨迹、坐标拾取、实现多个标注点并带信息窗口

    在本文中,我们将深入探讨如何使用百度地图API来实现一系列关键功能,包括连接多个坐标以形成轨迹、坐标拾取、以及创建带有信息窗口的多个标注点。这些功能在Web应用开发、JavaScript工具包、企业应用以及GIS/地图/...

    七个命令让你成为cad高手.doc

    * 窗口缩放:单击窗口缩放 ,按下鼠标左键拖动框选需要缩放的区域。 * 缩放到上一次:单击 ,视图将恢复到上一个缩放的视图。 * 范围缩放:单击 ,系统将所有图形全部显示在屏幕上,并最大限度充满整个屏幕。 这七...

    arcgis工具

    方法一.carvert to Ananotation ,方法二.Draw工具条 方法三.从其他地方转换注记图层 14. 查看特定区域范围内的某种地物分布情况 Selection / select by location 15. 如何用面生成中线 先把数据转成coverage格式...

    JavaWebADF92_SP1_JavaScriptObjectModel

    6. **弹出窗口**: - 使用 `EsriWindowManager` 来管理应用程序中的多个窗口,例如用于显示地图元素详细信息的弹出框。 - 创建自定义的 `EsriWindow` 类来实现具体的功能。 7. **地图操作**: - 实现地图操作时...

    Pscs5认证试题.doc

    7. 删除当前图层的方法包括将图层拖至垃圾桶图标、在图层调板的弹出菜单中选择删除图层,但不能直接按Delete或Esc键删除。 8. PDF(Portable Document Format)格式可以通过Acrobat Reader在不同平台上浏览文件,而...

    ArcGIS API for JavaScript v3.29 API & SDK 库文件与官方文档

    7. **用户界面组件**:提供工具条、控件、弹出窗口等UI组件,帮助用户与地图进行交互,如缩放、平移、图层控制等。 8. **事件处理**:通过监听地图和图层的事件,如点击、鼠标移动等,实现交互逻辑。 9. **3D地图...

    CAD介绍.docx

    3. **工具栏**:提供快速执行命令的图标,包括标准、样式、图层、对象特性、绘图修改等常用工具栏,可通过右击弹出菜单选择其他工具栏。 4. **绘图窗口**:用户的工作区域,所有图形都在这里绘制。默认使用世界坐标...

    openlayers 3 例子中文解析

    - **图层叠加**:将多个图层(如卫星图像、道路图)叠加在一起显示,以增强地图的信息量。 #### 3. 测量工具 - **知识点:** - **测量工具**:用于在地图上测量距离和面积的工具,是GIS应用中的常见功能之一。 #...

    openlayer 实例教程

    - **案例3:交互式地标标注**:实现用户可以在地图上放置标记的功能,并附带弹出窗口显示更多信息。 #### 五、总结 《OpenLayers 2.10 Beginner's Guide》不仅是一本入门指南,更是一部全面覆盖OpenLayers核心功能...

    (完整word版)CAD思考练习题.doc

    14. 鼠标左键通常用于选择和确认,右键用于弹出快捷菜单,滚轮可用于缩放和平移。 【第三章创建和管理图层】 15. 不是所有图层都能被删除,0号图层是默认图层,不可删除。 16. 装载/卸载线型在“格式”-&gt;“线型”中...

    七个命令让你成为cad高手

    - **实时缩放**:使用3D鼠标滚动键或单击缩放工具 - **窗口缩放**:框选需要缩放的区域 - **缩放到上一次**:恢复至上一个缩放视图 - **范围缩放**:显示所有图形并充满整个屏幕 以上这些命令是成为CAD高手的基础,...

    C++ 画图软件

    在C++环境中开发一款画图软件是一项挑战性的任务,它涉及到图形用户界面(GUI)设计、事件处理、图形渲染等多个方面。以下是一些关键的知识点,这些知识点将构成这款C++画图软件的基础: 1. **图形库选择**:C++...

    photoshop 鲜为人知的75个技巧

    6. **状态栏定制**:点击状态栏上的按钮,从弹出菜单选择显示信息,使用快捷键可快速查看文件尺寸、分辨率等。 7. **更改画布颜色**:使用油漆桶工具,按`Shift`点击画布边缘,可以将画布颜色设置为前景色。 8. **...

    arcSDE 入门资料

    - **目标**:通过整合多个控件(MapControl、PageLayoutControl、ToolbarControl、TOCControl),搭建基本的GIS应用界面。 - **步骤**: 1. 新建项目。 2. 添加控件。 3. 控件绑定。 4. 添加工具。 5. 编译...

    Flex开发实例--学习必备

    - 地图可以由多个图层组成,每个图层代表不同的信息。 - 通过控制图层的可见性和顺序,可以灵活地展示地图信息。 #### 7. 获取鼠标当前位置 - Flex的地图组件支持获取鼠标指针所在位置的坐标。 - 这对于实现位置...

    The class diagram of Openlayers

    此类用于管理弹出窗口,通常用于显示特定位置的信息或注释。 ##### 6. `Marker` 此类用于管理标记点,如在地图上放置图标表示特定位置。 ##### 7. `Control` - **`ArgParser`**:参数解析器。 - **`DragPan`**:...

    百度地图API1.4

    版本1.4是在2012年11月发布的,包含了多个新特性及优化,如增加了移动平台地图应用的开发指南、完善了工具类等。 #### 七、问题解答 对于使用过程中遇到的问题,开发者可以通过官方提供的社区(如API贴吧、交流群...

    mapinfo的操作步骤

    - 同样使用“打开”功能,一次选中多个文件,例如本例中的5个相关文件。 - 确认选择后点击“打开”。 2. **显示创建的点**: - 当道路图加载完成后,之前创建的点应该会出现在对应位置上。 - 这样可以更直观地...

Global site tag (gtag.js) - Google Analytics