ArcGIS Survey123’te Eklentileri (Attachment) Dosya Olarak Saklama

ArcGIS Survey123’te Eklentileri (Attachment) Dosya Olarak Saklama

ArcGIS Survey123’te Eklentileri (Attachment) Dosya Olarak Saklama

ArcGIS Survey123 ürünü ile anketler oluşturulabilmektedir. Bu anketler içerisinde kullanıcılardan medya dosyalarının eklenmesini de sağlayabilirsiniz. Bu medya dosyaları resim, ses veya normal bir dosya tiplerinde olabilmektedir.

ArcGIS Survey123 web sayfasında akıllı form sayesinde tasarımını yaptığınız anket formlarında resim ve dosya eklemek için ilgili bileşenleri kullanabilir ve miktarlarını da belirtebilirsiniz.

ArcGIS Survey123 kullanımı ile ilgili blog yazısına linkten ulaşabilirsiniz.

Akıllı form kullanmanız durumunda anketi yayınladığınız zaman ArcGIS Survey123 sizin için otomatik olarak formdaki bileşenlere göre feature katmanları (yayınlanmış/hosted) oluşturur. Bu katmanları ArcGIS Portal içerisinde anket adı ile oluşturulmuş bir dizin içerisinde bulabilirsiniz.

ArcGIS Survery123 Connect masaüstü yazılımı kullanarak ise excel yardımıyla daha nicel daha özel anketler oluşturmanıza imkan sağlamaktadır. ArcGIS Survery123 Connect yazılımı yeteneklerinin bir diğeri ise ArcGIS Portal içerisinde var olan bir feature katmanını kullanarak, bu katman içerisindeki özniteliklere göre formlar oluşturmanızı sağlar. Bu feature katmanı ArcGIS DataStore veya kurumsal veri tabanınızda bulunabilir. Linkten, mevcut bir katman kullanılarak Survey123 Connect’te nasıl anket oluşturulduğunu öğrenebilirsiniz.

Problem

Eğer veri tabanındaki katmanı kullanan bir anket oluşturursak ve bu anketten medya dosyası eklenmesini de istersek, tüm eklenen medya dosyaları, veri tabanında saklamak durumunda kalınacaktır. Eğer bu anketin kullanım yoğunluğu yüksek ise veri tabanında ciddi boyut artışları oluşacaktır. Mesela elektrik sektöründe bir firmada çalışıyorsunuz ve elektrik direkleriyle ilgili saha personelinizden resimler çekmesini istediniz. Her çalışan personeliniz her bir direkt ile ilgili 3’er fotoğraf çekse, her fotoğrafın boyutu 1MB olsa ve toplamda da 100 elektrik direği bulunsa, veri tabanında sadece bir personel işi için 300 MB boyut harcanmış olacak. Eğer donanım kaynaklarınız kısıtlı ise belirli bir süre sonra ciddi performans ve donanım sorunları yaşanacaktır.

Başka bir örnek problem, halka açık bir anket içerisinde gönderilen dosyaların direkt olarak görüntülenmesini istemediğiniz bir iş akışınız olsun. Kullanıcının yüklediği dosyaları bir onay mekanizması sonrası halkın görüntülenmesini istiyorsunuz. Hazırladığımız çözüm ile dosyalar direkt olarak katman içerisinde olmayıp, sunucuda dosya olarak tutulduğundan, siz dosyaya onay verdikten sonra katman içerisinde görüntülenmesini sağlayabilirsiniz.

Çözüm

Esri Türkiye Profesyonel Hizmetler olarak hem ArcGIS Enterprise hem de ArcGIS Online üzerinde başarılı şekilde çalışan bir çözüm üretmiş bulunmaktayız.

Bu çözüm sayesinde ArcGIS Survey123 üzerinden gönderilen medya dosyaları, istediğiniz bir sunucu makinesi üzerinde dosya olarak saklanmaktadır. Veri tabanında veya DataStore’da dosyalar ‘attachment’ olarak tutulmamaktadır. Bu sayede dosyaların saklanması dosya sunucusu üzerinde olmaktadır.

Medya dosyalarının, sunucuda dosya olarak tutulması, sizin bu dosyaları ArcGIS Pro veya bir web map içerisinden görüntülenmesine engel olmayacaktır.

ArcGIS Survey123 içerisinden eklenen medya dosyaları otomatik olarak, hiçbir müdahale edilmeksizin istenilen dosya sunucusundaki belirlemiş olduğunuz bir dizin içerisine gönderilir. Bu işlem sonrasında Survey123 içerisindeki medya bilgisi silinerek, veri tabanın daha az kullanılması sağlanmış olunur.

Anket cevapları gönderimi yapıldığında ArcGIS Portal’da bir web map içerisinde kullanımı da sağlanmıştır. Medya dosyalarınız bir sunucuda bulunmasına karşın, web map içerisinde görüntülenebilmektedir. Aşağıdaki örnekte ilk gösterimi yapılan kayıta ait medya dosyası veri tabanında tutulduğundan ‘attachment’ bilgisi görülmektedir. Ama dosya sunucusuna aktardığımız kayıtlarda ise ‘attachment’ bilgisi bulunmamaktadır yani medya dosyaları veri tabanında değildir.

