BIGEMPA Js API示例中心
克里金插值示例源代碼展示

代碼編輯區運行下載還原
<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'/>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <!--
        以下CSS地址請在安裝軟件了替換成本地的地址
        CSS地址請使用:
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
        軟件下載地址 http://www.xawiki.com/reader/download/detail201802017.html
    -->
    <link href='http://www.xawiki.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet'/>
    <link href="http://www.xawiki.com/Public/css/button.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script>
    <script src="http://www.xawiki.com/offline_data/kriging/kriging.js"></script>
    <script src="http://www.xawiki.com/offline_data/kriging/kriging-contour.js"></script>
    <!--
        JS地址請使用：
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
    -->
    <script src='http://www.xawiki.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .tool {
            position: absolute;
            z-index: 10;
            right: 10px;
            top: 40px;
        }

        .controls {
            position: absolute;
            top: 50px;
            right: 100px;
            padding: 15px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
        }

        button {
            margin-top: 5px;
            height: 30px;
            width: 100px;
        }
    </style>
    <title>切換圖層</title>
</head>
<body>

<div id='map'></div>
<!-- leaflet 地圖容器 -->
<canvas id="canvasMap" style="display: none;"></canvas>
<div class="controls">
    <button color="#626aef" onclick="startKriging('kriging')">普通克里金</button>
    <button color="#626aef" onclick="startKriging('Vector')">克里金矢量</button>
    <button color="#626aef" onclick="startKriging('Image')">克里金圖像</button>
    <button color="#626aef" onclick="clearKriging()">清空</button>
</div>
<script type="text/javascript">// 軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://localhost:9000
BM.Config.HTTP_URL = 'http://www.xawiki.com:9000';
// 在ID為map的元素中實例化一個地圖，不要設置地圖ID，ID號程序自動生成，無需手動配置，設置中心點，默認的級別和顯示級別控件
var map = BM.map('map', "bigemap.amap-map", {
    center: [30, 104],
    zoom: 3,
    zoomControl: true,
    attributionControl: false,
    minZoom: 3
});

let featureLayerGroup = null;
let imageLayerGroup = null;

// 矢量圖層組
featureLayerGroup = new BM.FeatureGroup().addTo(map).bringToFront()
// 圖像圖層組
imageLayerGroup = new BM.FeatureGroup().addTo(map).bringToFront()


const startKriging = (krigingType) => {

    var locationA = turf.point([113.13511910476657, 35.57787631544019], {value:10});
    var locationB = turf.point([113.13511910476657, 35.42339070714901], {value:1});
    var locationC = turf.point([114.1256864413522, 34.42339070714901], {value:30});
    var locationD = turf.point([114.1252522, 34.42239314901], {value:100});

    var positionData = turf.featureCollection([locationA, locationB, locationC]);

    console.log(positionData)
    if ('Vector' == krigingType) {
        showKrigingVector(positionData);
    } else if ('Image' == krigingType) {
        showKrigingImage(positionData)
    } else if ('kriging' == krigingType) {
        showKriging(positionData)
    }
}

