ArcGIS API for JavaScript ile Web Uygulamaları – 9 Efektler

04/10/2021
| Alperen Çağrı Işıkkaya |
Teknik

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

Önceki Yazı
Portal for ArcGIS Güvenlik Güncellemesi 2021 1 Yaması
Yazıyı görüntüle
Sonraki Yazı
ArcGIS Server Security 2021 Güncelleme 2 Yaması
Yazıyı görüntüle

En Çok Okunanlar