Question

import L from 'leaflet'
import * as SuperMap from '@supermap/iclient-leaflet'

var url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
  crs: L.CRS.EPSG4326,
  center: L.latLng(30.9056, 121.5689),//[30.9056, 121.5689],
  maxZoom: 18,
  zoom: 1
});
L.supermap.tiledMapLayer(url).addTo(map);

出现  Cannot read property 'lat' of undefined 错误提示

Answer 1

您好，您可以参考一下

http://iclient.supermap.io/web/introduction/leafletDevelop.html

leaflet的开发者指南中ES6部分的全模块引入的写法。

然后再麻烦您把您的完整代码给我发一份我这边也看一下问题的原因。

Comments

我开始就是参照这上面的例子写的 但是还是同样的问题，感觉好像是leaflet.js问题

代码其实跟例子是一样的。

// import NetworkManager from '@/api/NetworkManager'
   import L from 'leaflet'
   import * as SuperMap from '@supermap/iclient-leaflet'
    L.supermap = SuperMap
 // import {tiledMapLayer}  from '@supermap/iclient-leaflet'
  export default {
    name: 'airMap',
    components: {},
    props: {
     // mapInfo: Array
    },
    created() {
      console.log('tab1')
    },
    mounted() {
      this.initMap()
     // this.loadAirData()
    },
    data() {
      return {
        map: Object,
        stationLayerGroup:Object,
        vectorLayer:{},
        selectC :{},
        mapInfo:[]
      }
    },   

initMap: function () {
   /*     let map = L.map('map',{attributionControl:false}).setView([30.9056, 121.5689], 12)
        let tileAddress = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
        L.tileLayer(tileAddress, {
          maxZoom: 18,
          id: 'mapbox.streets'
        }).addTo(map);*/
     //   console.log(   L.supermap.echartsLayer())
        var url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
        var map = L.map('map', {
          crs: L.CRS.EPSG4326,
          center: L.latLng(30.9056, 121.5689),//[30.9056, 121.5689],
          maxZoom: 18,
          zoom: 1
        });
        L.supermap.tiledMapLayer(url).addTo(map);
     /*   var map = L.map('map', {
          center: [30.9056, 121.5689],
          zoom: 6,
          crs: L.CRS.EPSG4326,
          attributionControl:false
        });
        L.supermap.tiandituTileLayer().addTo(map);
        L.supermap.tiandituTileLayer({
          isLabel:true
        }).addTo(map);*/
        this.map = map;
       this.loadAirData()
      },

Answer 2

建议 webpack 的source-map 开启 inline-map   调试定位到具体报错的行数

Comments

不是已经有报错在哪一行吗

---

我和他遇到了同样的问题，该如何解决

---

import L from 'leaflet'

import {tiledMapLayer} from '@supermap/iclient-leaflet'

mounted() {

this.initMap();

}

initMap(){

var url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";

var map = L.map('map', {

crs: L.CRS.EPSG4326,

center:L.LatLng[0,0],

maxZoom: 18,

zoom: 1

});

console.log(map);

alert(map);

tiledMapLayer(url).addTo(map);

}

这次不报错了，但是加载不出来相关的地图

---

我这样写也会出现那种错误，一直找不到解决方法。

---

我也是卡在这里

Answer 3

您好，您后来找到解决办法没，我也遇到相同的问题

Answer 4

我是这么解决的：

1. 删除 node_modules 文件夹
2. 运行 npm install

再编译。

我的代码如下：

// src/index.js

import L from 'leaflet';
import * as SuperMap from '@supermap/iclient-leaflet';

L.supermap = SuperMap;

window.onload = function () {
    var url = "http://localhost:8090/iserver/services/map-world/rest/maps/World";
    var map = L.map('map', {
        crs: L.CRS.EPSG4326,
        center: [0, 0],
        maxZoom: 18,
        zoom: 1
    });

    console.log(SuperMap);
    L.supermap.tiledMapLayer(url).addTo(map);

}

---

// package.json 依赖片段

  "dependencies": {
    "@supermap/iclient-leaflet": "^9.1.1",
    "leaflet": "^1.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }

Answer 5

请问解决这个问题了吗，我也遇到了这个问题

Answer 6

和你遇到一样的问题，我的代码如下：

var div = document.createElement('div');
div.id = 'map';

div.style.height = '100%';
div.style.width = '100%';

document.body.appendChild(div);


import L from 'leaflet';
import { tiledMapLayer } from '@supermap/iclient-leaflet';

var url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
    crs: L.CRS.EPSG4326,
    center: [0, 0],
    maxZoom: 18,
    zoom: 1
});
tiledMapLayer(url).addTo(map);

错误提示一样，错误文件：webpack:///./node_modules/leaflet/dist/leaflet-src.js

Comments

我这边遇到同样的问题，更新依赖@supermap/iclient-leaflet": "^9.1.0-beta重新安装就好了

---

这个好像不行吧，兄弟