ArcGIS API for JavaScript ile Web Uygulamaları – 8 Etiketleme

ArcGIS API for JavaScript ile Web Uygulamaları – 8 Etiketleme

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

ArcGIS API for JavaScript ile Web Uygulamaları – 7 FeatureFilter

İstemci (‘client’) tarafında, haritada kullanılan feature tipinde katmanda filtreleme yapabilmek için “FeatureFilter” sınıfı kullanılmaktadır.

“FeatureFilter” sınıfında aşağıdaki parametreleri belirleyebilirsiniz:

  • “where”: Filtreleme için kullanılan “SQL92” tipinde söz dizimi.
  • “geometry”: Mekansal filterenin uygulanacağı geometri.
  • “spatialRelationship”: Mekansal filtreleme için mekânsal ilişki tipi (içerir, kesişir, örtüşür vb.).
  • “distance”: Mekansal filterlemede kullanılacak arama mesafesi.
  • “units”: Mesafe parametresi belirlendiğinde tampon mesafe hesaplamasında kullanılacak birim.

Diğer parametreler için linke tıklayınız.

Adımlar

  1. 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.
  2. Önceki blog yazılarımızdan HTML şablonu kopyalayınız.
  3. Filtereleme için ArcGIS Online üzerinden yayınlanan genele açık dünya şehirleri feature servisini kullanacağız.

Bu servis içerisindeki öz niteliklerden “POP_RANK”, nüfus sıralaması hakkında sayısal değer bilgisi içermektedir.

Filtreleme işlevini yerine getirmek için harita üzerinde “esri-widget” stil sınıfını kullanarak, kendi filtreleme görselimizi oluşturacağız.

Filtre ikonuna basıldığında, oluşturduğumuz liste görüntülenecektir.

İlgili görselliği aşağıdaki kod ile oluşturacağız:

    <div id="menu-filter" class="esri-widget">
        <div class="menu-parca visible-poprank" data-poprank="0">0-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="1">1-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="2">2-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="3">3-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="4">4-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="5">5-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="6">6-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="7">7-Nüfus Sıralaması</div>
    </div>

Sonrasında da görünümü stillerini belirliyoruz:

        #menu-filter {
            height: 320px;
            width: 150px;
            visibility: hidden;
        }
        .menu-parca {
            width: 100%;
            padding: 12px;
            text-align: center;
            vertical-align: baseline;
            cursor: pointer;
            height: 40px;
        }
        .menu-parca:focus {
            background-color: dimgrey;
        }
        .menu-parca:hover {
            background-color: dimgrey;
        }

Feature katmanımızın filtreleme süreci, görsel filtreleme bileşenine basıldıktan sonra feature katmanımızın “filter” değerini belirleyerek gerçekleştirmektedir. Bunu içinde “click” olayını ilgili fonksiyona bağlayıp, seçili parçaya ait “data-poprank” değerini filtreleme için kullanıyoruz.

element.addEventListener("click", filterByPopRank);
            function filterByPopRank(event) {
                const selectedPopRank = event.target.getAttribute("data-poprank");
                myLayerView.filter = {
                    where: "POP_RANK = " + selectedPopRank
                };
            }

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: Filtreleme</title>
    <style>
        html,
        body,
        #haritaBlogu {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #menu-filter {
            height: 320px;
            width: 150px;
            visibility: hidden;
        }
        .menu-parca {
            width: 100%;
            padding: 12px;
            text-align: center;
            vertical-align: baseline;
            cursor: pointer;
            height: 40px;
        }
        .menu-parca:focus {
            background-color: dimgrey;
        }
        .menu-parca:hover {
            background-color: dimgrey;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.18/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/widgets/Expand"
        ], function (Map, MapView, FeatureLayer, Expand) {
            var map = new Map({
                basemap: "topo-vector"
            });
            var view = new MapView({
                container: "haritaBlogu",
                map: map,
                center: [-117.98118, 34.00679], // boylam, enlem
                zoom: 3
            });
            const flayer = new FeatureLayer({
                portalItem: {
                    id: "6996f03a1b364dbab4008d99380370ed"
                },
                outFields: ["POP_RANK"]
            });
            map.add(flayer);
            const nodes = document.querySelectorAll(`.menu-parca`);
            const element = document.getElementById("menu-filter");
            element.addEventListener("click", filterByPopRank);
            function filterByPopRank(event) {
                const selectedPopRank = event.target.getAttribute("data-poprank");
                myLayerView.filter = {
                    where: "POP_RANK = " + selectedPopRank
                };
            }
            view.whenLayerView(layer).then(function (layerView) {
                myLayerView = layerView;
                element.style.visibility = "visible";
                const guiExpand = new Expand({
                    view: view,
                    content: element,
                    expandIconClass: "esri-icon-filter",
                    group: "top-left"
                });
                guiExpand.watch("expanded", function () {
                    if (!guiExpand.expanded) {
                        myLayerView.filter = null;
                    }
                });
                view.ui.add(guiExpand, "top-left");
            });
        });
    </script>
</head>
<body>
    <div id="menu-filter" class="esri-widget">
        <div class="menu-parca visible-poprank" data-poprank="0">0-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="1">1-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="2">2-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="3">3-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="4">4-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="5">5-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="6">6-Nüfus Sıralaması</div>
        <div class="menu-parca visible-poprank" data-poprank="7">7-Nüfus Sıralaması</div>
    </div>
    <div id="haritaBlogu"></div>
</body>
</html>

 

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

 

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

Esri Türkiye 2021

ArcGIS Pro SDK ile Add-in Geliştirme

ArcGIS Pro SDK ile Add-in Geliştirme

Daha önceki “ArcGIS Pro SDK ile ArcGIS Pro Başlangıç Ekranı Değiştirme” yazımızda ArcGIS Pro açılış ekranın nasıl özelleştirilebileceği ve ArcGIS Pro SDK kullanımı hakkında bilgi vermiştik. Bu yazımızda ArcGIs Pro SDK kullanarak ArcGIS Pro yeteneklerini kendi özel süreçlerimiz gerçekleştirmek için kullanabileceğimiz add-in (eklenti) oluşturma ve kullanmayı öğreneceğiz.

Proje Oluşturma

Önceki yazımızda gerekli geliştirme ortamı olan Visual Studio ve ArcGIS Pro SDK kütüphane tanımlarını oluşturduktan sonra öncelikle Visual Studio’da yeni bir proje oluşturuyoruz.

Ekrana gelen seçeneklerde yazılım dili olarak C#, ortam olarak Windows ve proje tipi olarak da ArcGIS Pro SDK seçeneklerini seçiyoruz. Ekrana gelen listeden “ArcGIS Pro Module Add-in” proje şablonunu seçip sağ alt kısımdaki “Next” düğmesine basıyoruz.

Açılan ekranda proje bilgilerini ve dosyalarımızın oluşturulacağı konumu seçiyoruz. “Create” düğmesine basarak projemiz açılır.

Hazırlık

“Solution Explorer” panelinde proje adına fare ile sağ tıklama sonrası açılan menüden “Add -> New Item” (Ekle – Yeni Parça) menü parçaları seçilerek projemize bir düğme oluşturmak için yeni bir sınıf oluşturma sürecini başlatırız.

Açılan ekranda “ArcGIS Pro Add-ins” proje şablonu seçildiğine listelenen parça tiplerinden “ArcGIS Pro Button” seçeneği seçilirek yeni düğme sınıfı oluşturulur. İsterseniz sınıf adını bu ekranda belirleyebilirsiniz. Yeni düğmemiz oluşturulup, “OnClick” metodu hazırlanmıştır. Bu metot düğmeye basıldığından tetiklenendir.

Bu metot içerisine aşağıdaki kod parçasını ekleyelim. Böylelikle ArcGIS Pro içerisinde add-in düğmemize basıldığında Visul Studio içerisindeki konsola bir yazı düşecektir.

System.Diagnostics.Debug.WriteLine("DENEME");

“Config.daml” dosyası add-in ayarlarını konfigüre edebileceğiniz etiketler bulunmaktadır. İçerisinde yeni oluşturulan düğme hakkında bilgiler oluşmuş olacaktır. ArcGIS Pro içerisinde düğmemizin görünüm resmini değiştirmek ile başlayabiliriz. Bunun için belirlediğiniz resmi “Images” dizini içerisine kopyaladıktan sonra “smallImage” ve “largeImage” etiketlerinde atayacağınız resmin adını girebilirsiniz. “caption” etiketine ait değeri değiştirerek, düğmemizin görüntülenen etiketini değiştirebiliriz.

