[OpenLayers-Users] Ruled-Based Styling Does Not Work with KML File
Matt Priour
mpriour at kestrelcomputer.com
Fri Dec 14 09:17:24 PST 2012
Since you are using a KML file with attributes in the ExtendedData
section, you need to tell the KML parser to use a simple attribute
key:value model if you want to write rule based styling without an
additional conversion function.
new OpenLayers.Format.KML({
extractStyles: false,
extractAttributes: true,
kvpAttribures: true, // <- THAT is the important part
you are missing
srsName: "EPSG:900913"
})
Matt Priour
On 12/14/2012 6:53 AM, reinaldo at geodesign.com.br wrote:
> OL Users,
>
> I can't get the rule-base styling to work on a KML file.
>
> Please find below my JS, HTML and KML files.
>
> I would appreciate very much if someone could help me.
>
> I examined the examples, read the documentation and double checked the
> KML file structure. Evertyhing indicate that the rule-based styling
> should work, but it doesn't.
>
> I created a simple kml file with one attribute for each placemark. I
> can get the attributes rendered as labels, but I can not do the
> rule-based styling to work It looks like the rules are not being
> evaluated because I only get the elseifFilter style result rendered.
> It does not evaluate the other two EQUAL_TO rules, or any other
> Filter.Comparison rule.
>
> Thanks in advance,
>
> Reinaldo
>
> *** JS FILE **************************************
> var map = new OpenLayers.Map("map");
>
> var vector_style = new OpenLayers.Style(
> {
> fillColor: "#00ff00",
> fillOpacity: 0.1,
> strokeWidth: 1,
> strokeColor: "#0000ff",
> strokeOpacity: 4,
> // label: '${state}',
> // fontColor: "#ff0000",
> // fontFamily: "sans-serif",
> // fontSize: "10px",
> // fontWeight: "bold"
> },
> //{
> //context: {
> //state: function(feature){ return feature.attributes.SUMMER.value; }
> //}},
> {
> rules: [
> new OpenLayers.Rule({
> filter: new OpenLayers.Filter.Comparison({
> type: OpenLayers.Filter.Comparison.EQUAL_TO,
> property: "SUMMER",
> value: 1000.123
> }),
> symbolizer: {
> fillColor: "#ff0000",
> fillOpacity: 1.0,
> strokeWidth: 1,
> strokeColor: "#ff0000",
> strokeOpacity: 4,
> }
> }),
> new OpenLayers.Rule({
> filter: new OpenLayers.Filter.Comparison({
> type: OpenLayers.Filter.Comparison.EQUAL_TO,
> property: "SUMMER",
> value: 2000.123
> }),
> symbolizer: {
> fillColor: "#00ff00",
> fillOpacity: 1.0,
> strokeWidth: 1,
> strokeColor: "#00ff00",
> strokeOpacity: 4,
> }
> }),
> new OpenLayers.Rule({
> // apply this rule if no others apply
> elseFilter: true,
> symbolizer: {
> fillColor: "#ffff00",
> fillOpacity: 1.0,
> strokeWidth: 1,
> strokeColor: "#ffffff",
> strokeOpacity: 4,
> }
> })
> ]
> }
> );
>
> var vector_style_map = new OpenLayers.StyleMap({
> 'default': vector_style
> });
>
> var vectorlayer = new OpenLayers.Layer.Vector("SOLAR RAD BAHIA", {
> strategies: [new OpenLayers.Strategy.Fixed()],
> protocol: new OpenLayers.Protocol.HTTP({
> url: "kml/ba_diff_simple1.kml",
> format: new OpenLayers.Format.KML({
> extractStyles: false,
> extractAttributes: true,
> srsName: "EPSG:900913"
> })
> }),
> styleMap: vector_style_map
> });
>
> var googleLayer = new OpenLayers.Layer.Google("Google Satellite",
> {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
> );
>
> map.addLayers([googleLayer, vectorlayer]);
> map.addControl(new OpenLayers.Control.LayerSwitcher());
> map.zoomToMaxExtent();
>
> *** HTML FILE **************************************
> <!DOCTYPE html>
> <html>
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; ">
> <meta name="viewport" content="width=device-width,
> initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
> <meta name="apple-mobile-web-app-capable" content="yes">
> <link rel="stylesheet" href="../theme/default/style.css"
> type="text/css">
> <link rel="stylesheet" href="style.css" type="text/css">
> <script
> src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
> <style type="text/css">
> #map {
> width: 600px;
> height: 450px;
> border: 1px solid black;
> }
> </style>
> </head>
> <body>
> <h1 id="title">OpenLayers Example</h1>
> <div id="tags">simple, basic, light</div>
> <div id="map" class="smallmap"></div>
> <script src="../lib/OpenLayers.js"></script>
> <script src="example1.js"></script>
> </body>
> </html>
>
> *** KML FILE **************************************
> <kml xmlns="http://www.opengis.net/kml/2.2">
> <Document>
> <Folder>
> <name>diffuse_summer</name>
> <Schema name="ba_diffuse_summer" id="ba_summerId">
> <SimpleField name="SUMMER" type="double"></SimpleField>
> </Schema>
> <Placemark>
> <Style>
> <LineStyle>
> <color>ff0000ff</color>
> </LineStyle>
> <PolyStyle>
> <fill>0</fill>
> </PolyStyle>
> </Style>
> <ExtendedData>
> <SchemaData schemaUrl="#ba_summerId">
> <SimpleData name="SUMMER">1000.123</SimpleData>
> </SchemaData>
> </ExtendedData>
> <Polygon>
> <outerBoundaryIs>
> <LinearRing>
> <coordinates>-39.551991120000018,-8.654038020000009
> -39.461196960000017,-8.650702980000011
> -39.457748160000023,-8.738279009999998
> -39.54856104000001,-8.741648970000023
> -39.551991120000018,-8.654038020000009</coordinates>
> </LinearRing>
> </outerBoundaryIs>
> </Polygon>
> </Placemark>
> <Placemark>
> <Style>
> <LineStyle>
> <color>ff0000ff</color>
> </LineStyle>
> <PolyStyle>
> <fill>0</fill>
> </PolyStyle>
> </Style>
> <ExtendedData>
> <SchemaData schemaUrl="#ba_summerId">
> <SimpleData name="SUMMER">2000.123</SimpleData>
> </SchemaData>
> </ExtendedData>
> <Polygon>
> <outerBoundaryIs>
> <LinearRing>
> <coordinates>-39.370407120000024,-8.647350030000021
> -39.27961296000003,-8.643977999999999
> -39.27612708000003,-8.731485000000008
> -39.366936000000003,-8.734890960000024
> -39.370407120000024,-8.647350030000021</coordinates>
> </LinearRing>
> </outerBoundaryIs>
> </Polygon>
> </Placemark>
> <Placemark>
> <Style>
> <LineStyle>
> <color>ff0000ff</color>
> </LineStyle>
> <PolyStyle>
> <fill>0</fill>
> </PolyStyle>
> </Style>
> <ExtendedData>
> <SchemaData schemaUrl="#ba_diffuse_summerId">
> <SimpleData name="SUMMER">3000.123</SimpleData>
> </SchemaData>
> </ExtendedData>
> <Polygon>
> <outerBoundaryIs>
> <LinearRing>
> <coordinates>-41.365158120000011,-8.805078990000009
> -41.274315,-8.802090000000005 -41.271233040000013,-8.890313040000013
> -41.362098840000023,-8.893332990000021
> -41.365158120000011,-8.805078990000009</coordinates>
> </LinearRing>
> </outerBoundaryIs>
> </Polygon>
> </Placemark>
> </Folder>
> </Document>
> </kml>
>
>
>
> ------------------------------------------------------------------------
>
> Reinaldo Escada Chohfi
> Sócio Gerente
> GeoDesign Internacional
> www.geodesign.com.br <http://www.geodesign.com.br>
> Tel./Fax: (12) 3153-5115
>
> Inteligência e Tecnologia Espacial de Ponta
>
>
>
> _______________________________________________
> Users mailing list
> Users at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-users
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20121214/4b8dd7d1/attachment.html>
More information about the Users
mailing list