<template>
<div id="map"></div>
</template>
<script>
import L from 'leaflet/dist/leaflet';
import '@supermap/iclient-leaflet/dist/iclient-leaflet';
import 'leaflet/dist/leaflet.css';
export default {
name: 'HelloWebgisTheme',
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
var baseurl = 'http://localhost:8090/iserver/services/map-china400/rest/maps/China';
// var dataurl = 'http://localhost:8090/iserver/services/map-tangshan-2/rest/maps/hex_1000_SpatialJoin';
// 初始化地图信息
var map = L.map('map', {
center: [30, 84],
maxZoom: 18,
zoom: 3,
// crs: L.CRS.EPSG4326,
// center: [39.954, 116.36],
// zoom: 12,
// maxZoom: 18,
// minZoom: 6,
});
new L.supermap.TiledMapLayer(baseurl).addTo(map);
let style1, style2, style3, style4, style5, style6;
style1 = new L.Supermap.ServerStyle({
fillForeColor: new L.Supermap.ServerColor(196, 255, 189),
lineColor: new L.supermap.ServerColor(255, 255, 255),
lineWidth: 0.1,
});
style2 = new L.supermap.ServerStyle({
fillForeColor: new L.supermap.ServerColor(196, 255, 189),
lineColor: new L.supermap.ServerColor(255, 255, 255),
lineWidth: 0.1,
});
style3 = new L.supermap.ServerStyle({
fillForeColor: new L.supermap.ServerColor(255, 173, 173),
lineColor: new L.supermap.ServerColor(255, 255, 255),
lineWidth: 0.1,
});
style4 = new L.supermap.ServerStyle({
fillForeColor: new L.supermap.ServerColor(255, 239, 168),
lineColor: new L.supermap.ServerColor(255, 255, 255),
lineWidth: 0.1,
});
style5 = new L.supermap.ServerStyle({
fillForeColor: new L.supermap.ServerColor(173, 209, 255),
lineColor: new L.supermap.ServerColor(255, 255, 255),
lineWidth: 0.1,
});
style6 = new L.supermap.ServerStyle({
fillForeColor: new L.supermap.ServerColor(132, 164, 232),
lineColor: new L.supermap.ServerColor(255, 255, 255),
lineWidth: 0.1,
});
var themeUniqueIteme1 = new L.supermap.ThemeUniqueItem({
unique: '黑龙江省',
style: style1,
}),
themeUniqueIteme2 = new L.supermap.ThemeUniqueItem({
unique: '湖北省',
style: style2,
}),
themeUniqueIteme3 = new L.supermap.ThemeUniqueItem({
unique: '吉林省',
style: style3,
}),
themeUniqueIteme4 = new L.supermap.ThemeUniqueItem({
unique: '内蒙古自治区',
style: style4,
}),
themeUniqueIteme5 = new L.supermap.ThemeUniqueItem({
unique: '青海省',
style: style5,
}),
themeUniqueIteme6 = new L.supermap.ThemeUniqueItem({
unique: '新疆维吾尔自治区',
style: style6,
}),
themeUniqueIteme7 = new L.supermap.ThemeUniqueItem({
unique: '云南省',
style: style1,
}),
themeUniqueIteme8 = new L.supermap.ThemeUniqueItem({
unique: '四川省',
style: style4,
}),
themeUniqueIteme9 = new L.supermap.ThemeUniqueItem({
unique: '贵州省',
style: style3,
}),
themeUniqueIteme10 = new L.supermap.ThemeUniqueItem({
unique: '甘肃省',
style: style3,
}),
themeUniqueIteme11 = new L.supermap.ThemeUniqueItem({
unique: '宁夏回族自治区',
style: style5,
}),
themeUniqueIteme12 = new L.supermap.ThemeUniqueItem({
unique: '重庆市',
style: style6,
}),
themeUniqueIteme13 = new L.supermap.ThemeUniqueItem({
unique: '山东省',
style: style1,
}),
themeUniqueIteme14 = new L.supermap.ThemeUniqueItem({
unique: '安徽省',
style: style2,
}),
themeUniqueIteme15 = new L.supermap.ThemeUniqueItem({
unique: '江西省',
style: style3,
}),
themeUniqueIteme16 = new L.supermap.ThemeUniqueItem({
unique: '浙江省',
style: style4,
}),
themeUniqueIteme17 = new L.supermap.ThemeUniqueItem({
unique: '台湾省',
style: style2,
}),
themeUniqueIteme18 = new L.supermap.ThemeUniqueItem({
unique: '江苏省',
style: style6,
}),
themeUniqueIteme19 = new L.supermap.ThemeUniqueItem({
unique: '湖南省',
style: style5,
}),
themeUniqueIteme20 = new L.supermap.ThemeUniqueItem({
unique: '河南省',
style: style4,
}),
themeUniqueIteme21 = new L.supermap.ThemeUniqueItem({
unique: '河北省',
style: style3,
}),
themeUniqueIteme22 = new L.supermap.ThemeUniqueItem({
unique: '福建省',
style: style5,
}),
themeUniqueIteme23 = new L.supermap.ThemeUniqueItem({
unique: '广西壮族自治区',
style: style6,
}),
themeUniqueIteme24 = new L.supermap.ThemeUniqueItem({
unique: '西藏自治区',
style: style2,
}),
themeUniqueIteme25 = new L.supermap.ThemeUniqueItem({
unique: '广东省',
style: style4,
}),
themeUniqueIteme26 = new L.supermap.ThemeUniqueItem({
unique: '山西省',
style: style2,
}),
themeUniqueIteme27 = new L.supermap.ThemeUniqueItem({
unique: '陕西省',
style: style1,
}),
themeUniqueIteme28 = new L.supermap.ThemeUniqueItem({
unique: '天津市',
style: style5,
}),
themeUniqueIteme29 = new L.supermap.ThemeUniqueItem({
unique: '北京市',
style: style2,
}),
themeUniqueIteme30 = new L.supermap.ThemeUniqueItem({
unique: '辽宁省',
style: style1,
});
var themeUniqueItemes = [
themeUniqueIteme1,
themeUniqueIteme2,
themeUniqueIteme3,
themeUniqueIteme4,
themeUniqueIteme5,
themeUniqueIteme6,
themeUniqueIteme7,
themeUniqueIteme8,
themeUniqueIteme9,
themeUniqueIteme10,
themeUniqueIteme11,
themeUniqueIteme12,
themeUniqueIteme13,
themeUniqueIteme14,
themeUniqueIteme15,
themeUniqueIteme16,
themeUniqueIteme17,
themeUniqueIteme18,
themeUniqueIteme19,
themeUniqueIteme20,
themeUniqueIteme21,
themeUniqueIteme22,
themeUniqueIteme23,
themeUniqueIteme24,
themeUniqueIteme25,
themeUniqueIteme26,
themeUniqueIteme27,
themeUniqueIteme28,
themeUniqueIteme29,
themeUniqueIteme30,
];
let themeUnique = new L.supermap.ThemeUnique({
uniqueExpression: 'Name',
items: themeUniqueItemes,
defaultStyle: style1,
});
var themeParameters = new L.supermap.ThemeParameters({
datasetNames: ['China_Province_pg'],
dataSourceNames: ['China'],
themes: [themeUnique],
});
let themeService = L.supermap.themeService(baseurl);
themeService.getThemeInfo(themeParameters, function (serviceResult) {
var result = serviceResult.result;
if (result && result.newResourceID) {
let themeLayer= L.supermap.TiledMapLayer(baseurl, {
noWrap: true,
cacheEnabled: false,
transparent: true,
layersID: result.newResourceID,
})
themeLayer.setZIndex(5).addTo(map);
}
});
},
},
};
</script>
<style>
#map {
width: 100%;
height: 100%;
}
#heatNumbers,
#heatRadius {
width: 50px;
display: inline-block;
}
</style>