Oluşturduğumuz proje ile bilgisayarlarınızdaki ArcGIS Pro ile entegre çalışmasını kontrol etmek için projemizi bu haliyle çalıştırmasını gerçekleştirelim. Uygulamamızı çalıştıralım. ArcGIS Pro yüklendikten sonra “Add-in” düğme grubuna basıldığında, oluşturmuş olduğumuz add-in düğmesi görüntülenecektir.

Oluşturduğunuz add-in düğmesine basıldığında Visual Studio içerisindeki “Output” panel içerisinde yazmış olduğumuz çıktı görüntülenecektir.

Süreç

Düğmemizi oluşturduktan sonra artık kendimize ait bir sürecimizi işletebiliriz. Örnek olarak, harita üzerinde seçilen obje hakkında bilgilerinin gösterilmesini sağlayalım.

QueuedTask.Run(() =>
            {
                if (MapView.Active is null || MapView.Active.GetSelectedLayers().Count == 0)
                {
                    ArcGIS.Desktop.Framework.Dialogs.MessageBox.Show("Harita bileşeni veya seçili katman bulunmuyor.", "Hata");
                    return;
                }
                var featLayer = MapView.Active.GetSelectedLayers().First() as FeatureLayer;
                if (featLayer == null || featLayer.SelectionCount == 0)
                {
                    ArcGIS.Desktop.Framework.Dialogs.MessageBox.Show("Katman bulunmuyor.", "Hata");
                    return;
                }
                var featSelectionOIDs = featLayer.GetSelection().GetObjectIDs();
                if (featSelectionOIDs.Count == 0)
                {
                    ArcGIS.Desktop.Framework.Dialogs.MessageBox.Show("Katmanda seçili bir obje yok.","Hata");
                    return;
                }
                var insp = new ArcGIS.Desktop.Editing.Attributes.Inspector();
                foreach (var oid in featSelectionOIDs)
                {
                    insp.Load(featLayer, oid);
                    foreach (var f in featLayer.GetFieldDescriptions())
                    {
                        System.Diagnostics.Debug.WriteLine(f.Name + "-"+insp[f.Name]);                       
                    }
                }
            });

Kodumuzu çalıştırıp, ArcGIS Pro içerisinde bir katman ekleyelim. Sonra katmanda seçim yapıp, add-in düğmemize basalım. Ekleyip seçtiğiniz objelere ait bilgiler “Output” panelinde görüntülenecektir.

Daha fazla bilgi için Esri Türkiye Profesyonel Hizmetler ile iletişime geçebilirsiniz.

Esri Türkiye 2021

ArcGIS API for JavaScript ile Web Uygulamaları – 6

ArcGIS API for JavaScript ile Web Uygulamaları – 6

StreamLayer

Akış katman olarak da adlandırabileceğimiz ‘StreamLayer’, kendinizin oluşturacağı ‘WebSocket’ ’leri veri kaynağı olarak tanımaktadır. Böylelikle canlı olarak herhangi bir kaynakta üretilen mekânsal verileriniz, web haritaları üzerinden kolayca gösterimini sağlayabileceksiniz.

‘StreamLayer’, akış katmanlarında veya kendinizin oluşturacağı ‘WebSocket’ servislerine bağlantı kurarak, gerçek zamanlı izlenen (tracked) nesneler kümesinin gözlemlenmesini sağlamaktadır. Gözlemleme olarak nesnesinin konumu, nitelikleri veya her ikisini içermektedir. Akış katmanları nokta, çoklu çizgi veya poligon tipinde konumsal nesneler olabilir.

Akış katmanı haritaya eklendikten sonra, gerçek zamanlı olarak sunucu tarafından gönderilen güncellemeleri kullanıcılar görüntüleyebilecektir. ‘FeatureLayer’ tipinde katmandan farklı olarak konumsal nesnelerin güncel verisini görüntülemek için her defasında sunucundan bilgi çekmek için güncelleme işlemine gerek kalmamaktadır. Akış katmanı, akış servisi tarafından veri yayınının akışını dinleyerek dinamik olarak güncel veriyi görüntülemektedir.

Akış katmanında veri kaynağı olarak 2 kaynak tipi geçerli:

  • ArcGIS GeoEvent Server tarafından oluşturulmuş akış katman servisi kaynağı
  • Özel oluşturulmuş websocket akış servisi kaynağı

