首页 / 浏览问题 / WebGIS / 问题详情
参考https://iclient.supermap.io/11.1.1/examples/leaflet/examples.html#iServer中的地图叠加,用vue3写的,用鼠标滚动放大缩小后报错
5EXP 2024年08月02日

如下图,最后附上复制的代码

<template>

  <div id="map" style="margin:0 auto;width: 100%;height: 100%;"></div>

</template>

<script>

import {onMounted} from '@vue/runtime-core'

export default {

  name: 'App',

  setup(){

    let L=window.L

    let urlWorld='https://iserver.supermap.io/iserver/services/map-world/rest/maps/World',urlJinjing='https://iserver.supermap.io/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图'

    //方式一:1.调用L.supermap.initMap,根据SuperMap iServer地图服务的地图信息,创建地图和地图

    //2.调用L.supermap.TiledMapLayer创建叠加图层

    // onMounted(()=>{

    //   L.supermap.initMap(urlWorld,{mapOptions:{

    //     center:[40,118],

    //     zoom:7

    //   }}).then(({map})=>{

    //     new L.supermap.TiledMapLayer(urlJinjing,{

    //       transparent:true,

    //       opacity:0.6

    //     }).addTo(map)

    //   })

    // })

    //方式二:1.调用L.supermap.MapService,获取SuperMap iServer地图服务的地图信息

    //2.调用L.supermap.crsFromMapJSON创建CRS

    //3.调用L.map创建地图

    //4.调用L.supermap.TiledMapLayer创建底图和叠加图层

    onMounted(()=>{

      new L.supermap.MapService(urlWorld).getMapInfo().then((res)=>{

      var crs=L.supermap.crsFromMapJSON(res.result);

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

        crs:crs,

        center:[40,118],

        maxZoom:18,

        minZoom:1,

        zoom:7

      });

      new L.supermap.TiledMapLayer(urlWorld).addTo(map);

      new L.supermap.TiledMapLayer(urlJinjing,{

        transparent:true,

        opacity:0.6,

      }).addTo(map);

    })

    })

  }

}

</script>

1个回答

您好,您用这种方式加载地图看是否会报错:

var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var map, urlWorld = host + "/iserver/services/map-world/rest/maps/World",
        urlJinjing = host + "/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图";
    map = L.map('map', {
        crs: L.CRS.EPSG4326,
        center: [40, 118],
        maxZoom: 18,
        zoom: 6
    });

    new L.supermap.TiledMapLayer(urlWorld).addTo(map);
    new L.supermap.TiledMapLayer(urlJinjing, {
        transparent: true,
        opacity: 0.6
    }).addTo(map);
936EXP 2024年08月05日
没有报错,感谢

请问为什么换成本地发布的地图url就不行了,在本地浏览器直接输入是可以打开的

有时间能看看我上一个评论吗?评论位置点错了
看您最上面一张截图,使用的url有一点问题,没有“.leaflet”

非常感谢,能正常显示了,也不报错了

...