Inclusão de exemplo de inclusao de botao para digitalizar polígono

Edmar Moretti
1 parent b2f92261
Showing 2 changed files with 99 additions and 0 deletions Show diff stats
exemplos/cursodsv27.htm
exemplos/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Category" content="i3Geo Mapa interativo MMA geoprocessamento sig mobile">
+<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
+<title>i3GEO - OpenLayers</title>
+<script src="../classesjs/i3geonaocompacto.js"></script>
+<script src="../pacotes/openlayers/OpenLayers2131.js"></script>
+<link rel="stylesheet" type="text/css" href="../css/black.css">
+</head>
+<body style='margin-left: 7px; background: white;' class=yui-skin-sam>
+	<div id=i3geo>
+		<div id=corpoMapa style="left: 15px; width: 700px; height: 400px; background-image: url('../imagens/i3geo1bw.jpg');"></div>
+	</div>
+	<div style="top: 410px; text-align: left; left: 15px;">
+		<button title="Digitalizar" onclick="digitaliza()" value="i3GEOselecaopoli">
+			<img src="../imagens/gisicons/boundary-edit.png" />
+		</button>
+		<div id="wkt" style="text-align: left; left: 15px;"></div>
+	</div>
+	<script>
+		/************
+
+		Exemplo de inclusao de um botao que permite digitalizar poligonos no mapa
+
+
+		 ************/
+
+		i3GEO.idioma.MOSTRASELETOR = false; //para nao mostrar as bandeiras de escolha do idioma
+		i3GEO.configura.mapaRefDisplay = "none";//nao mostra o mapa de referencia
+		i3GEO.mapa.TEMASINICIAIS = "_lbiomashp,_llocali";
+		i3GEO.mapa.TEMASINICIAISLIGADOS = "_lbiomashp";
+
+		function digitaliza() {
+			i3GEO.eventos.cliquePerm.desativa();
+			if (i3GEO.desenho.layergrafico) {
+				var u = i3GEO.desenho.layergrafico.getFeaturesByAttribute(
+					"origem",
+					"geobahia");
+				if (u
+					&& u.length > 0) {
+					i3GEO.desenho.layergrafico.destroyFeatures(u);
+				}
+				poligono.activate();
+				return;
+			}
+			i3GEO.desenho.openlayers.inicia();
+			alert("Clique no mapa para desenhar um poligono");
+			poligono = new OpenLayers.Control.DrawFeature(
+				i3GEO.desenho.layergrafico, OpenLayers.Handler.Polygon, {
+					id : "inserePoligono",
+					autoActivate : true,
+					type : OpenLayers.Control.TYPE_TOOL,
+					//handlerOptions: {holeModifier: "altKey"},
+					callbacks : {
+						done : function(feature) {
+							var estilo, f, u;
+							u = i3GEO.desenho.layergrafico.getFeaturesByAttribute(
+								"origem",
+								"geobahia");
+							if (u
+								&& u.length > 0) {
+								i3GEO.desenho.layergrafico.destroyFeatures(u);
+							}
+							estilo = i3GEO.desenho.estilos["normal"];
+
+							f = new OpenLayers.Feature.Vector(
+								feature, {
+									origem : "geobahia"
+								}, {
+									graphicName : "square",
+									pointRadius : 10,
+									graphicOpacity : 1,
+									strokeWidth : 2,
+									strokeColor : estilo.linecolor,
+									fillColor : estilo.fillcolor,
+									fillOpacity : 0.3
+								});
+							i3GEO.desenho.layergrafico.addFeatures([
+								f
+							]);
+							i3GEO.eventos.cliquePerm.ativa();
+							$i("wkt").innerHTML = f.geometry;
+							poligono.deactivate();
+						}
+					}
+				});
+			i3geoOL.addControls([
+				poligono
+			]);
+		};
+
+		i3GEO.cria();
+		i3GEO.inicia();
+	</script>
+</body>
+</html>
@@ -112,6 +112,8 @@ body,td {
 					<a title="Altera a funcao de atualizacao da legenda" href="codemirror.php?&pagina=cursodsv25.htm" target="_blank">[25]</a>
 					&nbsp;&nbsp;
 					<a title="Legenda sem alteracao da funcao de atualizacao" href="codemirror.php?&pagina=cursodsv26.htm" target="_blank">[26]</a>
+					&nbsp;&nbsp;
+					<a title="Desenho de poligono" href="codemirror.php?&pagina=cursodsv27.htm" target="_blank">[27]</a>
 				</p>
 			</fieldset>
@@ -0,0 +1,97 @@		@@ -0,0 +1,97 @@
	1	+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
	2	+<html>
	3	+<head>
	4	+<meta http-equiv="Category" content="i3Geo Mapa interativo MMA geoprocessamento sig mobile">
	5	+<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
	6	+<title>i3GEO - OpenLayers</title>
	7	+<script src="../classesjs/i3geonaocompacto.js"></script>
	8	+<script src="../pacotes/openlayers/OpenLayers2131.js"></script>
	9	+<link rel="stylesheet" type="text/css" href="../css/black.css">
	10	+</head>
	11	+<body style='margin-left: 7px; background: white;' class=yui-skin-sam>
	12	+ <div id=i3geo>
	13	+ <div id=corpoMapa style="left: 15px; width: 700px; height: 400px; background-image: url('../imagens/i3geo1bw.jpg');"></div>
	14	+ </div>
	15	+ <div style="top: 410px; text-align: left; left: 15px;">
	16	+ <button title="Digitalizar" onclick="digitaliza()" value="i3GEOselecaopoli">
	17	+ <img src="../imagens/gisicons/boundary-edit.png" />
	18	+ </button>
	19	+ <div id="wkt" style="text-align: left; left: 15px;"></div>
	20	+ </div>
	21	+ <script>
	22	+ /************
	23	+
	24	+ Exemplo de inclusao de um botao que permite digitalizar poligonos no mapa
	25	+
	26	+
	27	+ ************/
	28	+
	29	+ i3GEO.idioma.MOSTRASELETOR = false; //para nao mostrar as bandeiras de escolha do idioma
	30	+ i3GEO.configura.mapaRefDisplay = "none";//nao mostra o mapa de referencia
	31	+ i3GEO.mapa.TEMASINICIAIS = "_lbiomashp,_llocali";
	32	+ i3GEO.mapa.TEMASINICIAISLIGADOS = "_lbiomashp";
	33	+
	34	+ function digitaliza() {
	35	+ i3GEO.eventos.cliquePerm.desativa();
	36	+ if (i3GEO.desenho.layergrafico) {
	37	+ var u = i3GEO.desenho.layergrafico.getFeaturesByAttribute(
	38	+ "origem",
	39	+ "geobahia");
	40	+ if (u
	41	+ && u.length > 0) {
	42	+ i3GEO.desenho.layergrafico.destroyFeatures(u);
	43	+ }
	44	+ poligono.activate();
	45	+ return;
	46	+ }
	47	+ i3GEO.desenho.openlayers.inicia();
	48	+ alert("Clique no mapa para desenhar um poligono");
	49	+ poligono = new OpenLayers.Control.DrawFeature(
	50	+ i3GEO.desenho.layergrafico, OpenLayers.Handler.Polygon, {
	51	+ id : "inserePoligono",
	52	+ autoActivate : true,
	53	+ type : OpenLayers.Control.TYPE_TOOL,
	54	+ //handlerOptions: {holeModifier: "altKey"},
	55	+ callbacks : {
	56	+ done : function(feature) {
	57	+ var estilo, f, u;
	58	+ u = i3GEO.desenho.layergrafico.getFeaturesByAttribute(
	59	+ "origem",
	60	+ "geobahia");
	61	+ if (u
	62	+ && u.length > 0) {
	63	+ i3GEO.desenho.layergrafico.destroyFeatures(u);
	64	+ }
	65	+ estilo = i3GEO.desenho.estilos["normal"];
	66	+
	67	+ f = new OpenLayers.Feature.Vector(
	68	+ feature, {
	69	+ origem : "geobahia"
	70	+ }, {
	71	+ graphicName : "square",
	72	+ pointRadius : 10,
	73	+ graphicOpacity : 1,
	74	+ strokeWidth : 2,
	75	+ strokeColor : estilo.linecolor,
	76	+ fillColor : estilo.fillcolor,
	77	+ fillOpacity : 0.3
	78	+ });
	79	+ i3GEO.desenho.layergrafico.addFeatures([
	80	+ f
	81	+ ]);
	82	+ i3GEO.eventos.cliquePerm.ativa();
	83	+ $i("wkt").innerHTML = f.geometry;
	84	+ poligono.deactivate();
	85	+ }
	86	+ }
	87	+ });
	88	+ i3geoOL.addControls([
	89	+ poligono
	90	+ ]);
	91	+ };
	92	+
	93	+ i3GEO.cria();
	94	+ i3GEO.inicia();
	95	+ </script>
	96	+</body>
	97	+</html>