Adımlar

  1. 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.
  2. Önceki blog yazılarımızdan HTML şablonu kopyalayınız.

1.      ArcGIS GeoEvent Server servis kaynağı

“https://geoeventsample1.esri.com:6443/arcgis/rest/services/LABus/StreamServer” örnek bir ArcGIS GeoEvent Server akış servis adresini kullanarak haritamıza bir StreamLayer katmanını web haritası üzerinde gösterimini sağlayacağız.

1.1 Öncelikle harita ve görünümünü oluşturuyoruz.

   var map = new Map({
     basemap: "topo-vector"
   });
 
   var view = new MapView({
      container: "haritaBlogu",
      map: map,
      center: [-117.98118, 34.00679], // boylam, enlem
      zoom: 10
   });

 

1.2 Akış katmanımızı, ‘url’ özelliğine servisin adresini belirterek oluşturuyoruz ve sonrasında da haritamıza katman olarak ekliyoruz.
const streamLayer = new StreamLayer({
    url: 'https://geoeventsample1.esri.com:6443/arcgis/rest/services/LABus/StreamServer',
    purgeOptions: {
      displayCount: 10000
    }
  });
map.add(streamLayer);

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: Stream Layer</title>
    <style>
        html, body, #haritaBlogu {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
 
    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.18/"></script>
   
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/StreamLayer"
        ], function (Map, MapView, StreamLayer) {
       
            var map = new Map({
                basemap: "topo-vector"
            });
           
            var view = new MapView({
                container: "haritaBlogu",
                map: map,
                center: [-117.98118, 34.00679], // boylam, enlem
                zoom: 10
            });
            const streamLayer = new StreamLayer({
                url: 'https://geoeventsample1.esri.com:6443/arcgis/rest/services/LABus/StreamServer',
                purgeOptions: {
                  displayCount: 10000
                }
              });
            map.add(streamLayer);
        });
    </script>
</head>
<body>
    <div id="haritaBlogu"></div>
</body>
</html>

 

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

Anlık olarak ekran üzerinde noktaların eklendiğini görüntüleyeceksiniz.

 

2.     Özel oluşturulmuş websocket akış servisi kaynağı

Özel websocket için herhangi bir programlama dilini kullanarak oluşturabilirsiniz. Websocket sucunusundan paylaşılacak veri için ArcGIS Pro’yu kullanabilirsiniz. Harita üzerinde çizeceğiniz bir alanı, noktalara dönüştürebilirsiniz.

Dönüşüm işlemi sonrasında katman Excel’e çıkartılır. Excel uygulamasını kullanarak excel dosyasını ‘csv’ formatına dönüştürebilirsiniz.

Belirleyebileceğiniz zaman aralıklarında, veri içerisindeki bir satır okunarak, websocket üzerinden paylaşılacak şekilde bir websocket sunucusu oluşturulur.

2.1 Öncelikler harita ve görünümünü oluşturuyoruz.

var map = new Map({
    basemap: "topo-vector"
});
var view = new MapView({
    container: "haritaBlogu",
    map: map,
    center: [35, 39], // boylam, enlem
    zoom: 7
});

 

2.2 Akış katmanımızı, ‘webSocketUrl’ özelliğine özel oluşturduğunuz websocket sunucusunun adresini, ‘fields’ özelliğine ise veri içerisinde tanımlı öznitelik adlarını tanımlıyoruz.
const streamLayer = new StreamLayer({
  popupTemplate: {
    content: "OBJECTID={OBJECTID}",
  },
  webSocketUrl: "ws://localhost:8765",
  fields: [
    {
      name: "OBJECTID",
      alias: "ObjectId",
      type: "oid",
    },
    {
      name: "TRACKID",
      alias: "TrackId",
      type: "oid",
    }
  ],
  timeInfo: {
    trackIdField: "TRACKID"
  },
  geometryType: "point",
  maxReconnectionAttempts: 100,
  maxReconnectionInterval: 10,
  renderer: {
      type: "simple",
      symbol: {
        type: "simple-marker",
        size: "8px",
        color: "red",
      },
    },
});

 

2.3 Oluşturduğumuz katmanı harita içerisinde katman olarak ekliyoruz.

