大二第二学期周学习进度总结（五）

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/heiyang/p/11056710.html

文章标签：

#javascript #ViewUI

本文介绍了在结对开发过程中遇到的问题及解决方案，由于石家庄地铁数据的缺失，采用手动定位站点经纬度并使用OpenLayers库绘制地铁线路图。文章详细记录了绘制过程和技术难点。

　　在结对开发的过程中与结对队友沟通上产生了问题，导致两人的工作重心有点不一致，我在地铁结对开发中并没有起到太大的作用（还是因为菜）

　　由于百度地图api中还没有未完成的石家庄地铁，所以我们没有办法调用，这种情况下，只能通过直接对地图的站点进行经纬度的地位，然后画图来完成这个操作，这个就比较考验艺术细胞了。。。。。

　　学习时间：9小时

　　代码量：四百行

　　博客园：五篇

        <script type="text/javascript">
            //定义地图，对象
            var map, drawControls;
            function init(){
                map = new OpenLayers.Map('map');
                var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
                //创建点图层
                var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
                //创建线图层
                var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
                //给地图添加图层
                map.addLayers([wmsLayer, pointLayer, lineLayer]);
                addMarker(60,60);
                //图层选项（有的说这是个图层下拉表，没看见他的效果）
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                //给地图添加鼠标位置信息
                map.addControl(new OpenLayers.Control.MousePosition());
                //创建画图工具
                drawControls = {
                    point: new OpenLayers.Control.DrawFeature(pointLayer,
                        OpenLayers.Handler.Point),
                    line: new OpenLayers.Control.DrawFeature(lineLayer,
                        OpenLayers.Handler.Path)
                };

                for(var key in drawControls) {
                    //将画图工具加入到map中
                    map.addControl(drawControls[key]);
                }
                //设置初始界面
                map.setCenter(new OpenLayers.LonLat(116, 40),2);
                //设置初始
                document.getElementById('noneToggle').checked = true;
            }
            //获取类型
            function toggleControl(element) {
                for(key in drawControls) {
                    var control = drawControls[key];
                    if(element.value == key && element.checked) {
                        control.activate();
                    } else {
                        control.deactivate();
                    }
                }
            }

            function allowPan(element) {
                var stop = !element.checked;
                for(var key in drawControls) {
                    drawControls[key].handler.stopDown = stop;
                    drawControls[key].handler.stopUp = stop;
                }
            }
            
            
            
          //添加标记
            function addMarker(x,y){
              //创建标记
                var markers = new OpenLayers.Layer.Markers("分站");
                var feature = new OpenLayers.Feature(markers,new OpenLayers.LonLat(x,y));
                marker = feature.createMarker();
                markers.addMarker(marker);
                map.addLayer(markers);
            }
        </script>