• HappyGIS 正式上线啦~
    • HappyGIS 现在已经支持 Markdown 格式评论~

WebGIS 2-1点绘制

WebGIS gooin 961次浏览 0个评论

1. 步骤

1) 全局变量

          var map, layer0, pointLayer;

2) 添加地图容器

//            创建地图容器
            map = new OpenLayers.Map('map1',
                    {
                        controls: [
                            new OpenLayers.Control.PanZoomBar(),//缩放面板的工具控件
                            new OpenLayers.Control.LayerSwitcher(), //图层切换控件
                            new OpenLayers.Control.Navigation(),    //此控件处理伴随鼠标事件的地图浏览
                            new OpenLayers.Control.MousePosition()//此控件显示鼠标移动时,所在点的地理坐标
                        ]
                    }
            );


3) 添加第三方地图图层

//            添加图层0
            layer0 = new Zondy.Map.GoogleLayer("Google Map VEC",
                    {
//                        添加GoogleMap的矢量图层
                        layerType: Zondy.Enum.GoogleLayerType.VEC,
//                        设为底图
                        isBaseLayer: true
                    }
            );

4) 将图层添加到地图容器中

          map.addLayers([layer0,layer1,layer2]);

5) 在地图上创建点图层

          pointLayer = new OpenLayers.Layer.Vector("MDZZ");

6) 创建几何点并生成点要素

         //传入坐标创建几何点           
          var pointGeom = new OpenLayers.Geometry.Point(858585,154654) ;
          //生成点要素
          var pointFeature = new OpenLayers.Feature.Vector(pointGeom);

          var pointGeom1 = new OpenLayers.Geometry.Point(9893585,4344069);//创建几何点
          var pointFeature1 = new OpenLayers.Feature.Vector(pointGeom1);//生成点要素

          var pointGeom2 = new OpenLayers.Geometry.Point(9314310, 3717894);//创建几何点
          var pointFeature2 = new OpenLayers.Feature.Vector(pointGeom2);//生成点要素

7) 将点添加到图层中

          pointLayer.addFeatures([pointFeature,pointFeature1,pointFeature2]);//点添加到图层中        

8)

        //将点图层添加到地图上
        map.addLayer(pointLayer);

6) 设置地图显示中心坐标,地图缩放等级

           <!--设置地图显示中心坐标,地图缩放等级-->
           map.setCenter(new OpenLayers.LonLat(0, 0), 2);

注:雷同代码不再做注释,如有不懂请参阅前面发布的文章

2.完整代码


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Google Map</title> <link href="../css/mapDefault.css" type="text/css" rel="stylesheet"/> <script src="../libs/OpenLayers.js" type="text/javascript"></script> <script src="../libs/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="../libs/zdclient.js" type="text/javascript"></script> <script type="text/javascript"> var map, layer0, pointLayer; function init() { // 创建地图容器 map = new OpenLayers.Map('map1', { controls: [ new OpenLayers.Control.PanZoomBar(),//缩放面板的工具控件 new OpenLayers.Control.LayerSwitcher(), //图层切换控件 new OpenLayers.Control.Navigation(), //此控件处理伴随鼠标事件的地图浏览 new OpenLayers.Control.MousePosition()//此控件显示鼠标移动时,所在点的地理坐标 ] } ); //添加控件的第二种方法 map.addControl(new OpenLayers.Control.OverviewMap); // 添加图层 layer0 = new Zondy.Map.GoogleLayer("Google Map VEC", { // 添加GoogleMap的矢量图层 layerType: Zondy.Enum.GoogleLayerType.VEC, isBaseLayer: true } ); map.addLayers([layer0]); //在地图上创建点图层 pointLayer = new OpenLayers.Layer.Vector("MDZZ"); pointLayer.styleMap.styles["default"].defaultStyle.strokeColor = "#1d75b3"; var pointGeom = new OpenLayers.Geometry.Point(858585,154654) ;//创建几何点 var pointFeature = new OpenLayers.Feature.Vector(pointGeom);//生成点要素 var pointGeom1 = new OpenLayers.Geometry.Point(9893585,4344069);//创建几何点 var pointFeature1 = new OpenLayers.Feature.Vector(pointGeom1);//生成点要素 var pointGeom2 = new OpenLayers.Geometry.Point(9314310, 3717894);//创建几何点 var pointFeature2 = new OpenLayers.Feature.Vector(pointGeom2);//生成点要素 pointLayer.addFeatures([pointFeature,pointFeature1,pointFeature2]);//点添加到图层中 map.addLayer(pointLayer);//将图层添加到地图上 <!--设置地图显示中心坐标,地图缩放等级--> map.setCenter(new OpenLayers.LonLat(0, 0), 2); } </script> </head> <body onload="init()"> <div id="map1"> </div> </body> </html>

3.效果

Paste_Image.png


HappyGIS 版权所有, 本站文章可随意转载, 请注明出处: 转载请注明WebGIS 2-1点绘制
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址