Example demonstrating scale dependent labeling.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@12167 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2011-07-12 16:48:39 +00:00
parent 54726888f0
commit c0326c66bd
2 changed files with 106 additions and 0 deletions
@@ -0,0 +1,34 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <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">
    <title>OpenLayers Scale Dependent Labels</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="../lib/OpenLayers.js"></script>
  </head>
  <body>
    <h1 id="title">Scale Dependent Labels Example</h1>
    <div id="tags">
        label, scale, stylemap
    </div>
    <p id="shortdesc">
        Demonstrates how to use a StyleMap for displaying scale dependent labels.
    </p>
    <div id="map" class="smallmap"></div>
    <div id="docs">
        <p>
            This example uses rule based styling to change the how features are
            labeled at different scales.  An <code>OpenLayers.Rule</code> object
            can have <code>minScaleDenominator</code> and 
            <code>maxScaleDenominator</code> properties to control when the 
            provided symbolizer should be used.
        </p><p>
            View the <a href="label-scale.js">source</a> to see how this is done.
        </p>
    </div>
    <script src="label-scale.js"></script>
  </body>
 </html>
@@ -0,0 +1,72 @@
 // Create 50 random features, and give them a "type" attribute that
 // will be used for the label text.
 var features = new Array(50);
 for (var i=0; i<features.length; i++) {
    features[i] = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point(
            (360 * Math.random()) - 180, (180 * Math.random()) - 90
        ), {
            type: 5 + parseInt(5 * Math.random())
        }
    );
 }
 /**
 * Create a style instance that is a collection of rules with symbolizers.
 * Use a default symbolizer to extend symoblizers for all rules.
 */
 var style = new OpenLayers.Style({
    fillColor: "#ffcc66",
    strokeColor: "#ff9933",
    strokeWidth: 2,
    label: "${type}",
    fontColor: "#333333",
    fontFamily: "sans-serif",
    fontWeight: "bold"
 }, {
    rules: [
        new OpenLayers.Rule({
            minScaleDenominator: 200000000,
            symbolizer: {
                pointRadius: 7,
                fontSize: "9px"
            }
        }),
        new OpenLayers.Rule({
            maxScaleDenominator: 200000000,
            minScaleDenominator: 100000000,
            symbolizer: {
                pointRadius: 10,
                fontSize: "12px"
            }
        }),
        new OpenLayers.Rule({
            maxScaleDenominator: 100000000,
            symbolizer: {
                pointRadius: 13,
                fontSize: "15px"
            }
        })
    ]
 });
 // Create a vector layer and give it your style map.
 var points = new OpenLayers.Layer.Vector("Points", {
    styleMap: new OpenLayers.StyleMap(style)
 });
 points.addFeatures(features);
 var map = new OpenLayers.Map({
    div: "map",
    layers: [
        new OpenLayers.Layer.WMS(
            "OpenLayers WMS",
            "http://vmap0.tiles.osgeo.org/wms/vmap0",
            {layers: "basic"}
        ),
        points
    ],
    center: new OpenLayers.LonLat(0, 0),
    zoom: 1
 });