<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>在多个矢量图层编辑要素</title>

    <link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" />

    <script src="./OpenLayers-2.12/lib/OpenLayers.js"></script>

    <script type="text/javascript">

        function init(){

            // Create map

        var map = new OpenLayers.Map("editing_vector");

        var osm = new OpenLayers.Layer.OSM();

        map.addLayer(osm);

        map.addControl(new OpenLayers.Control.LayerSwitcher());

        map.setCenter(new OpenLayers.LonLat(0, 0), 3);

        var vectorLayerA = new OpenLayers.Layer.Vector("Vector layer A");

        var vectorLayerB = new OpenLayers.Layer.Vector("Vector layer B");

        map.addLayers([vectorLayerA, vectorLayerB]);

        var editingToolbarControl = new OpenLayers.Control.EditingToolbar(vectorLayerA);

        map.addControl(editingToolbarControl);

        function layerAChanged(checked) {

            if(checked) {

                var controls = editingToolbarControl.getControlsByClass("OpenLayers.Control.DrawFeature");

                for(var i=0; i< controls.length; i++) {

                    controls[i].layer = vectorLayerA;

                }

            }

        }

        function layerBChanged(checked) {

            if(checked) {

                var controls = editingToolbarControl.getControlsByClass("OpenLayers.Control.DrawFeature");

                for(var i=0; i< controls.length; i++) {

                    controls[i].layer = vectorLayerB;

                }

            }

        }

    }

    </script>

</head>

<body onload="init()">

    <form action="">

        Vector Layer A: <input id="rbA" type="radio"  onChange="layerAChanged" name="layer" value="layerA" checked/>

        Vector Layer B: <input id="rbB" type="radio"  onChange="layerBChanged" name="layer" value="layerB"/>

    </form>

    <div id="editing_vector" style="width: 100%; height: 100%;"></div>

</html>

OpenLayers在多个矢量图层编辑要素的更多相关文章

  1. QGis（三）查询矢量图层的要素属性字段值（转载）

    QGis(三)查询矢量图层的要素属性字段值 https://github.com/gwaldron/osgearth/issues/489 当加载一个矢量图层后,如果要查看要素的属性字段值,则需要实现 ...

  2. 【07】openlayers 矢量图层

    创建地图: //创建地图 var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ center: [0, 0],//义地图显示中心于经度0度,纬度 ...

  3. Arcgis engine 指定图层对要素进行创建、删除等操作

    Arcgis engine 指定图层创建点要素 在指定的图层上创建一个点要素,点要素的位置是通过X,Y坐标指定的,下面是具体的注释 .其中 和IFeatureClassWrite接口有关的代码不要好像 ...

  4. GeoServer中利用SLD配图之矢量图层配图

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1 背景 我们在ArcMap中可以直接通过symbol功能对图层进行定 ...

  5. (十二) WebGIS中矢量图层的设计

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在前几章中我们已经了解了什么是矢量查询.屏幕坐标与地理坐标之 ...

  6. （七）WebGIS中栅格、矢量图层设计之栅格、矢量图层的本质

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.何为栅格数据,何为矢量数据? 在GIS中,对于数据格式的分类,我们 ...

  7. openlayers3 在地图上叠加WFS查询矢量图层

    随着终端设备计算能力的加强,用户在使用地图的时候也须要越来越多的交互效果. 比方如今非常火的室内导航,为了获得好的用户体验,就须要当用户单击某一商店的时候该商店的颜色能对应的变化.这就须要叠加矢量图层 ...

  8. Qt+QGIS二次开发：向shp矢量图层中添加新的字段

    添加一个新的字段到shp文件中,并且从Excel里导入数据到该字段.原shp文件里的字段ID应该与Excel里的字段ID一一对应才能正确的导入.下图分别是shp的字段和Excel的字段 将class字 ...

  9. Openlayers3 编辑要素

    参考文章 Openlayers之编辑要素 MAPZONE GIS SDK接入Openlayers3之五——图形编辑工具 [学习笔记之Openlayers3]要素保存篇(第四篇) openlayers实 ...

随机推荐

  1. Ionic3 demo TallyBook 实例3

    1.准备应用相关组件 echarts--直接 npm install 安装即可 2.home.ts import { Component,ViewChild,ElementRef } from '@a ...

  2. 关于N个小球放M个盒子解答

    以下是关于关于N个小球放M个盒子的几种情况的解答,蛮详细的(来自博友的)  求精:关于N个小球放M个盒子解答 - chensmiles的日志 - 网易博客http://chensmiles.blog. ...

  3. vs Code打开新的文件会覆盖窗口中的文件？

    这是因为你单击文件名的缘故,这个是“预览模式”,所以再单击其他文件时,会覆盖当前打开的文件. 如果你要每次都打开新tab,那就双击文件名好了.这个逻辑和sublime是一样的. 补充: 预览模式是现在 ...

  4. 洛谷P3376【模板】网络最大流　 Dinic模板

    之前的Dinic模板照着刘汝佳写的vector然后十分鬼畜跑得奇慢无比,虽然别人这样写也没慢多少但是自己的就是令人捉急. 改成邻接表之后快了三倍,虽然还是比较慢但是自己比较满意了.虽然一开始ecnt从 ...

  5. 7 Serialize and Deserialize Binary Tree 序列化及反序列化二叉树

    原题网址:http://www.lintcode.com/zh-cn/problem/serialize-and-deserialize-binary-tree/# 设计一个算法,并编写代码来序列化和 ...

  6. keil mdk 无法添加对应容量的芯片

    如果包已经安装好了 贴到 回到mdk,完事儿

  7. HDU--2126 Buy the souvenirs（二维01背包）

    题目http://acm.hdu.edu.cn/showproblem.php?pid=2126 分析:有两个要求,一是计算最多可以选多少中纪念品:而是计算选最多纪念品的方案有多少种, 即统计最优方案 ...

  8. Apache Pig学习笔记（二）

     主要整理了一下,pig里面的一些关键词的含义和用法,pig虽然是一种以数据流处理为核心的框架,但数据库的大部分关键词和操作,在pig里面基本上都能找到对应的函数,非常灵活与简洁,春节前的最后一篇文章 ...

  9. 利用jQuery获取jsonp

    前端js代码: $.ajax({ url: 'http://localhost:8080/webApp/somejsonp', dataType: "jsonp", jsonp: ...

  10. STL与泛型编程-学习2-GeekBand

    9, 容器 Deque 双向队列 和vector类似, 新增加: push_front 在头部插入一个元素 pop_front 在头部弹出一个元素 Deque和vector内存管理不同: 大块分配内存 ...