时间戳

首页 > 解决方案 > Azure Maps - 不同图层合并的填充颜色颜色属性

azure-maps - Azure Maps - 不同图层合并的填充颜色颜色属性

问题描述

加载多个图层时，fillColor 的属性 color 正在与另一个图层的 fillColor 合并。即，如果一个为红色，另一个为蓝色，则两个图层都在地图上显示为紫色。

以下是导致该问题的代码：

        //Wait until the map resources are ready.
        map.events.add('ready', function () {
            //Create a data source and add it to the map.
            datasource = new atlas.source.DataSource();
            map.sources.add(datasource);

            //Add a simple data layer for rendering the data.
            var polygonLayer = new atlas.layer.PolygonLayer(datasource, null, {
                fillColor: 'red',
                fillOpacity: 0.2,
            });


            //Add a simple data layer for rendering the data.
            var polygonLayer2 = new atlas.layer.PolygonLayer(datasource, null, {
                fillColor: 'blue',
                fillOpacity: 0.2,
            });


            //Add a simple data layer for rendering the data.
            var lineLayer = new atlas.layer.LineLayer(datasource, null, {
                strokeColor: 'black',
            });

            map.layers.add([polygonLayer, polygonLayer2, lineLayer]);


            //Read a KML file from a URL or pass in a raw KML string.
            atlas.io.read(window.location.origin + '/data/TOC_WGS_KML.kml').then(r => {
                if (r) {
                    //Add the feature data to the data source.
                    datasource.add(r);

                }
            });

            //Read a KML file from a URL or pass in a raw KML string.
            atlas.io.read(window.location.origin + '/data/OZLA.kml').then(r => {
                if (r) {
                    //Add the feature data to the data source.
                    datasource.add(r);

                }
            });

            //Read a KML file from a URL or pass in a raw KML string.
            atlas.io.read(window.location.origin + '/data/Test-Parcels.kml').then(r => {
                if (r) {
                    //Add the feature data to the data source.
                    datasource.add(r);

                }
            });


        });

标签： azure-maps

解决方案

这是可以预料的。您有两个多边形图层，使用半透明颜色渲染完全相同的数据（两次）。

如果您想以不同的方式呈现其中一个文件中的数据，您可以使用数据驱动的样式表达式来查看形状的属性以确定要使用的颜色，或者您可以使用两个数据源，每个有自己的多边形层。也就是说，如果多边形是半透明的并且重叠，您将看到颜色仍然合并。

推荐阅读