參考https://iclient.supermap.io/11.1.1/examples/leaflet/examples.html#iServer中的(de)地(dì / de)圖疊加，用vue3寫的(de)，用鼠标滾動放大(dà)縮小後報錯

hahaha

4EXP 2024年08月02日

如下圖，最後附上(shàng)複制的(de)代碼

</template>

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/京津地(dì / de)區人(rén)口分布圖_專題圖'

//方式一(yī / yì ／yí)：1.調用L.supermap.initMap,根據SuperMap iServer地(dì / de)圖服務的(de)地(dì / de)圖信息，創建地(dì / de)圖和(hé / huò)地(dì / de)圖

//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地(dì / de)圖服務的(de)地(dì / de)圖信息

//2.調用L.supermap.crsFromMapJSON創建CRS

//3.調用L.map創建地(dì / de)圖

//4.調用L.supermap.TiledMapLayer創建底圖和(hé / huò)疊加圖層

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個(gè)回答

您好，您用這(zhè)種方式加載地(dì / de)圖看是(shì)否會報錯：

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/京津地(dì / de)區人(rén)口分布圖_專題圖";
    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);