ArcGIS API for JavaScript ile Web Uygulamaları – 8 Etiketleme

06/07/2021
| Alperen Çağrı Işıkkaya |
ArcGIS Enterprise Mapping Teknik Web

Etiketleme

Harita üzerinde gösterimi yapılan objelere ait görsellikle birlikte, objenin nitelikleri (attributes)  kullanılarak harita üzerinde etiketler gösterimi sağlanabilmektedir. Etiketleme özelliği birçok farklı API içerisindeki sınıf tarafından sağlanmaktadır. Bununla birlikte gösterimini sağladığımız haritamızın 2D veya 3D olmasına ve üzerinde gösterilen katmanın tipi, geometri tipine göre de farklı özellikler ve kaynaklar mevcuttur. Daha detaylı bilgi için linke tıklayınız.

Örneğimizde 2D bir web haritasında feature tipinde bir katman içerisinde öznitelik bilgileri kullanılarak farklı etiketlemeler gerçekleştireceğiz.

Adımlar

  • Bilgisayarınızda öncelikle bir web sunucusu bulunmalı. Bu web sunucusunda bir HTML dosyası barındırın ve herhangi bir metin editörü dosyayı açınız.
  • Önceki blog yazılarımızdan HTML şablonu kopyalayınız.
  • Etiketleme için ArcGIS Online üzerinden yayınlanan genele açık dünya şehirleri feature servisini kullanacağız.

Bu servis içerisinde birçok nitelik barındırmaktadır.  Aşağıda örnek değerleri görebilirsiniz:

Basit Etiketleme

Etiketleme için LabelClass sınıfı kullanılacaktır.

              const labelClass = {
                // autocasts as new LabelClass()
                symbol: {
                    type: "text", // autocasts as new TextSymbol()
                    color: "red",
                    haloColor: "white",
                    haloSize: "1px",
                    font: {
                        // autocast as new Font()
                        family: "Arial Unicode MS",
                        size: 12,
                        weight: "bold"
                    }
                },
                labelPlacement: "above-center",
                labelExpressionInfo: {
                    expression: "$feature.ADMIN_NAME"
                }
            };

Bu sınıf içerisinde etiketimizi yazı tipi, renk, konumu, etiket değeri v.b. özelliklerini belirleyebiliyoruz. Sembol olarak TextSymbol sınıfında türettiğimiz sembolümüzde font olarak “Arial Unicode MS” kullanılmıştır. Etiket değeri olarak objemizin içerisindeki “ADMIN_NAME” nitelik değerinin kullanılması sağlanmıştır.

Oluşturduğumuz etiket nesnesi “labelClass” ‘ı, katmanımız içerisinde “labelingInfo” özelliğine tanıtımını da aşağıdaki gibi gerçekleştiriyoruz:

            map.layers = [new FeatureLayer({
                portalItem: {
                    // autocasts as new PortalItem
                    id: "6996f03a1b364dbab4008d99380370ed"
                },
                labelingInfo: [labelClass],
            })];

HTML kodun son hali aşağıdaki gibi olmalı:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript API Örnekleri: Etiketleme</title>
    <style>
        html,
        body,
        #haritaBlogu {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.20/"></script>
    <script>
        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
        ], function (esriConfig, Map, MapView, FeatureLayer) {
            // API anahtarı girilmeli
            esriConfig.apiKey = "XXXXX"
            var map = new Map({
                basemap:  "arcgis-imagery-standard"
            });
            var view = new MapView({
                container: "haritaBlogu",
                map: map,
                center: [35, 39], // boylam, enlem
                zoom: 7
            });
            const labelClass = {
                // autocasts as new LabelClass()
                symbol: {
                    type: "text", // autocasts as new TextSymbol()
                    color: "red",
                    haloColor: "white",
                    haloSize: "1px",
                    font: {
                        // autocast as new Font()
                        family: "Arial Unicode MS",
                        size: 12,
                        weight: "bold"
                    }
                },
                labelPlacement: "above-center",
                labelExpressionInfo: {
                    expression: "$feature.ADMIN_NAME"
                }
            };
            map.layers = [new FeatureLayer({
                portalItem: {
                    // autocasts as new PortalItem
                    id: "6996f03a1b364dbab4008d99380370ed"
                },
                labelingInfo: [labelClass],
                renderer: {
                    type: "simple", // autocasts as new SimpleRenderer()
                    symbol: {
                        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                        color: "rgba(0,100,0,0.6)",
                        size: 3,
                        outline: {
                            color: "yellow",
                            width: 4
                        }
                    }
                }
            })];
        });
    </script>
</head>
<body>
    <div id="haritaBlogu"></div>
</body>
</html>

Harita görünümü aşağıdaki gibi görüntülenir.

Gelişmiş Etiketleme

Harita üzerinde gelişmiş etiketlemede yapılabilmektedir. Örneğin farklı bir özniteliğin değerinin, belirlenen bir değerden az veya çok olması durumunda farklı renklendirmeler, belirli bir ölçekte sadece istenen bilginin etiket olarak gösterilmesi gibi gelişmiş etiketleme seçenekleri desteklenmektedir.

İlk örneğimizde sadece Türkiye verilerinde görüntülemek istiyoruz. Bunun için özniteliklerde “FIPS_CNTRY” kullanılarak sadece “TU” verisi içeren değerler kümesi belirliyoruz. Bu küme sadece Türkiye içerisindeki etiketlerde geçerli olacaktır. Bu kümenin etiketi olarak “FIPS_CNTRY” değerini mavi renkte göstereceğiz.

            const sadeceTurkiyeLabelClass = {
                symbol: {
                    type: "text", // autocasts as new TextSymbol()
                    color: "blue",
                    haloColor: "white",
                    haloSize: "1px",
                },
                labelExpressionInfo: {
                    expression: "$feature.FIPS_CNTRY"
                },
                labelPlacement: "below-left",
                where: "FIPS_CNTRY = 'TU'"
                };

