Open11日前にコメント追加6

ゴミ出しカレンダー

中腰 14日前に更新

ゴミ出しカレンダー作成記事を書いたが、とん挫した。（記事は非公開にしました）

原因は、都道府県、市区町村、地域別に切り分け作業をやっていたら、
地域別 ≒ 町内会
という怪しい部分が出てきた。

可燃は地域（町内会）別、不燃は市区町村別などがあり、
地方になると町内会がどの市区町村をカバーしているか、ネットに情報がない。。

中腰 14日前

というわけで、まずは町内会エリアマップを作る。

中腰 13日前に更新

日本の地図データのgeojsonをWASMで読ませたら、まったく帰ってこなかった。

呼び出し.razor

var geojson = await Http.GetFromJsonAsync<RootObject>("sample-data/N03-23_42_230101.geojson");

モデル.cs

    public class RootObject
    {
        public string type { get; set; }
        public string name { get; set; }
        public Crs crs { get; set; }
        public Feature[] features { get; set; }
    }

    public class Crs
    {
        public string type { get; set; }
        public Properties properties { get; set; }
    }

    public class Feature
    {
        public string type { get; set; }
        public Properties properties { get; set; }
        public Geometry geometry { get; set; }
    }

    public class Geometry
    {
        public string type { get; set; }
        public List<List<List<double>>> coordinates { get; set; }
    }

    public class Properties
    {
        public string name { get; set; }
        public string N03_001 { get; set; }
        public object N03_002 { get; set; }
        public object N03_003 { get; set; }
        public string N03_004 { get; set; }
        public string N03_007 { get; set; }
    }

中腰 12日前に更新

LeafletForBlazorは機能は充実してそうだが、激重だったのとserverでは使えなかった。
BlazorLeafletはサクサク動くのでコチラを使用する。

＜追加機能１＞
Geojsonで取り込んだ領域の選択色を変更したいので、styleを追加する。

変更点
・GeoJsonDataLayerにStyleを追加する。

GeoJsonDataLayer.cs

namespace BlazorLeaflet.Models
{
    public class GeoJsonDataLayer : InteractiveLayer
    {
        public string GeoJsonData { get; set; }
        public OptionStyle Style { get; set; }  // Add
    }
}

・OptionStyleクラスを新設する。既にあるPathクラスを使いたかったが、js修正が面倒なので断念。

OptionStyle.cs

namespace BlazorLeaflet.Models
{
    public class OptionStyle
    {
        public string Color { get; set; } 
        public int Weight { get; set; } 
        public double Opacity { get; set; } 
        public string FillColor { get; set; } 
        public double FillOpacity { get; set; }
    }
}

・addGeoJsonLayerメソッドのオプションにstyleを追加する。

leafletBlazorInterops.js

    addGeoJsonLayer: function (mapId, geodata, objectReference) {
        const geoDataObject = JSON.parse(geodata.geoJsonData);
        var options = {
            ...createInteractiveLayer(geodata),
            style: createStyle(geodata.style),　　// Add
            title: geodata.title,
            bubblingMouseEvents: geodata.isBubblingMouseEvents,
            onEachFeature: function onEachFeature(feature, layer) {
                connectInteractionEvents(layer, objectReference);
            }
        };

    function createStyle(path) {  // Add
        return {
            color: path.color,
            weight: path.weight,
            opacity: path.opacity,
            fillColor: path.fillColor,
            fillOpacity: path.fillOpacity
        };
    }

・呼び出し部分の修正

index.razor

    private Dictionary<string, GeoJsonDataLayer> layers = new Dictionary<string, GeoJsonDataLayer>();
    private static string INPUT_GEOJSON = "";
    protected override void OnInitialized()
    {
        INPUT_GEOJSON = File.ReadAllText(@"c:\geojson\xxxxxx.geojson");

        _map = new Map(jsRuntime)
            {
                Center = _startAt,
                Zoom = MapZoom
            };

        _map.OnInitialized += () =>
        {
            _map.AddLayer(new TileLayer
                {
                    UrlTemplate = "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
                    Attribution = "© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
                });

            if (!layers.ContainsKey("input-data"))
            {
                GeoJsonDataLayer? geodata = new GeoJsonDataLayer()
                    {
                        GeoJsonData = NAGASAKI_GEOJSON,
                        IsInteractive = true
                    };
                geodata.Style = new OptionStyle()
                    {
                        Color = "#1C1678",
                        Weight = 5,
                        Opacity = 1,
                        FillColor = "#7BC9FF",
                        FillOpacity = 0.3
                    };
                _map.AddLayer(geodata);
                layers.Add("input-data", geodata);
            }

        };
    }

    protected void InteractiveLayer_OnClick(InteractiveLayer sender, BlazorLeaflet.Models.Events.MouseEvent e)
    {
        if (layers.ContainsKey("click"))
        {
            _map.RemoveLayer(layers["click"]);
            layers.Remove("click");
        }
        else
        {
            GeoJsonDataLayer? geodata = new GeoJsonDataLayer()
                {
                    GeoJsonData = INPUT_GEOJSON,
                    IsInteractive = true

                };
            geodata.OnClick += InteractiveLayer_OnClick;
            geodata.Style = new OptionStyle()
                {
                    Color = "#41B06E",
                    Weight = 5,
                    Opacity = 0.5,
                    FillColor = "#8DECB4",
                    FillOpacity = 0.8
                };
            _map.AddLayer(geodata);
            layers.Add("click", geodata);
        }
    }