Question

在openlayers中调用iserver发布的内容，地图出不来，只能显示放大缩小按钮。代码如下:

<template>
  <div class="supMap-box">
    <div id="map" style="width: 1000px; height:1000px">
    <!-- <img src="./images/u9.png"> -->
  </div>
  </div>
  
</template>

<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
// import ImageLayer from 'ol/layer/Image';
import { TileSuperMapRest } from '@supermap/iclient-ol';

export default {
  name: "Index",
  data() {
    return {
      map:'',
      SupMap:null
    };
  },
  mounted() {
    this.initMap() 
  },
  methods:{
  initMap(){
    var supermapurl='http://localhost:8090/iserver/services/map-HanJiangLiuYuDiTu-2/rest/maps/%E6%B1%89%E6%B1%9F%E6%B5%81%E5%9F%9F.ol3'

    // var projection=new projection({
    //   code:'EPSG:4490',
    //   units:'m',
    //   axisOrientation: 'enu',
    //   global: false 
    // })
    // addProjection(projection)

    var jcdt=new TileLayer({
          source:new TileSuperMapRest({
          url:supermapurl,
          wrapx:true
        }),
        projection:'EPSG:4326'
      })

    const map=new Map({
        Layers:jcdt,
        target:'map',
        view:new View({
          center:[112.1,32],
          zoom:6,
          projection:'EPSG:4326'
        })
      });

      // window.map = map;
      // this.map = map;
  }
  }
};
</script>

<style scoped lang="scss">

</style>

Answer 1

您好，
1、非响应式命名错误：在你的 initMap 方法中，你将图层对象命名为 jcdt，然后将其作为 Layers 属性传递给地图。然而，在 OpenLayers中，正确的属性名称应该是 layers，请将 Layers 改为 layers，并将jcdt包装在一个图层组中 layers: [jcdt]

2、 确保正确引入了 OpenLayers 库；

3、 确保 iServer 服务可用，在iServer是否可预览地图；

4、 通过浏览器开发者工具检查是否有报错信息。

希望能够帮助到您！

Comments

改为layers之后又报错了

---

这个把layers改为数组模式也已经解决了