Question

我在Geoserver（2.13.0）上有使用MSSQL DataStore配置的图层。我为相同版本安装了矢量切片扩展名。安装后，将显示从下拉结果中选择的TileLayers pbf预览。

xmlns:input="clr-namespace:System.Windows.Input;assembly=System"

...

<UserControl.Resources>
    <ResourceDictionary>
        <input:ICommand x:Key="propertyChangedEvent">
             "{Binding PropertyChangedEvent}"
        </input:ICommand>
    </ResourceDictionary>
</UserControl.Resources>

...

<DataGridTemplateColumn Header="Notes" MinWidth="350" Width="*" IsReadOnly="False">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <StackPanel Margin="1">
                <TextBox Text="{Binding Notes, UpdateSourceTrigger=LostFocus}" BorderThickness="0" AcceptsReturn="True" TextWrapping="Wrap" >
                    <i:Interaction.Triggers >
                        <i:EventTrigger EventName="TextChanged">
                            <i:InvokeCommandAction  Command="{StaticResource propertyChangedEvent}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </TextBox>
            </StackPanel>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

并且在来自OpenLayers客户端的请求到达时，同样的结果。

http://localhost:8080/geoserver/gwc/demo/mystate:State?gridSet=EPSG:900913&format=application/x-protobuf;type=mapbox-vector

但是在同一示例中，我想使用GetTile为wmts应用样式。我根据documentation尝试过以下是无效的代码：

<html>
<head>
    <title>Vector tiles</title>

    <script src="./js/build-ol.js"></script>
    <link rel="stylesheet" href="./css/ol.css">
    <style>
        html,
        body {
            font-family: sans-serif;
            width: 100%;
        }

        .map {
            height: 500px;
            width: 100%;
        }
    </style>
</head>

<body>
    <h3>Mapbox Protobuf - vector tiles</h3>
    <div id="map" class="map"></div>
    <script>


        var gridsetName = 'EPSG:900913';
        var gridNames = ['EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2', 'EPSG:900913:3', 'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6', 'EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10', 'EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14', 'EPSG:900913:15', 'EPSG:900913:16', 'EPSG:900913:17', 'EPSG:900913:18', 'EPSG:900913:19', 'EPSG:900913:20'];
        var baseUrl = 'http://localhost:8080/geoserver/gwc/service/wmts';
        var style = 'StateStyle';
        var format = 'application/x-protobuf;type=mapbox-vector';
        var infoFormat = 'text/html';
        var layerName = 'myState:State';
        var projection = new ol.proj.Projection({
            code: 'EPSG:900913',
            units: 'm',
            axisOrientation: 'neu'
        });
        var resolutions = [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135, 0.29858214169740677, 0.14929107084870338];
        params = {
            'REQUEST': 'GetTile',
            'SERVICE': 'WMTS',
            'VERSION': '1.0.0',
            'LAYER': layerName,
            'STYLE': style,
            'TILEMATRIX': gridsetName + ':{z}',
            'TILEMATRIXSET': gridsetName,
            'FORMAT': format,
            'TILECOL': '{x}',
            'TILEROW': '{y}'
        };

        function constructSource() {
            var url = baseUrl + '?'
            for (var param in params) {
                url = url + param + '=' + params[param] + '&';
            }
            url = url.slice(0, -1);

            var source = new ol.source.VectorTile({
                url: url,
                format: new ol.format.MVT({}),
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    tileSize: [256, 256],
                    origin: [-2.003750834E7, 2.003750834E7],
                    resolutions: resolutions,
                    matrixIds: gridNames
                }),
                wrapX: true,              
            });
            return source;
        }

        var layer = new ol.layer.VectorTile({
            source: constructSource()
        });

        var view = new ol.View({
            center: [0, 0],
            zoom: 2,
            projection: projection,
            extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34]
        });

        var map = new ol.Map({
            layers: [layer],
            target: 'map',
            view: view
        });
        map.getView().fit([-13603589.920418553, 6450443.998733485, -12407892.278044553, 7757990.05940472], map.getSize());

    </script>
</body>

</html>

您能否建议我如何使用ol.format.MVT（）从GeoServer应用自定义样式和getTile？

Answer 1

我认为您正面临投影问题。我也面临同样的问题。我通过更改视图来解决。

您可以尝试以下方法：

    var map = new ol.Map({
       target: 'map',
       view: new ol.View({
       center: ol.proj.fromLonLat([89.5403, 22.8456]), ## change the long/lat values based on your data
       zoom: 2
    }),

矢量图块：来自Geoserver的带有Openalyer v5.3.0的GetTile WMTS ol.format.MVT（）

1 个答案: