OpenLayers6 裁切地图(Layer Clipping)

在地图上挖一个洞对地图进行显示

下载svg文件，在线转换为Converter 在线转换地址：http://demo.qunee.com/svg2canvas/

map.vue 

<template>
  <div>
    <div id="map" class="map"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import OSM from 'ol/source/OSM'
import TileLayer from 'ol/layer/Tile'
import View from 'ol/View'
export default {
  methods: {
  },
  mounted () {
    const osm = new TileLayer({
      source: new OSM()
    })

    const map = new Map({
      layers: [osm],
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    })

    osm.on('prerender', function (event) {
      const ctx = event.context
      ctx.save()
      ctx.miterLimit = 4
      ctx.font = "15px / 21.4286px ''"
      ctx.font = '   15px '
      ctx.scale(3, 3)
      ctx.scale(0.1953125, 0.1953125)
      ctx.save()
      ctx.beginPath()

      ctx.moveTo(862.123193, 375.196003)
      ctx.bezierCurveTo(856.87397, 372.046469, 855.824125, 367.84709000000004, 854.77428, 362.597867)
      ctx.bezierCurveTo(853.724435, 357.348644, 853.724435, 351.049576, 849.525057, 348.949886)
      ctx.bezierCurveTo(845.3256789999999, 346.850196, 842.1761439999999, 339.501284, 837.976766, 334.25206099999997)
      ctx.bezierCurveTo(833.777387, 325.853304, 830.627853, 316.404702, 829.578008, 305.906255)
      ctx.bezierCurveTo(826.4284739999999, 294.357964, 820.1294059999999, 298.557342, 810.680805, 298.557343)
      ctx.bezierCurveTo(803.3318919999999, 299.607188, 794.933135, 298.557343, 787.584222, 294.357964)
      ctx.bezierCurveTo(784.4346879999999, 290.15858499999996, 780.2353089999999, 290.15858499999996, 778.1356199999999, 285.959207)
      ctx.bezierCurveTo(776.0359309999999, 281.759829, 779.1854649999999, 279.660139, 770.7867079999999, 282.809673)
      ctx.bezierCurveTo(762.3879509999998, 285.95920699999994, 758.1885719999999, 277.56045, 751.8895039999999, 274.410916)
      ctx.bezierCurveTo(745.5904359999998, 271.26138199999997, 741.3910569999998, 264.962314, 741.3910569999998, 258.66324599999996)
      ctx.bezierCurveTo(741.3910569999998, 251.31433299999995, 743.4907459999998, 241.86573199999995, 748.7399699999999, 240.81588699999995)
      ctx.bezierCurveTo(753.9891939999999, 239.76604199999994, 753.9891929999999, 234.51681899999994, 751.8895039999999, 230.31743999999995)
      ctx.bezierCurveTo(749.7898149999999, 226.11806099999995, 747.6901249999999, 225.06821699999995, 751.8895039999999, 221.91868299999996)
      ctx.bezierCurveTo(756.0888829999999, 218.76914899999997, 761.3381059999999, 221.91868299999996, 762.3879499999998, 217.71930399999997)
      ctx.bezierCurveTo(763.4377949999998, 214.56976999999998, 765.5374839999998, 210.37039099999996, 768.6870179999999, 208.27070199999997)
      ctx.bezierCurveTo(770.7867069999999, 207.22085699999997, 771.8365519999999, 199.87194499999998, 774.9860859999999, 197.77225599999997)
      ctx.bezierCurveTo(776.0359309999999, 196.72241099999997, 777.0857749999999, 194.62272199999998, 777.0857759999999, 192.52303299999997)
      ctx.bezierCurveTo(777.0857759999999, 191.47318799999996, 778.1356209999999, 190.42334399999996, 778.1356199999999, 188.32365399999998)
      ctx.lineTo(777.085776, 188.32365399999998)
      ctx.bezierCurveTo(769.736863, 188.32365399999998, 762.387951, 187.27380899999997, 755.039038, 187.27380899999997)
      ctx.bezierCurveTo(748.73997, 186.22396399999997, 744.540591, 177.82520699999998, 737.191679, 175.72551799999997)
      ctx.bezierCurveTo(729.8427670000001, 173.62582899999995, 720.394165, 179.92489699999996, 715.144941, 179.92489699999996)
      ctx.bezierCurveTo(705.696339, 180.97474199999996, 696.247737, 183.07443099999995, 686.799135, 185.17411999999996)
      ctx.bezierCurveTo(668.951776, 188.32365399999995, 673.151154, 172.57598399999995, 671.051465, 163.12738199999995)
      ctx.bezierCurveTo(668.951776, 153.67877999999996, 658.453329, 146.32986799999995, 650.054572, 127.43266399999996)
      ctx.bezierCurveTo(641.655815, 108.53545999999997, 660.5530190000001, 117.98406199999997, 666.852087, 110.63514899999996)
      ctx.bezierCurveTo(673.1511549999999, 103.28623599999995, 664.752398, 94.88747899999996, 661.602863, 81.23949899999995)
      ctx.bezierCurveTo(658.4533279999999, 67.59151899999995, 651.1044159999999, 78.08996499999995, 646.905038, 78.08996499999995)
      ctx.bezierCurveTo(642.7056600000001, 78.08996499999995, 640.60597, 66.54167399999994, 634.306902, 57.09307199999995)
      ctx.bezierCurveTo(628.0078340000001, 47.644469999999956, 629.057679, 41.34540199999995, 633.257058, 36.09617899999995)
      ctx.bezierCurveTo(637.456437, 30.84695599999995, 620.6589220000001, 22.448197999999948, 615.409699, 8.800217999999951)
      ctx.bezierCurveTo(610.160476, -4.847762000000046, 580.7648250000001, 1.4513049999999517, 568.166689, 1.4513049999999517)
      ctx.bezierCurveTo(555.568553, 1.4513049999999517, 559.767932, 16.14912999999995, 553.468864, 21.39835399999995)
      ctx.bezierCurveTo(547.1697960000001, 26.647577999999953, 538.7710390000001, 20.34850899999995, 526.172903, 21.39835399999995)
      ctx.bezierCurveTo(513.5747670000001, 23.498042999999953, 504.126165, 33.99648999999995, 504.126165, 46.59462499999995)
      ctx.bezierCurveTo(506.225854, 58.14291599999995, 508.32554400000004, 60.24260599999995, 500.976631, 63.392139999999955)
      ctx.bezierCurveTo(499.926786, 63.392139999999955, 498.876942, 64.44198499999996, 497.827097, 65.49182899999995)
      ctx.bezierCurveTo(493.62771799999996, 68.64136299999996, 495.72740799999997, 72.84074199999995, 503.07631999999995, 77.04011999999996)
      ctx.bezierCurveTo(513.574767, 82.28934299999996, 504.12616499999996, 90.68810099999996, 493.62771899999996, 101.18654799999996)
      ctx.bezierCurveTo(483.12927299999996, 111.68499499999996, 462.13237899999996, 105.38592699999995, 454.783466, 100.13670299999995)
      ctx.bezierCurveTo(447.434553, 94.88747899999996, 445.334864, 100.13670299999995, 439.035796, 108.53545999999996)
      ctx.bezierCurveTo(432.736728, 116.93421699999996, 424.337971, 119.03390699999996, 421.188437, 129.53235299999994)
      ctx.bezierCurveTo(418.03890300000006, 140.03079899999994, 408.590301, 133.73173199999994, 403.34107800000004, 117.98406199999994)
      ctx.bezierCurveTo(402.29123300000003, 112.73483899999994, 398.09185500000007, 112.73483899999994, 392.84263200000004, 114.83452799999993)
      ctx.bezierCurveTo(381.29434100000003, 122.18344099999993, 369.74605, 130.58219799999995, 360.29744700000003, 140.03079999999994)
      ctx.bezierCurveTo(350.84884500000004, 147.37971299999995, 333.00148600000006, 154.72862499999994, 341.40024300000005, 158.92800399999993)
      ctx.bezierCurveTo(349.79900000000004, 163.12738299999992, 334.05133000000006, 168.37660599999992, 325.6525740000001, 171.52613899999994)
      ctx.bezierCurveTo(314.10428300000007, 174.67567299999993, 302.55599200000006, 172.57598399999995, 292.05754500000006, 165.22707199999994)
      ctx.bezierCurveTo(283.6587880000001, 158.92800399999993, 285.7584770000001, 144.23017899999994, 288.90801100000004, 136.88126599999993)
      ctx.bezierCurveTo(292.057545, 129.53235299999992, 288.90801100000004, 112.73483899999992, 285.758477, 99.08685799999992)
      ctx.bezierCurveTo(284.708632, 90.68810099999992, 281.559098, 81.23949899999992, 276.30987500000003, 73.89058699999993)
      ctx.bezierCurveTo(275.26003000000003, 73.89058699999993, 271.06065200000006, 77.04012099999993, 273.160341, 82.28934399999993)
      ctx.bezierCurveTo(275.26003000000003, 90.68810099999993, 265.81142800000003, 93.83763499999993, 256.36282600000004, 92.78778999999993)
      ctx.bezierCurveTo(240.61515600000004, 90.68810099999993, 237.46562200000005, 103.28623699999993, 241.66500100000005, 111.68499399999993)
      ctx.bezierCurveTo(245.86438000000004, 120.08375099999994, 232.21639900000005, 117.98406199999994, 224.86748700000004, 122.18344099999993)
      ctx.bezierCurveTo(217.51857500000003, 126.38281999999992, 210.16966200000005, 143.18033399999993, 215.41888500000005, 166.27691599999991)
      ctx.bezierCurveTo(220.66810800000005, 189.3734979999999, 197.57152600000003, 189.37349799999993, 188.12292400000004, 191.4731879999999)
      ctx.bezierCurveTo(178.67432200000005, 193.5728779999999, 178.67432200000005, 216.6694599999999, 186.02323400000003, 226.1180619999999)
      ctx.bezierCurveTo(193.37214600000001, 235.5666639999999, 193.37214700000004, 236.6165089999999, 182.87370000000004, 247.1149549999999)
      ctx.bezierCurveTo(172.37525300000004, 257.6134009999999, 182.87370000000004, 262.86262499999987, 190.22261300000005, 271.2613819999999)
      ctx.bezierCurveTo(193.37214700000004, 275.46076099999993, 195.47183600000005, 279.6601389999999, 197.57152600000006, 283.8595179999999)
      ctx.bezierCurveTo(198.62137100000007, 285.95920699999994, 199.67121500000007, 288.05889699999994, 199.67121500000007, 291.2084299999999)
      ctx.bezierCurveTo(200.72106000000008, 293.3081189999999, 200.72106000000008, 296.4576529999999, 201.7709040000001, 299.6071869999999)
      ctx.bezierCurveTo(201.7709040000001, 300.6570319999999, 202.8207490000001, 302.7567209999999, 202.8207490000001, 303.8065659999999)
      ctx.bezierCurveTo(202.8207490000001, 303.8065659999999, 205.97028300000008, 306.95609999999994, 209.1198170000001, 312.2053229999999)
      ctx.bezierCurveTo(211.2195060000001, 314.3050119999999, 212.26935100000009, 316.40470199999993, 214.3690400000001, 318.5043909999999)
      ctx.bezierCurveTo(220.6681080000001, 324.80345899999986, 221.7179530000001, 331.1025269999999, 225.9173310000001, 334.2520609999999)
      ctx.bezierCurveTo(230.1167090000001, 337.40159499999993, 223.8176420000001, 342.6508179999999, 229.0668650000001, 353.1492649999999)
      ctx.bezierCurveTo(234.3160880000001, 363.6477119999999, 237.46562200000008, 370.9966239999999, 242.71484600000008, 368.89693499999987)
      ctx.bezierCurveTo(247.96407000000008, 366.79724599999986, 264.7615840000001, 374.14615799999984, 253.21329200000008, 379.3953809999999)
      ctx.bezierCurveTo(243.7646900000001, 382.5449149999999, 234.3160880000001, 386.74429399999985, 225.91733100000008, 393.0433619999999)
      ctx.bezierCurveTo(221.71795200000008, 398.29258499999986, 215.41888400000008, 402.4919639999999, 212.26935100000009, 400.3922739999999)
      ctx.bezierCurveTo(209.1198180000001, 398.29258399999986, 205.97028300000008, 397.24273999999986, 207.0201270000001, 403.5418079999999)
      ctx.bezierCurveTo(208.0699710000001, 409.8408759999999, 211.21950600000008, 416.1399439999999, 202.8207490000001, 414.0402549999999)
      ctx.bezierCurveTo(194.4219920000001, 411.9405659999999, 190.22261300000008, 417.1897889999999, 194.4219920000001, 423.4888569999999)
      ctx.bezierCurveTo(198.62137100000012, 429.78792499999986, 199.6712150000001, 439.2365269999999, 207.02012700000012, 439.2365269999999)
      ctx.bezierCurveTo(214.36903900000013, 439.2365269999999, 217.51857400000011, 438.1866819999999, 219.61826300000013, 443.43590499999993)
      ctx.bezierCurveTo(221.71795200000014, 448.68512799999996, 228.01702000000012, 446.58543899999995, 235.36593300000013, 445.53559499999994)
      ctx.bezierCurveTo(242.71484600000014, 444.48575099999994, 245.86438000000012, 442.3860609999999, 245.86438000000012, 458.13373099999995)
      ctx.bezierCurveTo(245.86438000000012, 473.881401, 245.86438000000012, 480.18046899999996, 252.16344800000013, 484.3798469999999)
      ctx.bezierCurveTo(258.46251600000016, 488.5792249999999, 264.76158400000014, 488.57922599999995, 259.5123600000001, 506.42658499999993)
      ctx.bezierCurveTo(254.2631360000001, 524.2739439999999, 249.01391300000012, 529.523167, 252.1634480000001, 535.822235)
      ctx.bezierCurveTo(255.3129830000001, 542.121303, 258.4625160000001, 550.52006, 252.1634480000001, 551.569905)
      ctx.bezierCurveTo(245.8643800000001, 552.61975, 242.7148460000001, 554.719439, 242.7148460000001, 561.018507)
      ctx.bezierCurveTo(242.7148460000001, 567.317575, 237.4656230000001, 566.26773, 229.06686500000012, 568.367419)
      ctx.bezierCurveTo(220.66810700000013, 570.467108, 212.2693510000001, 558.918817, 205.9702830000001, 563.118196)
      ctx.bezierCurveTo(196.52168100000011, 569.417264, 188.1229240000001, 577.816021, 181.82385600000012, 587.264623)
      ctx.bezierCurveTo(179.7241670000001, 594.6135360000001, 177.62447700000013, 598.812914, 182.87370000000013, 606.161827)
      ctx.bezierCurveTo(188.12292300000013, 613.51074, 194.42199100000013, 617.710118, 186.02323400000012, 625.059031)
      ctx.bezierCurveTo(177.6244770000001, 632.407944, 160.82696200000012, 646.055924, 159.77711800000012, 657.604215)
      ctx.bezierCurveTo(158.7272730000001, 667.052817, 158.7272730000001, 677.551263, 159.77711800000012, 686.999865)
      ctx.bezierCurveTo(160.82696300000012, 694.348778, 160.82696300000012, 701.69769, 168.1758750000001, 704.847225)
      ctx.bezierCurveTo(175.5247870000001, 707.99676, 192.3223020000001, 707.996759, 192.3223020000001, 715.3456709999999)
      ctx.bezierCurveTo(192.3223020000001, 722.6945829999999, 197.5715250000001, 722.694584, 204.9204380000001, 742.641632)
      ctx.bezierCurveTo(212.2693510000001, 762.58868, 217.51857400000011, 761.538836, 217.51857400000011, 769.937593)
      ctx.bezierCurveTo(217.51857400000011, 778.33635, 216.4687290000001, 782.535729, 224.86748700000012, 784.635418)
      ctx.bezierCurveTo(233.26624500000014, 786.735107, 232.21640000000014, 787.784952, 231.16655500000013, 800.3830879999999)
      ctx.bezierCurveTo(230.11671000000013, 812.9812239999999, 212.26935100000014, 842.3768739999999, 210.16966100000013, 850.775632)
      ctx.bezierCurveTo(208.06997100000012, 859.17439, 205.97028200000014, 866.523302, 199.67121500000013, 871.772525)
      ctx.bezierCurveTo(193.37214800000012, 877.021748, 193.37214700000013, 878.071593, 194.42199200000013, 890.669729)
      ctx.bezierCurveTo(195.47183700000014, 903.2678649999999, 201.77090500000014, 919.015535, 192.32230200000012, 915.866)
      ctx.bezierCurveTo(182.8736990000001, 912.716465, 188.12292300000013, 913.766311, 184.9733900000001, 922.165068)
      ctx.bezierCurveTo(181.8238570000001, 930.5638250000001, 180.77401100000012, 931.6136700000001, 171.32540900000012, 936.862894)
      ctx.bezierCurveTo(161.87680700000013, 942.1121179999999, 161.87680700000013, 950.5108749999999, 167.12603100000013, 953.660408)
      ctx.bezierCurveTo(172.37525400000013, 956.809942, 175.52478800000011, 963.10901, 174.47494300000014, 969.4080779999999)
      ctx.bezierCurveTo(174.47494300000014, 975.707146, 181.82385600000015, 973.607457, 188.12292400000013, 982.0062139999999)
      ctx.bezierCurveTo(192.32230300000012, 988.3052819999999, 194.42199200000013, 990.4049709999999, 194.42199200000013, 994.6043499999998)
      ctx.lineTo(196.52168100000014, 994.6043499999998)
      ctx.bezierCurveTo(207.02012800000014, 995.6541949999998, 230.11671000000013, 996.7040389999999, 231.16655500000013, 999.8535729999999)
      ctx.bezierCurveTo(232.21640000000014, 1003.0031069999999, 249.01391400000014, 1005.1027959999999, 256.36282600000015, 1008.2523299999999)
      ctx.bezierCurveTo(263.7117380000002, 1011.4018639999999, 284.70863200000014, 1011.4018639999999, 289.95785500000017, 1015.601243)
      ctx.bezierCurveTo(295.2070780000002, 1019.800622, 301.5061460000002, 1024, 306.75537000000014, 1021.900311)
      ctx.bezierCurveTo(312.0045940000001, 1019.800622, 316.20397200000014, 1021.900311, 324.6027290000001, 1020.850466)
      ctx.bezierCurveTo(333.0014860000001, 1019.800621, 349.79900100000015, 1027.149534, 358.19775800000014, 1020.850466)
      ctx.bezierCurveTo(366.5965150000001, 1014.5513980000001, 368.69620500000013, 1006.152641, 372.89558300000016, 1008.25233)
      ctx.bezierCurveTo(374.99527200000017, 1010.352019, 380.24449600000014, 1017.7009320000001, 385.49371900000017, 1017.7009320000001)
      ctx.bezierCurveTo(391.79278700000015, 1017.7009320000001, 397.0420100000002, 1015.6012430000001, 402.29123300000015, 1011.401864)
      ctx.lineTo(404.39092300000016, 1009.302175)
      ctx.lineTo(404.39092300000016, 1008.25233)
      ctx.bezierCurveTo(405.44076800000016, 1006.152641, 403.34107800000015, 1003.003107, 400.19154400000014, 998.803728)
      ctx.bezierCurveTo(397.0420100000001, 994.604349, 393.89247600000016, 991.4548149999999, 389.69309800000013, 989.3551259999999)
      ctx.bezierCurveTo(386.5435640000001, 987.2554369999999, 384.44387500000016, 984.1059029999999, 381.29434000000015, 980.9563689999999)
      ctx.bezierCurveTo(378.14480600000013, 967.3083879999999, 380.24449500000014, 952.6105629999998, 387.5934080000001, 941.0622719999999)
      ctx.bezierCurveTo(392.8426310000001, 929.513981, 401.24138900000014, 920.0653789999999, 411.73983500000014, 913.7663109999999)
      ctx.bezierCurveTo(422.23828200000014, 905.3675539999998, 421.18843700000014, 912.7164659999999, 430.63703900000013, 887.5201949999998)
      ctx.bezierCurveTo(440.0856410000001, 862.3239239999998, 445.33486400000015, 845.5264089999998, 451.63393200000013, 832.9282729999999)
      ctx.bezierCurveTo(457.9330000000001, 820.3301369999999, 461.0825340000001, 816.1307589999999, 470.5311360000001, 815.0809129999999)
      ctx.bezierCurveTo(479.9797380000001, 814.0310669999999, 486.27880600000015, 815.0809129999999, 486.27880600000015, 806.6821559999998)
      ctx.bezierCurveTo(486.27880600000015, 798.2833989999998, 487.32865100000015, 789.8846419999999, 494.67756300000013, 790.9344859999999)
      ctx.bezierCurveTo(500.9766310000001, 794.0840199999999, 503.0763200000001, 788.8347969999999, 506.22585400000014, 786.7351079999999)
      ctx.bezierCurveTo(515.6744560000002, 776.2366609999998, 525.1230580000001, 764.6883699999998, 531.4221260000002, 753.1400789999999)
      ctx.bezierCurveTo(535.6215050000002, 742.6416319999998, 548.2196400000001, 736.3425649999999, 559.7679320000002, 738.4422539999999)
      ctx.bezierCurveTo(562.9174660000002, 738.4422539999999, 566.0670000000002, 737.3924089999999, 568.1666890000002, 737.3924089999999)
      ctx.bezierCurveTo(579.7149800000002, 735.2927199999999, 592.3131160000003, 733.1930299999999, 603.8614070000002, 733.1930299999999)
      ctx.bezierCurveTo(616.4595430000002, 733.1930299999999, 619.6090770000002, 716.3955159999999, 622.7586110000002, 706.9469139999999)
      ctx.bezierCurveTo(625.9081450000002, 697.4983119999998, 638.5062810000002, 695.3986229999999, 644.8053490000002, 691.1992439999999)
      ctx.bezierCurveTo(651.1044170000002, 686.9998649999999, 651.1044170000002, 674.4017299999999, 651.1044170000002, 674.4017299999999)
      ctx.lineTo(651.1044170000002, 670.2023509999999)
      ctx.bezierCurveTo(645.8551940000002, 674.4017299999999, 642.7056600000002, 674.4017299999999, 642.7056600000002, 671.2521959999999)
      ctx.bezierCurveTo(642.7056600000002, 668.1026619999999, 650.0545730000002, 664.9531279999999, 653.2041060000001, 661.8035939999999)
      ctx.bezierCurveTo(656.353639, 658.6540599999998, 647.9548830000001, 649.2054579999999, 641.6558150000002, 642.9063899999999)
      ctx.bezierCurveTo(635.3567470000003, 636.6073219999998, 637.4564360000002, 634.5076329999998, 633.2570580000001, 630.3082539999999)
      ctx.bezierCurveTo(629.0576800000001, 626.108875, 628.0078350000001, 620.8596519999999, 623.8084560000001, 617.710118)
      ctx.bezierCurveTo(621.7087670000001, 616.660273, 620.6589220000001, 615.610429, 619.6090770000001, 613.5107399999999)
      ctx.lineTo(619.6090770000001, 614.560584)
      ctx.bezierCurveTo(617.5093880000001, 616.660273, 603.8614070000001, 617.710118, 597.5623390000001, 621.909497)
      ctx.bezierCurveTo(591.263271, 626.108876, 587.063892, 624.009186, 584.9642040000001, 617.710118)
      ctx.bezierCurveTo(582.8645160000002, 611.4110499999999, 576.5654470000001, 614.560584, 571.3162230000002, 618.759963)
      ctx.bezierCurveTo(566.0669990000002, 622.959342, 562.9174660000001, 619.809808, 558.7180870000002, 611.4110499999999)
      ctx.bezierCurveTo(554.5187080000003, 603.0122919999999, 553.4688640000002, 604.0621369999999, 548.2196410000003, 607.2116719999999)
      ctx.bezierCurveTo(542.9704180000003, 610.3612069999999, 538.7710390000002, 610.3612059999999, 537.7211940000002, 604.0621379999999)
      ctx.bezierCurveTo(536.6713490000002, 597.7630699999999, 528.2725920000001, 600.9126039999999, 523.0233690000002, 598.8129139999999)
      ctx.bezierCurveTo(517.7741460000003, 596.7132239999999, 517.7741460000002, 583.0652439999999, 517.7741460000002, 570.4671089999998)
      ctx.bezierCurveTo(517.7741460000002, 557.8689739999998, 523.0233690000002, 555.7692839999999, 532.4719710000002, 551.5699049999998)
      ctx.bezierCurveTo(541.9205730000001, 547.3705259999998, 538.7710390000002, 540.0216139999999, 533.5218150000002, 534.7723899999999)
      ctx.bezierCurveTo(528.2725910000001, 529.5231659999998, 534.5716600000002, 519.0247199999999, 533.5218150000002, 511.67580799999985)
      ctx.bezierCurveTo(532.4719700000002, 504.3268959999998, 529.3224360000002, 503.27705099999986, 529.3224370000001, 498.02782699999983)
      ctx.bezierCurveTo(529.3224380000001, 492.7786029999998, 527.2227480000001, 490.67891399999985, 524.0732140000001, 484.3798469999998)
      ctx.bezierCurveTo(525.1230590000001, 479.13062399999984, 524.0732140000001, 472.8315559999998, 525.1230580000001, 467.58233199999984)
      ctx.bezierCurveTo(524.0732130000001, 468.63217699999984, 523.0233690000001, 468.63217699999984, 520.9236800000001, 468.63217699999984)
      ctx.bezierCurveTo(513.5747670000001, 465.4826429999998, 497.8270980000001, 463.38295399999987, 491.5280290000001, 473.8813999999998)
      ctx.bezierCurveTo(485.22896000000014, 484.37984599999976, 478.9298930000001, 485.4296909999998, 481.0295830000001, 490.6789149999998)
      ctx.bezierCurveTo(483.1292730000001, 495.92813899999976, 472.6308260000001, 500.1275169999998, 467.3816020000001, 493.8284489999998)
      ctx.bezierCurveTo(462.1323780000001, 487.52938099999983, 456.8831550000001, 473.8814009999998, 446.3847090000001, 477.03093399999983)
      ctx.bezierCurveTo(435.8862630000001, 480.18046699999985, 421.1884370000001, 474.9312449999998, 415.9392140000001, 481.23031299999985)
      ctx.bezierCurveTo(410.68999100000013, 487.5293809999999, 402.2912330000001, 491.72875999999985, 399.1417000000001, 486.4795359999998)
      ctx.bezierCurveTo(395.9921660000001, 481.23031299999985, 390.74294300000014, 478.08077899999984, 384.4438740000001, 480.18046799999985)
      ctx.bezierCurveTo(378.14480600000013, 482.28015699999986, 373.9454270000001, 474.9312449999999, 371.8457380000001, 468.63217699999984)
      ctx.bezierCurveTo(369.7460490000001, 462.3331089999998, 357.1479130000001, 453.9343519999998, 365.5466710000001, 452.88450699999987)
      ctx.bezierCurveTo(373.94542900000016, 451.8346619999999, 378.1448070000001, 442.3860599999999, 370.7958940000001, 436.0869929999999)
      ctx.bezierCurveTo(363.44698100000005, 429.7879259999999, 359.2476030000001, 421.38916799999987, 363.4469810000001, 417.1897889999999)
      ctx.bezierCurveTo(367.64635900000013, 412.99040999999994, 367.64636000000013, 410.8907209999999, 367.64636000000013, 410.8907209999999)
      ctx.bezierCurveTo(367.64636000000013, 410.8907209999999, 382.34418500000015, 401.44211899999993, 390.74294200000014, 396.1928959999999)
      ctx.bezierCurveTo(399.14169900000013, 390.9436729999999, 403.34107800000015, 386.7442939999999, 405.44076700000016, 390.94367299999993)
      ctx.bezierCurveTo(407.5404560000002, 395.14305199999995, 412.78968000000015, 381.49507099999994, 416.98905900000017, 375.1960029999999)
      ctx.bezierCurveTo(421.1884380000002, 368.89693499999987, 407.5404570000002, 359.44833299999993, 400.1915440000002, 349.9997309999999)
      ctx.bezierCurveTo(392.8426310000002, 340.55112899999983, 397.0420100000002, 325.85330399999987, 404.3909230000002, 323.75361499999985)
      ctx.bezierCurveTo(411.73983600000025, 321.65392599999984, 424.3379710000002, 324.80345999999986, 429.58719500000024, 316.4047019999999)
      ctx.bezierCurveTo(434.83641900000026, 308.0059439999999, 444.28502000000026, 291.20842999999985, 451.63393200000024, 291.20842999999985)
      ctx.bezierCurveTo(458.9828440000002, 291.20842999999985, 473.68067000000025, 289.10874099999984, 466.33175700000027, 281.75982799999986)
      ctx.bezierCurveTo(458.9828440000003, 274.4109149999999, 453.73362100000026, 267.06200299999983, 464.23206800000025, 269.16169199999985)
      ctx.bezierCurveTo(471.58098100000024, 271.26138099999986, 470.53113600000023, 268.11184699999984, 469.4812910000002, 263.9124689999999)
      ctx.bezierCurveTo(467.3816020000002, 255.51371199999988, 476.8302040000002, 256.5635559999999, 481.02958300000023, 250.26448899999988)
      ctx.bezierCurveTo(491.52803000000023, 235.5666639999999, 490.4781850000002, 255.51371199999988, 506.22585400000025, 271.2613819999999)
      ctx.bezierCurveTo(515.6744560000003, 280.7099839999999, 525.1230580000002, 296.45765399999993, 532.4719710000003, 294.3579639999999)
      ctx.bezierCurveTo(539.8208840000003, 292.2582739999999, 554.5187090000003, 295.40780899999993, 565.0171550000002, 296.45765399999993)
      ctx.bezierCurveTo(575.5156010000002, 297.50749899999994, 588.1137370000002, 292.2582749999999, 583.9143590000002, 297.50749799999994)
      ctx.bezierCurveTo(579.7149810000002, 302.75672099999997, 581.8146700000002, 312.20532299999996, 576.5654460000002, 311.15547899999996)
      ctx.bezierCurveTo(571.3162220000002, 310.10563499999995, 561.8676210000002, 312.20532399999996, 560.8177760000002, 321.65392499999996)
      ctx.bezierCurveTo(559.7679310000002, 331.10252699999995, 561.8676210000002, 339.50128399999994, 566.0670000000002, 347.900042)
      ctx.bezierCurveTo(569.2165340000003, 353.14926499999996, 572.3660680000003, 357.348644, 576.5654460000002, 360.498178)
      ctx.lineTo(581.8146700000002, 360.498178)
      ctx.bezierCurveTo(587.0638930000002, 361.548023, 592.3131170000003, 363.647712, 596.5124950000002, 366.797245)
      ctx.bezierCurveTo(598.6121840000002, 370.996624, 601.7617180000002, 379.395381, 607.0109410000001, 382.54491499999995)
      ctx.bezierCurveTo(612.260164, 385.6944489999999, 617.5093880000002, 385.69444899999996, 617.5093880000002, 390.94367299999993)
      ctx.bezierCurveTo(617.5093880000002, 396.1928969999999, 619.6090770000002, 395.14305199999995, 624.8583000000002, 400.39227399999993)
      ctx.bezierCurveTo(630.1075230000002, 405.6414959999999, 623.8084550000002, 405.6414969999999, 616.4595430000002, 406.6913419999999)
      ctx.bezierCurveTo(609.1106310000001, 407.7411869999999, 596.5124950000002, 406.6913419999999, 599.6620290000002, 416.1399439999999)
      ctx.bezierCurveTo(602.8115630000002, 425.5885459999999, 602.8115630000002, 441.3362159999999, 609.1106310000002, 446.5854389999999)
      ctx.bezierCurveTo(615.4096990000003, 451.83466199999987, 617.5093880000003, 448.6851279999999, 618.5592330000003, 459.1835749999999)
      ctx.bezierCurveTo(619.6090780000003, 469.6820219999999, 623.8084560000003, 474.9312449999999, 629.0576790000002, 468.6321769999999)
      ctx.bezierCurveTo(634.3069020000002, 462.3331089999999, 637.4564360000003, 460.2334199999999, 644.8053490000002, 463.3829539999999)
      ctx.bezierCurveTo(652.1542620000001, 466.53248799999994, 651.1044170000002, 469.6820219999999, 647.9548830000002, 480.1804679999999)
      ctx.bezierCurveTo(644.8053490000002, 490.6789139999999, 640.6059700000002, 502.2272059999999, 650.0545720000002, 504.3268949999999)
      ctx.bezierCurveTo(659.5031740000003, 506.42658399999993, 667.9019310000002, 506.42658399999993, 667.9019310000002, 511.6758079999999)
      ctx.bezierCurveTo(667.9019310000002, 516.9250319999999, 662.6527080000002, 517.9748759999999, 657.4034850000003, 520.0745649999999)
      ctx.bezierCurveTo(662.6527080000003, 519.0247199999999, 668.9517760000002, 517.9748759999999, 673.1511550000002, 516.9250309999999)
      ctx.bezierCurveTo(681.5499120000003, 513.7754969999999, 685.7492910000002, 523.2240989999999, 686.7991350000002, 526.3736329999999)
      ctx.bezierCurveTo(688.8988240000002, 532.672701, 693.0982030000002, 537.9219239999999, 698.3474260000002, 542.1213029999999)
      ctx.bezierCurveTo(706.7461830000002, 547.3705259999999, 718.2944740000002, 536.8720799999999, 726.6932320000002, 527.4234779999999)
      ctx.bezierCurveTo(735.0919900000002, 517.974876, 739.2913680000001, 519.0247209999999, 743.4907470000002, 522.1742549999999)
      ctx.bezierCurveTo(749.7898150000002, 524.2739439999999, 756.0888830000001, 523.2240999999999, 761.3381060000002, 520.0745649999999)
      ctx.bezierCurveTo(763.4377950000002, 517.9748759999999, 765.5374850000002, 515.8751859999999, 766.5873290000002, 516.9250309999999)
      ctx.bezierCurveTo(769.7368630000002, 516.9250309999999, 772.8863970000002, 515.8751859999999, 774.9860860000002, 513.7754969999999)
      ctx.bezierCurveTo(778.1356200000002, 510.62596299999984, 780.2353090000003, 510.62596299999984, 777.0857760000002, 514.8253419999999)
      ctx.bezierCurveTo(774.9860870000002, 517.9748759999999, 771.8365530000002, 521.1244099999999, 768.6870180000002, 524.2739439999999)
      ctx.bezierCurveTo(764.4876390000002, 527.4234779999999, 770.7867070000002, 526.3736329999999, 778.1356200000002, 522.1742549999999)
      ctx.bezierCurveTo(785.4845330000003, 516.9250319999999, 789.6839110000002, 509.5761189999999, 791.7836010000002, 500.1275169999999)
      ctx.bezierCurveTo(793.8832900000002, 492.7786039999999, 797.0328240000002, 486.4795359999999, 802.2820470000001, 480.1804679999999)
      ctx.bezierCurveTo(804.3817360000002, 478.0807789999999, 808.5811150000002, 473.8813999999999, 806.4814260000002, 468.6321769999999)
      ctx.bezierCurveTo(804.3817370000002, 463.38295399999987, 806.4814260000002, 460.2334199999999, 808.5811150000002, 454.9841969999999)
      ctx.bezierCurveTo(810.6808040000002, 449.73497399999985, 806.4814260000002, 450.78481799999986, 802.2820470000001, 449.73497299999985)
      ctx.bezierCurveTo(798.0826680000001, 448.68512799999985, 802.2820470000001, 446.58543899999984, 807.5312710000002, 444.4857499999999)
      ctx.bezierCurveTo(812.7804950000002, 442.3860609999999, 808.5811160000002, 436.0869929999999, 812.7804940000002, 426.6383909999999)
      ctx.bezierCurveTo(814.8801830000002, 419.2894779999999, 821.1792510000002, 414.0402549999999, 828.5281640000002, 412.9904099999999)
      ctx.bezierCurveTo(834.8272320000002, 412.9904099999999, 835.8770770000002, 410.89072099999987, 832.7275420000002, 406.6913419999999)
      ctx.bezierCurveTo(829.5780070000002, 402.49196299999994, 830.6278530000002, 400.39227399999993, 832.7275420000002, 398.2925849999999)
      ctx.bezierCurveTo(834.8272310000002, 396.1928959999999, 848.4752120000002, 390.94367199999994, 858.9736590000002, 385.6944489999999)
      ctx.lineTo(862.1231930000002, 383.5947599999999)
      ctx.bezierCurveTo(866.3225720000003, 382.5449149999999, 867.3724160000003, 378.3455369999999, 862.1231930000002, 375.1960029999999)
      ctx.clip()
      ctx.moveTo(566.067, 388.843983)
      ctx.bezierCurveTo(562.917466, 390.943672, 558.718087, 393.043362, 555.568553, 394.093207)
      ctx.bezierCurveTo(549.2694849999999, 396.192896, 541.920572, 397.242741, 534.57166, 396.192896)
      ctx.bezierCurveTo(529.3224369999999, 396.192896, 523.023369, 397.242741, 518.82399, 401.442119)
      ctx.bezierCurveTo(515.674456, 404.591653, 515.674456, 412.99041, 516.724301, 420.339323)
      ctx.bezierCurveTo(516.724301, 423.488857, 517.774146, 426.63839099999996, 518.82399, 429.787925)
      ctx.bezierCurveTo(519.873835, 436.08699299999995, 524.073213, 440.286372, 530.3722809999999, 443.435905)
      ctx.bezierCurveTo(532.4719699999999, 444.48575, 535.621504, 443.435905, 535.621505, 445.535595)
      ctx.lineTo(536.671349, 448.685129)
      ctx.bezierCurveTo(537.721194, 450.78481800000003, 538.771038, 453.934352, 539.820883, 457.083886)
      ctx.bezierCurveTo(540.870728, 460.23342, 541.920572, 464.432799, 546.119951, 462.333109)
      ctx.bezierCurveTo(550.31933, 460.23341899999997, 551.369174, 459.18357499999996, 557.668243, 462.333109)
      ctx.bezierCurveTo(563.9673119999999, 465.482643, 565.017156, 465.482643, 566.067, 460.23341999999997)
      ctx.bezierCurveTo(566.067, 452.884507, 566.067, 445.53559499999994, 567.116844, 438.18668199999996)
      ctx.bezierCurveTo(569.216533, 430.837769, 571.316223, 429.787925, 565.017155, 425.58854599999995)
      ctx.bezierCurveTo(558.718087, 421.38916699999993, 560.817776, 416.13994399999996, 563.96731, 410.8907209999999)
      ctx.bezierCurveTo(566.066999, 403.54180799999995, 566.066999, 396.1928959999999, 566.067, 388.8439829999999)
      ctx.restore()
      ctx.restore()
      ctx.clip()
    })

    osm.on('postrender', function (event) {
      const ctx = event.context
      ctx.restore()
    })
  }
}
</script>

<style>
  .map {
        width: 100%;
        height:800px;
      }
      #map {
        background: transparent;
      }
</style>

官网例子：https://openlayers.org/en/latest/examples/layer-clipping.html