Question

我在idesktop中将制作的电子地图发布在iserver中，电子地图在iserver中预览正常，但是我叠加到L.map的地图上时有些图层的加载或者显示和iserver中预览的不一样，不知道是不是我在设置L.map()的参数时坐标设置的有问题

<template>
  <div id="map"></div>
</template>

<script>
import L from 'leaflet';
import {TiandituTileLayer} from '@supermap/iclient-leaflet';
import {TiledMapLayer} from '@supermap/iclient-leaflet';

export default {
  name: "Map",
  data() {
    return {
      baseMap: null,
      key: 'eb477c648cfba43e1d54b4d4375839fb',
      siChuanMapUrl: "http://localhost:8090/iserver/services/map-SiChuan/rest/maps/SiChuanMap",
      siChuanMap: null,
    }
  },
  components: {},
  mounted() {
    // 组件挂载后初始化地图
    this.initMap();
    // 绑定底图图层切换事件
    this.baseMap.on('baselayerchange', this.addSiChuanMap);
  },
  destroyed() {
    this.baseMap = null;
  },
  methods: {
    initMap: function () {
      let vec = new TiandituTileLayer({
        key: this.key,
        noWrap: true
      });
      let img = new TiandituTileLayer({
        key: this.key,
        layerType: 'img',
        noWrap: true
      });
      let ter = new TiandituTileLayer({
        key: this.key,
        layerType: 'ter',
        noWrap: true
      });
      // 创建地图对象
      this.baseMap = L.map('map', {
        crs: L.CRS.EPSG4326,
        center: [30.67, 104.07],
        maxZoom: 13,
        zoom: 6,
        layers: [vec],
        zoomControl: false
      });
      // 将底图对象暴露到全局供其他组件使用
      window.baseMap = this.baseMap;
      this.addSiChuanMap();
      // 添加缩放控价
      let zoomControl = L.control.zoom({position: 'bottomleft'});
      zoomControl.addTo(this.baseMap);
      // 添加图层切换控件
      let baseMaps = {'矢量底图': vec, '影像底图': img, '地形晕渲': ter};
      let overlays  = {};
      let layerChangeControl = L.control.layers(baseMaps, overlays, {position: 'bottomleft'})
      layerChangeControl.addTo(this.baseMap);
    },
    addSiChuanMap: function () {
      // 切换底图图层时先移除上一次的siChuanMap
      if (this.siChuanMap) {
        this.baseMap.removeLayer(this.siChuanMap);
      }
      this.siChuanMap = new TiledMapLayer(this.siChuanMapUrl, {
        opacity: 1,
        noWrap: true
      });
      // 设置图层显示顺序
      this.siChuanMap.setZIndex(4);
      // 叠加四川省电子地图
      this.siChuanMap.addTo(this.baseMap);
    }
  }
}
</script>

<style scoped>
#map {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  cursor: pointer;
}
</style>

Answer 1

您好，您的电子地图在前端显示具体有什么不一样？您的电子地图的坐标系是什么？前端单独加载电子地图是否会出现不一样？

Comments

就是有些图层没有显示出来，电子地图的坐标是EPSGCode4326,前端单独加载时最开始的两个缩放等级里边的图层有些也加载不出来，但是后边的就正常了

---

这是iserver中预览的效果
但是项目中标注图层却没有正确加载出来

---

客户数据可以重新问题，绕行方案是：对地图切瓦片，iServer发布瓦片服务。