openlayers简单例子

最新推荐文章于 2024-02-04 17:31:53 发布

zhlx2835

最新推荐文章于 2024-02-04 17:31:53 发布

阅读量5.5k

点赞数

分类专栏： GIS 文章标签： stylesheet layer function html jsp

本文链接：https://blog.youkuaiyun.com/zhlx2835/article/details/6935167

版权

GIS 专栏收录该内容

2 篇文章

订阅专栏

目录结构：

效果图：

代码：

  <title>My JSP 'index.jsp' starting page</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">

  </script>
  <script type="text/javascript">
   function init() {
    var map, layer ,popup ,markers;     //声明变量map、layer；等同于 var map = null; var layer = null;
    var bounds = new OpenLayers.Bounds(
     0,0,1024,768
    );
    var options = {
        controls: [
     new OpenLayers.Control.PanZoomBar({
                   position: new OpenLayers.Pixel(10, 15)
               }),
               new OpenLayers.Control.Navigation(),
               new OpenLayers.Control.LayerSwitcher(),
               new OpenLayers.Control.MousePosition()
        ],
        maxExtent: bounds,
        maxResolution: 0.648194258984375,
        projection: "EPSG:4326",
        units: 'degrees',
        numZoomLevels: 6
    };
           var map,base_layer;
    map = new OpenLayers.Map('map', options);
    base_layer = new OpenLayers.Layer.Image(
         '地图',
         'images/mapcn.jpg',
         bounds,
         new OpenLayers.Size(1024,768)
        );
    map.addLayer(base_layer);
    map.zoomToMaxExtent();

    var tower = new OpenLayers.Layer.Vector("基站图层", {
           styleMap: new OpenLayers.StyleMap({'default':{
      strokeColor: "#000000",
               strokeOpacity: 1,
               strokeWidth: 1,
               fillColor: "#000000",
               fillOpacity: 0.1,
               graphicName:"star",
               pointRadius: 0,
               label : "${id}",
      fontColor: "#000000",
      fontSize: "20px",
      labelAlign:"lb"
      }})
           }//自定义的基站样式,可以删除这个样式，
      );
    map.addLayer(tower);

    //设置图标大小
    var size = new OpenLayers.Size(21,25);
                var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
                //设置图标图片
    var jz = new OpenLayers.Icon('script/img/marker.png',size,offset);

    markers = new OpenLayers.Layer.Markers("分站");
    //设置显示坐标
    var x=550,y=310;
    //图片显示
    feature = new OpenLayers.Feature(markers,new OpenLayers.LonLat(x,y),{'icon': jz});
    marker = feature.createMarker();
    markers.addMarker(marker);
    map.addLayer(markers);
    //文字显示
    var point = new OpenLayers.Geometry.Point(x,y);
    feature = new OpenLayers.Feature.Vector(point);
       feature.attributes.id='测试';
       feature=[feature];
    tower.addFeatures(feature);
    //鼠标悬浮到图标上的事件
    var companyname="开滦煤矿",renshu=502;
    marker.events.register("mouseover", marker, function(evt){
     var html="<b>  "+companyname+"<br>  当前矿井人数："+renshu+"人</b>";
     popup1=new OpenLayers.Popup("popup1",
                        new OpenLayers.LonLat(x,y),
                        new OpenLayers.Size(200,50),
                        html,
                        false);
     popup1.setBackgroundColor("#ffffff");
     popup1.setOpacity(12);
     popup1.setBorder("1px solid #d91f12");
                 map.addPopup(popup1);
    });
    //鼠标移开事件
    marker.events.register("mouseout", marker, function(evt){
     popup1.hide();
    });

   }
</script>