const showKriging = ( positionData) => {
    debugger
    let boundaries = positionData
    // 清空圖層
    clearKriging();
    // 完全透明
    let scope = BM.geoJSON(boundaries, {
        style: function () {
            return {
                fillColor: '6666ff',
                color: 'red',
                weight: 2,
                opacity: 0,
                fillOpacity: 0,
            };
        }
    }).addTo(imageLayerGroup);

    map.fitBounds(scope.getBounds());
    //根據scope邊界線，生成范圍信息
    let xlim = [scope.getBounds()._southWest.lng, scope.getBounds()._northEast.lng];
    let ylim = [scope.getBounds()._southWest.lat, scope.getBounds()._northEast.lat];

    function loadkriging(points) {
        let canvas = document.getElementById("canvasMap");
        canvas.width = 2000;
        canvas.height = 1000;
        // 數量
        let pointLength = points.features.length;
        let t = [];// 數值
        let x = [];// 經度
        let y = [];// 緯度
        // 加載點數過多的話，會出現卡頓
        for (let i = 0; i < pointLength; i++) {
            x.push(points.features[i].geometry.coordinates[0]);
            y.push(points.features[i].geometry.coordinates[1]);
            t.push(points.features[i].properties.value);
        }

        // 克里金插值參數
        const params = {
            krigingModel: 'exponential',//model還可選'gaussian','spherical'
            krigingSigma2: 0,
            krigingAlpha: 100,
            canvasAlpha: 0.8,//canvas圖層透明度-0.75
            colors: ["#00A600", "#01A600", "#03A700", "#04A700", "#05A800", "#07A800", "#08A900", "#09A900", "#0BAA00", "#0CAA00", "#0DAB00", "#0FAB00", "#10AC00", "#12AC00", "#13AD00", "#14AD00", "#16AE00", "#17AE00", "#19AF00", "#1AAF00", "#1CB000", "#1DB000", "#1FB100", "#20B100", "#22B200", "#23B200", "#25B300", "#26B300", "#28B400", "#29B400", "#2BB500", "#2CB500", "#2EB600", "#2FB600", "#31B700", "#33B700", "#34B800", "#36B800", "#37B900", "#39B900", "#3BBA00", "#3CBA00", "#3EBB00", "#3FBB00", "#41BC00", "#43BC00", "#44BD00", "#46BD00", "#48BE00", "#49BE00", "#4BBF00", "#4DBF00", "#4FC000", "#50C000", "#52C100", "#54C100", "#55C200", "#57C200", "#59C300", "#5BC300", "#5DC400", "#5EC400", "#60C500", "#62C500", "#64C600", "#66C600", "#67C700", "#69C700", "#6BC800", "#6DC800", "#6FC900", "#71C900", "#72CA00", "#74CA00", "#76CB00", "#78CB00", "#7ACC00", "#7CCC00", "#7ECD00", "#80CD00", "#82CE00", "#84CE00", "#86CF00", "#88CF00", "#8AD000", "#8BD000", "#8DD100", "#8FD100", "#91D200", "#93D200", "#95D300", "#97D300", "#9AD400", "#9CD400", "#9ED500", "#A0D500", "#A2D600", "#A4D600", "#A6D700", "#A8D700", "#AAD800", "#ACD800", "#AED900", "#B0D900", "#B2DA00", "#B5DA00", "#B7DB00", "#B9DB00", "#BBDC00", "#BDDC00", "#BFDD00", "#C2DD00", "#C4DE00", "#C6DE00", "#C8DF00", "#CADF00", "#CDE000", "#CFE000", "#D1E100", "#D3E100", "#D6E200", "#D8E200", "#DAE300", "#DCE300", "#DFE400", "#E1E400", "#E3E500", "#E6E600", "#E6E402", "#E6E204", "#E6E105", "#E6DF07", "#E6DD09", "#E6DC0B", "#E6DA0D", "#E6D90E", "#E6D710", "#E6D612", "#E7D414", "#E7D316", "#E7D217", "#E7D019", "#E7CF1B", "#E7CE1D", "#E7CD1F", "#E7CB21", "#E7CA22", "#E7C924", "#E8C826", "#E8C728", "#E8C62A", "#E8C52B", "#E8C42D", "#E8C32F", "#E8C231", "#E8C133", "#E8C035", "#E8BF36", "#E9BE38", "#E9BD3A", "#E9BC3C", "#E9BB3E", "#E9BB40", "#E9BA42", "#E9B943", "#E9B945", "#E9B847", "#E9B749", "#EAB74B", "#EAB64D", "#EAB64F", "#EAB550", "#EAB552", "#EAB454", "#EAB456", "#EAB358", "#EAB35A", "#EAB35C", "#EBB25D", "#EBB25F", "#EBB261", "#EBB263", "#EBB165", "#EBB167", "#EBB169", "#EBB16B", "#EBB16C", "#EBB16E", "#ECB170", "#ECB172", "#ECB174", "#ECB176", "#ECB178", "#ECB17A", "#ECB17C", "#ECB17E", "#ECB27F", "#ECB281", "#EDB283", "#EDB285", "#EDB387", "#EDB389", "#EDB38B", "#EDB48D", "#EDB48F", "#EDB591", "#EDB593", "#EDB694", "#EEB696", "#EEB798", "#EEB89A", "#EEB89C", "#EEB99E", "#EEBAA0", "#EEBAA2", "#EEBBA4", "#EEBCA6", "#EEBDA8", "#EFBEAA", "#EFBEAC", "#EFBFAD", "#EFC0AF", "#EFC1B1", "#EFC2B3", "#EFC3B5", "#EFC4B7", "#EFC5B9", "#EFC7BB", "#F0C8BD", "#F0C9BF", "#F0CAC1", "#F0CBC3", "#F0CDC5", "#F0CEC7", "#F0CFC9", "#F0D1CB", "#F0D2CD", "#F0D3CF", "#F1D5D1", "#F1D6D3", "#F1D8D5", "#F1D9D7", "#F1DBD8", "#F1DDDA", "#F1DEDC", "#F1E0DE", "#F1E2E0", "#F1E3E2", "#F2E5E4", "#F2E7E6", "#F2E9E8", "#F2EBEA", "#F2ECEC", "#F2EEEE", "#F2F0F0", "#F2F2F2"
            ]
        }
        // 對數據集進行訓練
        let variogram = kriging.train(t, x, y, params.krigingModel, params.krigingSigma2, params.krigingAlpha);
        // 將插值范圍封裝成特定格式
        let bbox = turf.bbox(boundaries); // 外包矩形范圍
        // 根據外包矩形范圍生成外包矩形面Polygon
        let bboxPolygon = turf.bboxPolygon(bbox);
        let positions = [];
        bboxPolygon.geometry.coordinates[0].forEach((v) => {
            positions.push([v[0], v[1]])
        })
        // 將邊界封裝成特定的格式
        let range = [positions]
        // 使用variogram對象使polygons描述的地理位置內的格網元素具備不一樣的預測值,最后一個參數，是插值格點精度大小
        let grid = kriging.grid(range, variogram, 0.05);
        // 將得到的格網grid渲染至canvas上
        kriging.plot(canvas, grid, [xlim[0], xlim[1]], [ylim[0], ylim[1]], params.colors);
    }

    //將canvas對象轉換成image的URL
    function returnImgae() {
        let mycanvas = document.getElementById("canvasMap");
        return mycanvas.toDataURL("image/png");
    }

    // 執行克里金插值函數
    loadkriging(positionData);

    let imageBounds = [[ylim[0], xlim[0]], [ylim[1], xlim[1]]];
    BM.imageOverlay(returnImgae(), imageBounds, {opacity: 0.8}).addTo(imageLayerGroup);
}