map.add(streamLayer);

 

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: Stream Layer</title>
    <style>
        html, body, #haritaBlogu {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
 
    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.18/"></script>
   
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/StreamLayer"
        ], function (Map, MapView, StreamLayer) {
       
            var map = new Map({
                basemap: "topo-vector"
            });
           
            var view = new MapView({
                container: "haritaBlogu",
                map: map,
                center: [35, 39], // boylam, enlem
                zoom: 7
            });
           const streamLayer = new StreamLayer({
              popupTemplate: {
                content: "OBJECTID={OBJECTID}",
              },
              webSocketUrl: "ws://localhost:8765",
              fields: [
                {
                  name: "OBJECTID",
                  alias: "ObjectId",
                  type: "oid",
                },
                {
                  name: "TRACKID",
                  alias: "TrackId",
                  type: "oid",
                }
              ],
              timeInfo: {
                trackIdField: "TRACKID"
              },
              geometryType: "point",
              maxReconnectionAttempts: 100,
              maxReconnectionInterval: 10,
              renderer: {
                  type: "simple",
                  symbol: {
                    type: "simple-marker",
                    size: "8px",
                    color: "red",
                  },
                },
            });
            map.add(streamLayer);
        });
    </script>
</head>
<body>
    <div id="haritaBlogu"></div>
</body>
</html>

 

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

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 2020

ArcMap’ten Portal for ArcGIS İçeriğine Erişim

ArcMap’ten Portal for ArcGIS İçeriğine Erişim

ArcGIS Pro masaüstü yazılımı bütünleşik olarak Portal for ArcGIS ile çalışabilirken, ArcMap masaüstü yazılımı kullanılarak Portal for ArcGIS içerisindeki içeriğe erişim, iki yöntem ile sağlanmaktadır:

  • Portal bağlantısı kurularak
  • ArcGIS Server bağlantısı oluşturarak

1.      Portal Bağlantısı Kurularak

Organizasyonunuza ait portal’a erişim için aşağıdaki adımları uygulayınız:

1- Windows Başlat menüsü içerisinden “ArcGIS->ArcGIS Administrator” uygulaması çalıştırılır.

2- Açılan “ArcGIS Administrator” uygulama içerisinden “Advanced” düğmesine basılır.

3- Ekrandaki “Manage Portal Connections” düğmesine basılır.

4-Açılan ekrandan “Add” düğmesine basılarak, Portal for ArcGIS’e erişim URL’si girilir. URL bilgisini teknik personelden elde edebilirsiniz.

Listeden yeni girilen URL bağlantısı seçilir ve “Connect” düğmesine basılır. Bağlantı bilgileri doğru ise ekran kapatılır. “Save” düğmesine basılır. “ArcGIS Administrator” ana ekranında “Ok” düğmesine basılır.

5- ArcMap uygulaması açılır. Üst kısımdan araç menülerinden “Add Data” menü düğmesine basılır ve açılan listeden “Add Data From ArcGIS Online…” menü parçası seçilir.

6- Açılan ekranda sağ kısımdaki “Sign in” linkine tıklanır. Kullanıcı bilgileri girilir ve kullanıcıya ait katman bilgileri görüntülenir. Eklenmek istenen katman seçilir ve “Add” düğmesine basılır. ArcMap içerisinde görüntülenir.

2.      ArcGIS Server Bağlantısı Oluşturarak

Portal for ArcGIS içerisinde oluşturulan katmanlara ait servisler ArcGIS Server tarafından konumlandırılır. Bu sebeple ArcGIS Server’e bağlantı kurulduğunda, Portal for ArcGIS içerisinde kullanıcının oluşturduğu katmanlara da erişim sağlanır.

1- Öncelikle ArcMap içerisinden “Add ArcGIS Server” seçilir.

2- Açılan ekrandan “Use GIS services” seçeneği seçilir ve “Next” düğmesine basılır.

3-Gösterimi yapılan ekranda ArcGIS Server bağlantı ve yetkilendirme bilgileri girilir. “Finish” düğmesine basıldığında bilgiler doğru ise, “Catalog” panelinde yeni bir ArcGIS Server bağlantısı oluşturulacaktır.

4- “Catalog” panelinde oluşturulan ArcGIS Server bağlantısı içerisinden gösterimi yapılmak istenen katman bulunur ve haritaya eklenir.

Özel çözümler ve profesyonel destek için Esri Türkiye Profesyonel Hizmet birimi ile iletişim kurabilirsiniz.