methods: {
addMap() {
let host = window.isLocal ? window.server : 'http://10.100.244.22:8090'
// 注册4490坐标系
proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs')
// leaflet CRS投影设置
let p1 = L.point(-180, -90),
p2 = L.point(180, 90),
// 识图范围
bounds = L.bounds(p1, p2)
let crs = L.Proj.CRS('EPSG:4490', {
origin: [119.82, 29.56],
bounds: bounds
})
let baseLayer = L.supermap.tiledMapLayer(this.baseUrl, {transparent: true});
this.map = L.map('map', {
crs: crs,
center: [30, 100],
maxZoom: 18,
minZoom: 1,
zoom: 4,
layers: [baseLayer],
attributionControl: false,
zoomControl: false
})
L.control
.scale({
position: 'bottomright',
maxWidth: 200,
metric: true,
imperial: false
})
.addTo(this.map)
//初始化数据
this.loadData("2020","11","zl")
},
// 读取数据进行插值计算
loadData(year, month, type) {
let _self = this
var url = '/shjmap/getDmWrwnd'
url += '?year=' + year + '&month=' + month + '&type='+type
this.$axios(url, {})
.then((response) => {
let inputPoints = [];
_self.max = response.data.max;
response.data.data.forEach(function(item, idx) {
if(idx < 100){
var geometry= new SuperMap.Geometry.Point(item.jingdu, item.weidu, 'Point', item.data);
geometry.SRID=4490;
inputPoints.push(
geometry
//L.latLng({'lat':parseFloat(item.weidu),'lng':parseFloat(item.jingdu),'alt':item.data})
);
}
})
console.log(inputPoints)
//创建点密度插值分析参数实例
_self.interpolationAnalystParameters = new SuperMap.InterpolationKrigingAnalystParameters({
//普通克吕金插值的类型
type: "KRIGING",
searchMode: "KDTREE_FIXED_COUNT",
bounds: L.bounds([73.5 ,3.84], [ 135.09,53.56]),
//用于做插值分析的数据源中数据集的名称
//插值分析结果数据集的名称
outputDatasetName: "Kriging_Result",
//插值分析结果数据源的名称
outputDatasourceName: "chazhi",
//结果栅格数据集存储的像素格式
pixelFormat: SuperMap.PixelFormat.DOUBLE,
//zValueFieldName: "总磷",
searchRadius: "0",
//dataset: "chazhi@chazhi",
// 裁剪参数
/* clipParam: new SuperMap.ClipParameter({
clipDatasetName:"guojie@guojie",
clipDatasourceName:"guojie"
}), */
// 插值分析类型
InterpolationAnalystType: "geometry",
//存储用于进行插值分析的字段名称
inputPoints: inputPoints,
});
//创建点密度插值分析服务实例
_self.interpolationAnalystService = L.supermap.spatialAnalystService(_self.serviceUrl);
_self.interpolationAnalystService.interpolationAnalysis(_self.interpolationAnalystParameters, function (serviceResult) {
_self.interpolationAnalystResult = serviceResult.result;
if (_self.interpolationAnalystResult && _self.interpolationAnalystResult.dataset) {
//用栅格专题图展示分析结果
//console.log("_self.interpolationAnalystResult",_self.interpolationAnalystResult)
_self.showAnalysisResult_ThemeGridRange();
} else {
//alert(serviceResult.error.errorMsg);
console.error('serviceResult',serviceResult)
}
});
})
.catch((err) => {
console.log('err', err)
})
},
////用栅格专题图展示分析结果
showAnalysisResult_ThemeGridRange() {
let _self = this
//创建专题图服务实例
_self.themeService = L.supermap.themeService(_self.baseUrl);
//var zlArr = [0.02,0.1,0.2,0.3,0.4];
//var zdArr = [0.2,0.5,1.0,1.5,2.0];
var max = _self.max
var disNum = max / 32;
var startArr = [];
var endArr = [];
for(var num=0; num<32; num++){
startArr.push(num*disNum);
endArr.push(num*disNum+disNum);
}
console.log("startArr",startArr)
console.log("endArr",endArr)
var colorArr = [
new SuperMap.ServerColor(0, 0, 255),
new SuperMap.ServerColor(0, 33, 255),
new SuperMap.ServerColor(0, 66, 255),
new SuperMap.ServerColor(0, 99, 255),
new SuperMap.ServerColor(0, 132, 255),
new SuperMap.ServerColor(0, 165, 255),
new SuperMap.ServerColor(0, 197, 255),
new SuperMap.ServerColor(0, 230, 255),
new SuperMap.ServerColor(0, 255, 247),
new SuperMap.ServerColor(0, 255, 214),
new SuperMap.ServerColor(0, 255, 181),
new SuperMap.ServerColor(0, 255, 148),
new SuperMap.ServerColor(0, 255, 115),
new SuperMap.ServerColor(0, 255, 82),
new SuperMap.ServerColor(0, 255, 46),
new SuperMap.ServerColor(0, 255, 16),
new SuperMap.ServerColor(16, 255, 1),
new SuperMap.ServerColor(49, 255, 2),
new SuperMap.ServerColor(82, 255, 3),
new SuperMap.ServerColor(115, 255, 5),
new SuperMap.ServerColor(148, 255, 6),
new SuperMap.ServerColor(181, 255, 7),
new SuperMap.ServerColor(214, 255, 8),
new SuperMap.ServerColor(247, 255, 10),
new SuperMap.ServerColor(255, 230, 9),
new SuperMap.ServerColor(255, 197, 8),
new SuperMap.ServerColor(255, 165, 6),
new SuperMap.ServerColor(255, 132, 5),
new SuperMap.ServerColor(255, 99, 4),
new SuperMap.ServerColor(255, 66, 3),
new SuperMap.ServerColor(255, 33, 1),
new SuperMap.ServerColor(255, 0, 0)];
var themeGridRangeItemArr = [];
for(var i=0; i<colorArr.length; i++){
themeGridRangeItemArr.push(new SuperMap.ThemeGridRangeItem({
start: startArr[i],
end: endArr[i],
color: colorArr[i]
}))
} ;
});
_self.themeGridRange = new SuperMap.ThemeGridRange({
reverseColor: false,
rangeMode: SuperMap.RangeMode.EQUALINTERVAL,
//栅格分段专题图子项数组
items: themeGridRangeItemArr
});
console.log("_self.themeGridRange",_self.themeGridRange)
_self.themeParameters = new SuperMap.ThemeParameters({
//制作专题图的数据集
datasetNames: [_self.interpolationAnalystResult.dataset.split('@')[0]],
dataSourceNames: ["chazhi"],
joinItems: null,
themes: [_self.themeGridRange]
});
_self.themeService.getThemeInfo(_self.themeParameters, function (getThemeInfoServiceResult) {
console.log("getThemeInfoServiceResult",getThemeInfoServiceResult)
var result = getThemeInfoServiceResult.result;
if (result && result.newResourceID) {
_self.themeLayer = L.supermap.tiledMapLayer(_self.baseUrl, {
noWrap: true,
cacheEnabled: false,
transparent: true,
layersID: result.newResourceID,
//opacity: 0.8
}).addTo(_self.map);
console.log("_self.themeLayer",_self.themeLayer)
}
});
},
},
mounted() {
this.addMap()
}
}
</script>