Yukarıdaki kodu uyguladığımızda aşağıdaki harita görünümü oluşacaktır:

Harita üzerine dikkatlice bakıldığında, Türkiye içerisindeki gösterimi yapılan objelere ait etiketlerde mavi karakter ile “TU” görüntülenmekteyken, Türkiye dışında ülke kodu görüntülenmemektedir. Bu koşulu sağlayan durum etiket sınıfında mevcut “where” özelliğinin kullanılmasıdır.

Bir diğer örneğimizde ise etiketin öznitelik değerinin farklı renklerde durumuna göre görüntülenmesi. Örnek verimizde “POP_RANK” olarak ülke nüfusunun hangi kategoride olduğu bilgisi bulunmaktadır. Bu değeri kullanarak etiketlerimizde farklı renklerde bir değer gösterebiliriz.

            const azNufusLabelClass = {
                symbol: {
                    type: "text", // autocasts as new TextSymbol()
                    color: [255,201,14],
                    haloColor: "white",
                    haloSize: "1px",
                },
                labelExpressionInfo: {
                    expression: "$feature.POP_RANK"
                },
                labelPlacement: "below-right",
                where: "POP_RANK <= 2"
            };
            const cokNufusLabelClass = {
                symbol: {
                    type: "text", // autocasts as new TextSymbol()
                    color: [0,162,232],
                    haloColor: "white",
                    haloSize: "1px",
                },
                labelExpressionInfo: {
                    expression: "$feature.POP_RANK"
                },
                labelPlacement: "below-right",
                where: "POP_RANK > 2"
            };

Bu gösteriminin sağlanması için 2 farklı etiket oluşturup, “where” koşullarını birbirleriyle ilişkilendirmek. Aşağıdaki harita görünümünde görüldüğü üzere bazı il adlarında rakamlar ve nüfus yoğunluğuna göre farklı renklerde görüntülenmektedir.

Anlatılan farklı örnekleri tek bir uygulama içerisinde kullanımı aşağıda belirtilmektedir.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript API Örnekleri: Etiketleme</title>
    <style>
        html,
        body,
        #haritaBlogu {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.20/"></script>
    <script>
        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
        ], function (esriConfig, Map, MapView, FeatureLayer) {
            esriConfig.apiKey = "XXXXX"
            var map = new Map({
                basemap: "arcgis-imagery-standard"
            });
            var view = new MapView({
                container: "haritaBlogu",
                map: map,
                center: [35, 39], // boylam, enlem
                zoom: 7
            });
            const labelClass = {
                // autocasts as new LabelClass()
                symbol: {
                    type: "text", // autocasts as new TextSymbol()
                    color: "red",
                    haloColor: "white",
                    haloSize: "1px",
                    font: {
                        // autocast as new Font()
                        family: "Arial Unicode MS",
                        size: 12,
                        weight: "bold"
                    }
                },
                labelPlacement: "above-center",
                labelExpressionInfo: {
                    expression: "$feature.ADMIN_NAME"
                }
            };
            const sadeceTurkiyeLabelClass = {
                symbol: {
                    type: "text", // autocasts as new TextSymbol()
                    color: "blue",
                    haloColor: "white",
                    haloSize: "1px",
                },
                labelExpressionInfo: {
                    expression: "$feature.FIPS_CNTRY"
                },
                labelPlacement: "below-left",
                where: "FIPS_CNTRY = 'TU'"
            };
            const azNufusLabelClass = {
                symbol: {
                    type: "text", // autocasts as new TextSymbol()
                    color: [255, 201, 14],
                    haloColor: "white",
                    haloSize: "1px",
                },
                labelExpressionInfo: {
                    expression: "$feature.POP_RANK"
                },
                labelPlacement: "below-right",
                where: "POP_RANK <= 2"
            };
            const cokNufusLabelClass = {
                symbol: {
                    type: "text", // autocasts as new TextSymbol()
                    color: [0, 162, 232],
                    haloColor: "white",
                    haloSize: "1px",
                },
                labelExpressionInfo: {
                    expression: "$feature.POP_RANK"
                },
                labelPlacement: "below-right",
                where: "POP_RANK > 2"
            };
            map.layers = [new FeatureLayer({
                portalItem: {
                    // autocasts as new PortalItem
                    id: "6996f03a1b364dbab4008d99380370ed"
                },
                labelingInfo: [labelClass, sadeceTurkiyeLabelClass, azNufusLabelClass, cokNufusLabelClass],
                renderer: {
                    type: "simple", // autocasts as new SimpleRenderer()
                    symbol: {
                        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                        color: "rgba(0,100,0,0.6)",
                        size: 3,
                        outline: {
                            color: "yellow",
                            width: 4
                        }
                    }
                }
            })];
        });
    </script>
</head>
<body>
    <div id="haritaBlogu"></div>
</body>
</html>

 

ArcGIS JavaScript API ile yazılmış diğer örnekleri incelemek için linke tıklayınız.

İleri düzey ArcGIS Developer eğitimleri,atölye çalışmaları ve yol gösterme hizmetleri için Esri Türkiye Profesyonel Hizmetler birimi ile irtibata geçiniz.

Esri Türkiye 2021

Önceki Yazı
ArcGIS Pro ile Uygunluk Modelleyici (Suitability Modeler)
Yazıyı görüntüle
Sonraki Yazı
AEC Web Uygulamaları Serisi – 1
Yazıyı görüntüle

En Çok Okunanlar