// 生成矢量等值面并渲染
const showKrigingVector = (positionData) => {
    let boundaries = positionData
    // 清空圖層
    clearKriging();
    // 展點(可刪除)
    BM.geoJSON(positionData, {
        pointToLayer: function (feature, latlng) {
            return BM.circleMarker(latlng, {
                radius: 5,
                fillColor: '#6666ff',
                fillOpacity: 1,
                color: "#fff",
                weight: 2,
            });
        }, onEachFeature(feature, layer) {
            // 顯示文字
            let content = feature.properties.value
            // marker的icon文字
            let myIcon = BM.divIcon({
                html: `<div style="white-space: nowrap;color:#6666ff;">${content}</div>`,
                iconAnchor: [0, 0],
                className: 'my-div-icon',
                iconSize: 120
            });
            let featureCenter = BM.latLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]);
            featureLayerGroup.addLayer(BM.marker(featureCenter, {icon: myIcon}));
        }
    }).addTo(featureLayerGroup)
    // 顏色色帶
    let colors = [{fill: "#ffdc84"}, {fill: "#ffd782"},
        {fill: "#ffd281"}, {fill: "#ffcd7f"}, {fill: "#ffc87e"}, {fill: "#ffc37c"}, {fill: "#ffbe7a"}, {fill: "#ffb979"}, {fill: "#feb477"}, {fill: "#feaf76"},
        {fill: "#feaa74"}, {fill: "#fea573"}, {fill: "#fea071"}, {fill: "#fe9b6f"},
        {fill: "#fe966e"}, {fill: "#fe906c"}, {fill: "#fe8b6b"}, {fill: "#fe8669"},
        {fill: "#fe8167"}, {fill: "#fe7c66"}, {fill: "#fe7764"}, {fill: "#fe7263"},
        {fill: "#fd6d61"}, {fill: "#fd6860"}, {fill: "#fd635e"}, {fill: "#fd5e5c"},
        {fill: "#fd595b"}, {fill: "#fd5459"}, {fill: "#fd4f58"}, {fill: "#fd4a56"}]
    // 等級分級
    let levelV = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 250, 260, 270, 280, 290, 300, 400];
    let kriging_contours = kriging.getVectorContour(positionData, 'value', {
        model: 'exponential',
        sigma2: 0,
        alpha: 100
    }, levelV, boundaries);
    // 展示生成的矢量等值面
    BM.geoJSON(kriging_contours, {
        style: function (feature) {
            return {
                fillColor: hotColor(feature.properties.value),
                weight: 0,
                fillOpacity: 0.3,
            };
        }
    }).addTo(featureLayerGroup);

    // 根據值來配色
    function hotColor(d) {
        let index = levelV.findIndex((item) => item >= d);
        if (index > -1) {
            return colors[index].fill
        } else {
            return colors[colors.length - 1].fill
        }
    }
}

// 生成圖像等值面并渲染
const showKrigingImage = (positionData) => {
    let boundaries = positionData
    // 清空圖層
    clearKriging();
    // 完全透明
    let scope = BM.geoJSON(boundaries, {
        style: function () {
            return {
                fillColor: '6666ff',
                color: 'red',
                weight: 2,
                opacity: 0,
                fillOpacity: 0,
            };
        }
    }).addTo(imageLayerGroup);
    map.fitBounds(scope.getBounds());
    //根據scope邊界線，生成范圍信息
    let xlim = [scope.getBounds()._southWest.lng, scope.getBounds()._northEast.lng];
    let ylim = [scope.getBounds()._southWest.lat, scope.getBounds()._northEast.lat];
    // 色帶
    let colors = ["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"]
    // 畫布
    let canvas = document.getElementById("canvasMap");
    canvas.width = 1000;
    canvas.height = 1000;
    let kriging_contours = kriging.drawCanvasContour(positionData, 'value', {
        model: 'exponential',
        sigma2: 0,
        alpha: 100
    }, canvas, [xlim[0], xlim[1]], [ylim[0], ylim[1]], colors);

    //將canvas對象轉換成image的URL
    function returnImgae() {
        let mycanvas = document.getElementById("canvasMap");
        return mycanvas.toDataURL("image/png");
    }

    let imageBounds = [[ylim[0], xlim[0]], [ylim[1], xlim[1]]];
    BM.imageOverlay(returnImgae(), imageBounds, {opacity: 0.9}).addTo(imageLayerGroup);
}

// 清空圖層
const clearKriging = () => {
    imageLayerGroup.clearLayers();
    featureLayerGroup.clearLayers();
}


</script>
</body>
</html>