Question

使用产品：iserver 10.2.1

操作系统：win11 x64

数据类型： 文件型

问题详细描述：supermap+vue-leaflet加载大地坐标系GCS_China_Geodetic_Coordinate_System_2000地图，加载不出来

代码： 

<sm-web-map :map-options="mapOptions">
   <sm-tile-layer :url="url"></sm-tile-layer>
</sm-web-map>

url: "http://111.39.31.82:8800/portalproxy/54di5l17/iserver/services/map-ugcv5-NGDT0310/rest/maps/NGDT0310",
      mapOptions: {
        center: [118.98349, 30.6238], // starting position
        zoom: 7, // starting zoom
      },

图片：

第一次使用，不知道哪里有问题，希望技术大佬帮忙回答一下，谢谢了

Answer 1

您好！参考代码：

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

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

export default {
  name: 'AddMap',
  data() {
    return {
      map: {},
      mapUrl: 'http://111.39.31.82:8800/portalproxy/54di5l17/iserver/services/map-ugcv5-NGDT0310/rest/maps/NGDT0310'
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.map = L.map('map', {
        crs: L.CRS.EPSG4326,
        center: [30.61, 118.98],
        maxZoom: 18,
        zoom: 7
      })
      new TiledMapLayer(this.mapUrl).addTo(this.map)
    }
  }
}
</script>

<style>
#map {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

加载效果：

希望可以帮助到您！

Comments

您好，我按照上面的写，发现报错了，第二张图是我安装的，不知道哪里有问题，希望帮忙看看

---

你代码截图我看看呢

---

我把插件换成版本10的，现在不报错了，但还是不显示

<template>
  <el-row class="index">
    <!-- @load="mapLoaded" -->
    <div id="map"></div>
  </el-row>
</template>
<script>
import L from "leaflet";
import { TiledMapLayer } from "@supermap/iclient-leaflet";

export default {
  data() {
    return {
      map: {},
      mapUrl:
        "http://111.39.31.82:8800/portalproxy/54di5l17/iserver/services/map-ugcv5-NGDT0310/rest/maps/NGDT0310",
    };
  },
  methods: {
    init() {
      this.map = L.map("map", {
        crs: L.CRS.EPSG4326,
        center: [118.98349, 30.6238],
        maxZoom: 18,
        zoom: 7,
      });
      new TiledMapLayer(this.mapUrl).addTo(this.map);
    },
  },
  mounted() {
    this.init();
  },
  created() {},
};
</script>

---

控制台看一下网络中请求到的瓦片是白图，还是没请求到呢

---

没请求到，为啥没请求到咧

---

现在可以了，我center属性里面的值写反了