OpenLayers显示本地图片

Posted 2023-05-05

我已经做好了四个级别的瓦片，怎么能够利用OpenLayers将这些图片显示出来呢？请问高手，能不能附上一些简单的代码。本人这方面懂的不是很多，请教高手……

你去看看OpenLayers的API，有OpenLayers. Layer. Image这个接口，
http://dev.openlayers.org/docs/files/OpenLayers/Layer/Image-js.html这个是API 的地址，当然你还可以看看它的examples，地址是：http://openlayers.org/dev/examples/ 参考技术A 我我我

Geoserver 2.10 Openlayers 3 TextSymbolizer 标签未显示

【中文标题】Geoserver 2.10 Openlayers 3 TextSymbolizer 标签未显示

【英文标题】：Geoserver 2.10 Openlayers 3 TextSymbolizer label not showing up

【发布时间】：2017-02-02 20:26:03

【问题描述】：

我是 geoserver 和 sld 的新手。我的 OSM 基础层之上有 2 层。一个用于创建热图，一个仅用于标签。我的热图和基础层渲染良好，但标签文本未显示在 openlayers 中。当我在 geoserver 中预览它时，它显示得很好，但是当我尝试在 javascript 中渲染它时，它只在缩小时显示。我似乎无法在网上找到有关此问题的任何信息。

这是 SLD：

   <FeatureTypeStyle>
        <Rule>
          <Name>AQI text</Name>
          <Title>AQI Text</Title>
          <Abstract>AQI information</Abstract>
           <TextSymbolizer>
              <label>
                  <ogc:PropertyName>aqi</ogc:PropertyName>
            </label>
         </TextSymbolizer> 
        </Rule>
      </FeatureTypeStyle>

这是geoserver上预览的快照：

这是 javascript openlayers 代码：

var londonLonLat = [-0.118092, 51.509865];
    var londonWebMercator = ol.proj.fromLonLat(londonLonLat);

    var layers = [
        new ol.layer.Tile(
          source: new ol.source.OSM()
        ),
        new ol.layer.Image(
          //extent: [-13884991, 2870341, -7455066, 6338219],
          source: new ol.source.ImageWMS(
            url: 'http://159.203.81.20:8080/geoserver/wms',
            params: 'LAYERS': 'tiger:shapefile',
            serverType: 'geoserver'
          )
        ),

        new ol.layer.Image(
          //extent: [-13884991, 2870341, -7455066, 6338219],
          source: new ol.source.ImageWMS(
            url: 'http://159.203.81.20:8080/geoserver/wms',
            params: 'LAYERS': 'test2:test_text_layer',
            serverType: 'geoserver'
          )
        )
      ];
      var map = new ol.Map(
        layers: layers,
        target: 'map',
        view: new ol.View(
          center: londonWebMercator,
          zoom: 10
        )
      );

这是页面的快照：

这是缩小的快照：

【问题讨论】：

嘿@Wiredo，愿意在这里接受一个答案吗？ :)

好的。实际上，我想出了其他确实解决了问题的答案，但选择了您的答案，因为您有替代且更详细的解决方案

【参考方案1】：

通过将预定义的边界点（如锚点）添加到我的数据库中，然后将这些点作为我的边界框输入到 geoserver 中，解决了类似的问题：

创建 4 个点（例如：北、南、东、西），这将定义一个足够大的框，以容纳所有数据的可视化。 在 geoadmin 中找到您的图层 bounding box 并选择从数据中计算。 在您的sld 中，您可以定义一个规则以使这些边界点不可见。

这会重新计算地理服务器在任何投影中显示您的数据的边界框。

【参考方案2】：

通过改变投影来修复它：