Hizmetimiz hakkında daha detaylı bilgi için Esri Türkiye Profesyonel Hizmetler birimi ile irtibata geçiniz.

Esri Türkiye 2021

ArcGIS API for JavaScript ile Web Uygulamaları – 9 Efektler

Efektler

Efektler harita üzerinde gösterimi yapılan objelerde görsel olarak daha fazla bilgi aktarımı için kullanılmaktadır. Görsel efektler sayesinde gösterimi yapılan bilgi daha dikkat çekici ve göze hoş görünümü sağlanabilir.

Desteklenen efektler: “bloom”, “blur”, “brightness”, “contrast”, “drop-shadow”, “grayscale”, “hue-rotate”, “invert”, “opacity”, “saturate” ve “sepia”.

Efekt kullanımı tek bir metin olarak belirleyebileceğiniz gibi farklı ölçek değerlerine göre farklı efektler ile filtreleme yapılarak da gerçekleştirilebilmektir.

Metin olarak kullanım durumunda tüm ölçeklerde efekt uygulanır:

layer.effect = "brightness(5) hue-rotate(270deg) contrast(200%)";

Farklı ölçeklerde ve filtre uygulayarak kullanım şekli:

layerView.effect = {
  filter: featureFilter,
  includedEffect: [
    {
    scale: 36978595, // düşük ölçekte
    value: "drop-shadow(3px, 3px, 4px) brightness(400%)",
   },
   {
    scale: 18489297, // orta ölçekte scale
    value: "drop-shadow(2px, 2px, 3px) brightness(200%)",
   },
   {
    scale: 4622324, // geniş ölçekte
    value: "drop-shadow(1px, 1px, 2px)",
   }
  ],
  // tüm ölçeklerde uygulanır
  excludedEffect: "brightness(80%)"
};

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.

Harita üzerinde Türkiye illeri objelerine basıldığında, her basım olayından sonra sadece ilgili basılan objeye efekt uygulanmasını gerçekleştireceğiz.

Resimde görüldüğü gibi her il kendi geometri sınırları doğrultusunda ayrı ayrı görüntülenmektedir.

Uygulayacağımız efekt sayesinde basılan objenin görselini öne çıkarmış oluyoruz efekt kullanılarak.

Efekt kullanımına ait HTML kodu aşağıda belirtilmiştir.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript API Örnekleri: Efektler</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/Graphic",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",
            "esri/renderers/SimpleRenderer",
            "esri/symbols/SimpleFillSymbol",
            "esri/Color",
        ], function (esriConfig, Map, MapView, Graphic, FeatureLayer, GraphicsLayer, SimpleRenderer, SimpleFillSymbol, Color) {
            (async () => {
                esriConfig.apiKey = "XXX"
                let animation;
                const countryGraphicsLayer = new GraphicsLayer({
                    blendMode: "destination-in",
                    effect: "bloom(200%)"
                });
                const symbol = {
                    type: "simple-fill",
                    color: "white",
                    outline: null
                };
                const fLayer = new FeatureLayer({
                    popupEnabled: false,
                    portalItem: {
                        id: "XXX" // Türkiye verisine ait Portal içeriği
                    },
                    outFields: ["OBJECTID"],
                    minScale: 0,
                    maxScale: 0,
                    renderer: new SimpleRenderer({
                        symbol: new SimpleFillSymbol({
                            color: new Color("rgb(255,200,81)"),
                            outline: {
                                style: "solid",
                                width: 1,
                                color: new Color("rgb(249,168,0")
                            }
                        })
                    }),
                    effect: "grayscale(0.3) drop-shadow(0px 7px 20px gray)"
                });
                var map = new Map({
                    basemap:
                    {
                        baseLayers: [
                            fLayer
                        ]
                    },
                });
                var view = new MapView({
                    container: "haritaBlogu",
                    map: map,
                    center: [35, 39], // boylam, enlem
                    zoom: 7
                });
                var layerView = await view.whenLayerView(fLayer);
                view.on("pointer-down", function (event) {
                    const opts = {
                        include: fLayer
                    }
                    view.hitTest(event, opts).then(function (response) {
                        if (response.results.length) {
                            const graphic = response.results[0].graphic;
                            layerView.effect = {
                                filter: {
                                    objectIds: [response.results[0].graphic.attributes.OBJECTID]
                                },
                                includedEffect: [
                                    {
                                        scale: 36978595, // küçük ölçekte
                                        value: "drop-shadow(4px, 4px, 4px) brightness(400%)",
                                    },
                                    {
                                        scale: 18489297, // orta ölçekte
                                        value: "drop-shadow(3px, 3px, 3px) brightness(200%)",
                                    },
                                    {
                                        scale: 4622324, // büyük ölçekte
                                        value: "drop-shadow(2px, 2px, 2px, red)",
                                    }
                                ],
                                // tüm ölçeklerde geçerli
                                excludedEffect: "blur(8px) brightness(1.2) grayscale(0.8)"
                            };
                        }
                    });
                });
            })();
        });
    </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ı – 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