时间戳

首页 > 解决方案 > Azure Maps - 如何将地图线图层置于编辑模式？

azure-maps - Azure Maps - 如何将地图线图层置于编辑模式？

问题描述

我创建了一个线层并将其添加到地图中。

但是我需要将此线图层置于编辑模式，用户可以拉伸和操作线，或者我添加到地图中的任何形状。

我可以在 MS Docs 中找到的唯一参考是如何将“形状”置于编辑模式，但这似乎无关紧要，在尝试了他们的示例之后，对我来说没有任何用处。

//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);

//Create a line and add it to the data source.
dataSource.add(new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]));
  
//Create a line layer to render the line to the map.
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
    strokeColor: 'blue',
    strokeWidth: 5
}));

在此处输入图像描述

上面的代码创建了这条线，将它渲染到地图上，但是当点击/悬停在这条线上我无法选择它来编辑它时，确实需要一些帮助来解决缺少的代码来做到这一点。谢谢

标签： azure-maps

解决方案

我认为您需要为此使用绘图模块。它允许您通过将模式设置为来创建DrawingManager编辑形状edit-geometry。

我对您的示例进行了一些LineString修改，以便在地图准备好时自动将其置于编辑状态。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>AzureMaps</title>

    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css"
        type="text/css" />
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css"
        type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    <script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>

    <script type='text/javascript'>

        function GetMap() {
            //Initialize a map instance.
            const map = new atlas.Map('myMap', {
                view: 'Auto',
                center: [-73.972340, 40.743270],
                zoom: 13,

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<enter-your-subscription-key>'
                }
            });

            map.events.add('ready', () => {
                //Create a data source and add it to the map.
                var dataSource = new atlas.source.DataSource();
                map.sources.add(dataSource);

                const lineString = new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]);

                //Create a line and add it to the data source.
                dataSource.add(lineString);
                const lineStringShape = dataSource.getShapes()[0];

                //Create a line layer to render the line to the map.
                map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
                    strokeColor: 'blue',
                    strokeWidth: 5
                }));

                var drawingManager = new atlas.drawing.DrawingManager(map, {
                    mode: 'edit-geometry'
                });

                drawingManager.edit(lineStringShape);
            });
        }
    </script>
</head>

<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>

</html>

编辑模式下的 LineString

重要的是，您需要参考 atlas-drawing 脚本和样式：

<script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css"
        type="text/css" />

您可以在此处找到有关绘图管理器的更多信息。

编辑 - 仅更改颜色和宽度

如果您只想更改线串的 thestrokeColor和 the strokeWidth，则实际上不需要绘图管理器。我建议在您的线层上设置表达式，strokeColor以strokeWidth从每个形状的属性中读取值。

以下示例显示两个具有不同宽度和颜色的线串：

 //Initialize a map instance.
            const map = new atlas.Map('myMap', {
                view: 'Auto',
                center: [-73.972340, 40.743270],
                zoom: 13,

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<enter-your-subscription-key>'
                }
            });

            map.events.add('ready', () => {
                //Create a data source and add it to the map.
                const dataSource = new atlas.source.DataSource();
                map.sources.add(dataSource);

                const firstLineString = new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]);
                const secondLineString = new atlas.data.LineString([[-73.972340, 40.733270], [-74.004420, 40.746800]]);

                //Create a line and add it to the data source.
                dataSource.add(firstLineString);
                dataSource.add(secondLineString);

                //Add properties on the shapes
                const shapes = dataSource.getShapes()
                const firstLineStringShape = shapes[0];
                firstLineStringShape.addProperty('color', '#ed5a10');
                firstLineStringShape.addProperty('strokeWidth', 10);

                const secondLineStringShape = shapes[1];
                secondLineStringShape.addProperty('color', '#0e41ea');
                secondLineStringShape.addProperty('strokeWidth', 5);

                //Create a line layer to render the line to the map.
                //strokeColor and strokeWidth are defined on the properties of each line string
                map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
                    strokeColor: ['get', 'color'],
                    strokeWidth: ['get', 'strokeWidth']
                }));
            });

为方便起见，在此示例中地图准备就绪时仍会执行此操作，但您可以在需要更新形状时设置形状的属性，addProperty如果您的属性从未设置，或者和 的getProperties组合setProperties。

您可以在此处找到有关数据驱动表达式的更多信息：https ://docs.microsoft.com/en-us/azure/azure-maps/data-driven-style-expressions-web-sdk

推荐阅读