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 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

ArcGIS API for JavaScript ile Web Uygulamaları – 5 Arama Aracı

Bu yazımızda ‘ArcGIS World Geocoding Service’ servisini kullanarak adres arama ve konumdan adres bulma işlemini öğreneceğiz.

‘Search’ (arama) aracı kullanarak uygulamalarınızda dünya üzerinde adres ve yer araması yapabilirsiniz. Bu araç ‘ArcGIS World Geocoding Service’ servisini varsayılan olarak kullanarak arama (coğrafi kodlama -geocoing) gerçekleştirmektedir. Arama işlemi esnasında her karakter girişinde servis size önerileri içeren bir liste sunacaktır, böylelikle en uygun eşleşen seçilebilir. Bununla birlikte servis, girdi olarak verilecek enlem ve boylam bilgisinden ters coğrafi kodlama (reverse geocoding) yaparak adres bilgisi sunar.

Adımlar

  1. ‘ArcGIS API for JavaScript ile Web Uygulamaları – 1’ blog yazımızda kullandığımız HTML sayfasını kullanacağız.
  2. ‘require’ Dojo elementi kısmına kullanacağımız ‘Search’ aracın tanımını yapacağız.

require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search"
], function (Map, MapView, Search) {

  1. Uyglamanın ‘main’ fonksiyonunda bir ‘Search’ aracı oluşturup, kullanılacak ‘view’ tanımlaması yapıyoruz. Sonrasında görünüm içerisine aracamızı nasıl konumlandıracağımızı belirtiyoruz.

// Search aracı
var search = new Search({
view: view,
});

view.ui.add(search, "top-right");

  1. Harita üzerine basıldığında ters coğrafi kodlama yapılması için bir olay oluşturuyoruz. Bu olay sayesinde basılan konumun enlem ve boylam bilgisini ‘evt.mapPoint’ kullanarak elde ediyoruz.

  view.on("click", function (evt) {
search.clear();
view.popup.clear();
if (search.activeSource) {
var geocoder = search.activeSource.locator; // World geocode service
var params = {
location: evt.mapPoint
};
geocoder.locationToAddress(params).then(
function (response) {
// Bulunan adres bilgisini göster
var address = response.address;
showPopup(address, evt.mapPoint);
},
function (err) {
// Konumdan adres bulunamadığında
showPopup("Adres bulunamadı.", evt.mapPoint);
}
);
}
});

Arama aracının kullandığı servis kullanılarak (geocoder), ‘locationToAdress’ fonksiyonuna haritada tıklanan konum parametre olarak belirtildiğinde bir sonuç dönmesini sağlayacağız. Eğer bir cevap gelmiş ise açılır pencere içerisinde gelen bilgi görüntülenecek, hata oluştuysa ‘Adres bulunamadı’ olarak bilgi verilecektir.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript API Örnekleri: Harita Uygulaması</title>
<style>
html, body, #haritaBlogu {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search"
], function (Map, MapView, Search) {
var map = new Map({
basemap: "topo-vector"
}); var view = new MapView({
container: "haritaBlogu",
map: map,
center: [32.8442835, 39.9323346], // boylam, enlem
zoom: 11
});

// Search aracı
var search = new Search({
view: view,
label: "Adres veya yer"
});

view.ui.add(search, "top-right");

view.on("click", function (evt) {
search.clear();
view.popup.clear();
if (search.activeSource) {
var geocoder = search.activeSource.locator; // World geocode service
var params = {
location: evt.mapPoint
};
geocoder.locationToAddress(params).then(
function (response) {
// Bulunan adres bilgisini göster
var address = response.address;
showPopup(address, evt.mapPoint);
},
function (err) {
// Konumdan adres bulunamadığında
showPopup("Adres bulunamadı.", evt.mapPoint);
}
);
}
});

function showPopup(address, pt) {
view.popup.open({
title:
+Math.round(pt.longitude * 100000) / 100000 +
"," +
Math.round(pt.latitude * 100000) / 100000,
content: address,
location: pt
});
}
});
</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.

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