@huaiyinhcy/simple-map v0.1.3

import 'ol/ol.css';
import { Map, View } from 'ol';
import {
    clipLayerByAdcode,
    clipLayerByVectorLayer,
    createLegend,
    filterLayerByOptions,
    getDistrictLayer,
    getFilterOptions,
    getOdLayer,
    getTdtLayer,
    presetsBorderStyle,
    presetsHandleOdStyle
} from './src';

const data = [
    {
        city: '宁波市',
        from: [121.549, 29.8681],
        to: [120.1551, 30.2741],
        value: 262
    },
    {
        city: '温州市',
        from: [120.6993, 27.9939],
        to: [120.1551, 30.2741],
        value: 683
    },
    {
        city: '嘉兴市',
        from: [120.7555, 30.746],
        to: [120.1551, 30.2741],
        value: 616
    },
    {
        city: '湖州市',
        from: [120.1024, 30.8672],
        to: [120.1551, 30.2741],
        value: 139
    },
    {
        city: '绍兴市',
        from: [120.5825, 29.997],
        to: [120.1551, 30.2741],
        value: 888
    },
    {
        city: '金华市',
        from: [119.6495, 29.1026],
        to: [120.1551, 30.2741],
        value: 503
    },
    {
        city: '台州市',
        from: [121.4208, 28.6594],
        to: [120.1551, 30.2741],
        value: 181
    },
    {
        city: '丽水市',
        from: [119.9296, 28.4595],
        to: [120.1551, 30.2741],
        value: 795
    }
];

// 设置你的天地图key
const tdtKey = 'e7f048864778c64dee0341d7b02df966';
// 设置你的地图坐标系，默认是EPSG:3857
const mapProj = 'EPSG:3857';

(async () => {
    //创建view与map实例
    const view = new View({
        center: [120, 30],
        zoom: 10,
        projection: mapProj
    });

    //创建map实例
    const map = new Map({
        target: 'app',
        view
    });

    //获取天地图底图，这里以影像底图为例
    const imgLayer = getTdtLayer({
        tdtKey,
        mapProj,
        layer: 'img'
    });

    //根据行政区编码裁切底图，这里以浙江省为例，会返回裁切用的矢量图层
    const adcode = 330000;
    const clipLayer = await clipLayerByAdcode({
        layerToBeClipped: imgLayer,
        adcode,
        mapProj
    });

    //获取天地图注记图层，并复用矢量图层进行裁切
    const ciaLayer = getTdtLayer({ tdtKey, mapProj, layer: 'cia' });
    clipLayerByVectorLayer({ layerToBeClipped: ciaLayer, clipLayer });

    //从预设边界样式中获取伪3d边界样式，并复用矢量图层进行渲染
    const style = presetsBorderStyle.fake3d({ map, color: '#4e70b6', offset: [0, 10] });
    clipLayer.setStyle(style);

    map.addLayer(ciaLayer);
    map.addLayer(imgLayer);
    map.addLayer(ciaLayer);

    map.getView().fit(clipLayer.getSource().getExtent(), { padding: [20, 20, 20, 20] });

    const filterOptions = getFilterOptions('blue');
    filterLayerByOptions({ layer: imgLayer, filterOptions });

    const districtLayer = await getDistrictLayer({
        adcode,
        level: 'city',
        style: presetsBorderStyle.default({ color: 'white' }),
        mapProj
    });
    map.addLayer(districtLayer);

    const legends = createLegend({ data });

    const odLayer = getOdLayer({
        odData: data,
        dataProj: 'EPSG:4326',
        mapProj,
        setStyle: (odItem) => {
            const color = legends.find(
                (legend) => legend.min <= odItem.value && legend.max > odItem.value
            ).color;
            return presetsHandleOdStyle.default({ color });
        }
    });
    map.addLayer(odLayer);
})();