美文网首页
WebGIS 2-1点绘制

WebGIS 2-1点绘制

作者: 故因 | 来源:发表于2016-07-25 21:18 被阅读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

相关文章

  • WebGIS 2-1点绘制

    1. 步骤 1) 全局变量 2) 添加地图容器 3) 添加第三方地图图层 4) 将图层添加到地图容器中 5) 在地...

  • R语言 陆胖的数据分析之旅02

    问题 如何绘制散点图? 方法 使用plot()函数可绘制散点图(见图2-1),运行命令时依次传递给plot()函数...

  • webgis中捕捉功能的实现

    概述 本文以openlayers为例,结合turf.js讲一下webgis中绘制和编辑时如何实现捕捉功能。 效果 ...

  • WebGIS 2-2-1交互式绘制点

    点击点绘制按钮后,可在地图任意位置画点 1. 步骤 1) 全局变量 2) 加载地图 3) //创建一个矢量图层用于...

  • WebGIS交流群

    QQ群号:209155906 WebGIS交流群: WebGIS、JavaScript、dojo、Python 1...

  • 《python趣味创意编程》课后答案

    课余时间看看编程教材,答案都是自己动手做的,若有出错,请多多指教~ 练习2-1:绘制出图1的绘制效果 size(4...

  • 基于ArcGis 4.13 for JavaScript打造gi

    对于开发webgis来说,无论做什么样的项目,都有一些基础的功能,比如地图初始化,地图放大缩小、加载图层、绘制图形...

  • Android自定义View--三部曲之二--布局过程的自定义

    从凯哥Blog copy 过来 HenCoder Android UI 部分 2-1 布局基础 自定义分三部分绘制...

  • 自定义view实现粘性拉动效果

    Chapter 2 2-1 添加自定义控件并绘制圆 新建一个自定义控件 实现基本初始化方法 在自定义控件中绘制圆代...

  • webgis

    服务器安装配置 操作系统 下载centos 8镜像,制作u盘启动盘,引导U盘启动。提示 dracut-initqu...

网友评论

      本文标题:WebGIS 2-1点绘制

      本文链接:https://www.haomeiwen.com/subject/osqnjttx.html