javascript azure贴图勾勒出多边形挤出或添加线挤出层以突出显示形状的轮廓

xoefb8l8  于 2023-11-15  发布在  Java
关注(0)|答案(1)|浏览(128)

我目前正在尝试创建一个Map工具，为建筑物在azureMap，为了给予一些3D样式，我想添加一个多边形挤出层，并根据您正在查看的楼层增加多边形的高度。然而，这使得更难看到不同房间的轮廓。我想有一个类似“线挤出层”的东西或者一个选项来突出边缘的挤压多边形，甚至能够删除顶部的挤压将是受欢迎的。你们有什么想法，我可以做到这一点？有没有可能把线层顶部的挤压？而不是在Map本身？
我已经花了很多时间寻找不同的选择，但还没有找到任何接近我所寻找的。我只是想有一个黑色的线运行沿着边缘我的挤出

JavaScript

1条答案

按热度按时间
nxowjjhe

nxowjjhe1#

不幸的是，没有一个线挤出层。Azure Maps围绕MapLibre创建了一个API Package 器，以使开发人员更友好的API更快地开发，也使几件事变得更容易。
然而，有几种方法可以改善您的场景。

选项1：每层多边形挤出

使用多边形挤出层的底部和高度属性来创建每个楼层的切片。这应该在每个楼层之间创建接缝/线，并且还允许您使用事件来选择和突出显示各个楼层。要实现此目的，您可以为每个楼层创建多边形，并根据楼层编号为其分配底部/高度，或者，您可以为每个楼层创建一个层，并在数据源中重用相同的多边形。使用层方法将更具可扩展性，因为您的应用程序将使用更少的数据。如果楼层高度不变，事情可能会更容易一些。如果我们假设你有一个值，指示建筑物的楼层数，那么你可以在每个层上使用一个过滤器来确定是否应该为该多边形创建一个楼层。这可能看起来像这样：
x1c 0d1x的数据
下面是一些示例源代码。你也可以在这里尝试：https://rbrundritt.azurewebsites.net/Demos/AzureMaps/BuildingFloors/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script>
        var map, datasource;

        //The colors to use for each floor.
        var colorScale = {
            1: '#09e076',
            2: '#0bbf67',
            3: '#f7e305',
            4: '#f7c707',
            5: '#f78205',
            6: '#f75e05',
            7: '#f72505'
        };

        //The height of a single floor in meters.
        var floorHeight = 4; 

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-122.134183, 47.643853],
                zoom: 14,
                maxPitch: 85,
                style: 'satellite',

                //Pitch the map so that the extrusion of the polygons is visible.
                pitch: 45,

                view: 'Auto',

                //Add authentication details for connecting to Azure Maps.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
                }
            });

            //Create a legend.
            createLegend();

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

                //Load a dataset of polygons that have metadata we can style against.
                datasource.importDataFromUrl('MSFT_Campus_Buildings.geojson');                

                //Create a polygon extrusion layer per floor.
                for(var i = 1; i <= 7; i++) {
                    map.layers.add(new atlas.layer.PolygonExtrusionLayer(datasource, null, {
                        base: floorHeight * (i - 1),
                        height: floorHeight * i,
                        fillColor: colorScale[i],
                        filter: ['>=', ['get', 'floors'], i]
                    }), 'labels');                
                }
            });
        }

        function createLegend() {
            var html = [];

            Object.keys(colorScale).forEach(function (key) {
                html.push('<i style="background:', colorScale[key], '"></i> ', key, '<br/>');
            });

            document.getElementById('legend').innerHTML += html.join('');
        }
    </script>
    <style>
        html, body, #myMap {
            margin: 0;
            padding:0;
            height: 100%;
            width:100%;
        }

        #myMap {
            background: linear-gradient(to bottom, #1e528e 0%,#728a7c 15%,#e9ce5d 100%); /** Give the sky/background some color for when the maps is pitched a lot **/
        }

        #legend {
            position: absolute;
            top: 1px;
            left: 5px;
            font-family: Arial;
            font-size: 12px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 5px;
            padding: 5px;
            line-height: 20px;
        }

            #legend i {
                width: 18px;
                height: 18px;
                float: left;
                margin-right: 8px;
                opacity: 0.7;
            }
    </style>
</head>
<body onload="GetMap()">
    <div id="myMap"></div>

    <div id="legend">Floor<br /></div>
</body>
</html>

字符串
我试着将所有地板的颜色设置为相同的颜色，接缝不是很明显。如果你想让所有地板都是相同的颜色，你可以在每个地板之间添加一个薄层，它有一个单独的颜色，就像这样：


的
下面是上面代码的修改版本，你也可以在这里尝试：https://rbrundritt.azurewebsites.net/Demos/AzureMaps/BuildingFloors/FloorSeperator.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script>
        var map, datasource;

        //The height of a single floor in meters.
        var floorHeight = 3.9;
        var floorSeperatorHeight = 0.1;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-122.134183, 47.643853],
                zoom: 14,
                maxPitch: 85,
                style: 'satellite',

                //Pitch the map so that the extrusion of the polygons is visible.
                pitch: 45,

                view: 'Auto',

                //Add authentication details for connecting to Azure Maps.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
                }
            });

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

                //Load a dataset of polygons that have metadata we can style against.
                datasource.importDataFromUrl('MSFT_Campus_Buildings.geojson');

                //Create a polygon extrusion layer per floor. And a thin layer above the top floor to act as a seperator.
                var floorBase = 0;

                for (var i = 1; i <= 7; i++) {
                    floorBase = (floorHeight + floorSeperatorHeight) * (i - 1);

                    map.layers.add(new atlas.layer.PolygonExtrusionLayer(datasource, null, {
                        base: floorBase,
                        height: floorBase + floorHeight,
                        filter: ['>=', ['get', 'floors'], i]
                    }), 'labels');

                    //Add a layer to render a thin line seperator between each floor. Can skip the top floor by making filter ">" rather than ">="
                    map.layers.add(new atlas.layer.PolygonExtrusionLayer(datasource, null, {
                        base: floorBase + floorHeight,
                        height: floorBase + floorHeight + floorSeperatorHeight,
                        fillColor: 'black',
                        filter: ['>', ['get', 'floors'], i]
                    }), 'labels');
                }
            });
        }
    </script>
    <style>
        html, body, #myMap {
            margin: 0;
            padding:0;
            height: 100%;
            width:100%;
        }

        #myMap {
            background: linear-gradient(to bottom, #1e528e 0%,#728a7c 15%,#e9ce5d 100%); /** Give the sky/background some color for when the maps is pitched a lot **/
        }
    </style>
</head>
<body onload="GetMap()">
    <div id="myMap"></div>
</body>
</html>

型

选项2：集成Deck.gl

Deck.gl 是另一个WebGL渲染层，它支持渲染多边形拉伸和线条，如下所示：https://deck.gl/examples/geojson-layer-polygons。Deck.gl可以通过WebGlLayer与Azure Maps一起使用，如下所示：https://samples.azuremaps.com/?search=deck&sample=deck-gl-custom-webgl-layer这将给予您要查找的行，但会引入Azure Maps API之外的许多新内容，这将使保持一致性变得更加困难。例如，事件的处理方式是不同的，所以你可能会有两种不同类型的事件与你的Map一起使用，这可能会使人们在未来更难维护。我也有一种感觉，这种方法将是一个更复杂的实现。

赞(0）分享  回复(0）举报  2023-11-15
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com