openlayers

openLayers2 画图标

by giser · 2019-04-03

openLayers2 画图标
介绍:这里主要是实现可以手动在地图上添加图标的方法.画出来的图标可以点击弹出提示信息.
直接上代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建一个简单的电子地图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <!-- 加载OpenLayers类库 -->
    <script src="../ol2/OpenLayers.js"></script>
    <style type="text/css">
        html,body{width: 100%; height: 100%; margin: 0; padding: 0;}
    </style>
    <!-- 关键代码在这里了 -->
    <script type="text/javascript">
        var map;
        var markers ;
        var drawPoint,pointLayer;

        function init(){

            // 使用指定的文档元素创建地图
             map = new OpenLayers.Map("map");
            // 创建一个OpenStreeMap raster layer
            // 把这个地图增加到map中
            var osm = new OpenLayers.Layer.OSM();
            map.addLayer(osm);
            // 设定视图缩放地图程度为最大
            map.zoomToMaxExtent();

            map.addControl(new OpenLayers.Control.LayerSwitcher());//图层控制
            map.addControl(new OpenLayers.Control.MousePosition());//鼠标坐标
        }

        function PD(element) {
             pointLayer = new OpenLayers.Layer.Vector("Point Layer");
            map.addLayer(pointLayer);
             drawPoint = new OpenLayers.Control.DrawFeature(pointLayer,OpenLayers.Handler.Point);
            map.addControl(drawPoint);

            drawPoint.activate();          
          //监听 featureadded 事件，当添加要素时会触发此事件
            drawPoint.events.on({"featureadded": drawCompleted});
        }
        //定义 drawCompleted 函数，触发 click 事件会调用此函数
        //事件参数 eventArgs 包含了绘制的要素 feature 信息 {feature: featureObj}
        function drawCompleted(eventArgs) {
            // 获取传入参数 eventArgs 的几何信息
            var geometry = eventArgs.feature.geometry;
            /* geometry = new OpenLayers.Geometry.Point(129,30);
             geometry.transform(
                    new OpenLayers.Projection('EPSG:4326'), 
                    new OpenLayers.Projection('EPSG:900913')
                ); */


            //alert(geometry.x+","+geometry.y);
            drawPoint.deactivate();
            addmarker(new OpenLayers.LonLat(geometry.x,geometry.y));
            pointLayer.destroy();

        }

        function addmarker(p) {
            markers = new OpenLayers.Layer.Markers( "Markers" );
            map.addLayer(markers);
            size = new OpenLayers.Size(21, 25);
            calculateOffset = function(size) {
                        return new OpenLayers.Pixel(-(size.w/2), -size.h); };
            var icon = new OpenLayers.Icon(
                '../imgs/1.jpg',
                size, null, calculateOffset);
            var make=new OpenLayers.Marker(p, icon)

            markers.addMarker(make);
            //markers.addMarker(new OpenLayers.Marker(p,icon.clone()));

            var popup = new OpenLayers.Popup.FramedCloud("Popup", 
                    p, null,
                    '<a target="_blank" href="http://openlayers.org/">We</a> ' +
                    'could be here.<br>Or elsewhere.', null,
                    true // <-- true if we want a close (X) button, false otherwise
                );
            map.addPopup(popup);
        }

    </script>
</head>
<body onload="init()">
    <div id="tools">
    <button id="PointDraw" onclick="PD()" value="on">画点</button>
    </div>
    <div id="map" style="width: 100%; height: 100%;"></div> ![代码效果图]
    <img src="https://img-blog.csdn.net/20170718160834264?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzgxMjIxNzc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" ></img>

</body>
</html>

转载自：https://blog.csdn.net/qq_38122177/article/details/75307368

相关推荐

Tags: openlayers

You may also like...