背景
地图可视化项目中往往有要求进行内阴影的需求，但是对于可视化能力比较弱的giser来说,这个没有现成的方案，一般都会说进行ui切图然后进行贴图就行，但是这样对于动态生成的场景就不太满足，本文基于canvas进行动态绘制内阴影。
原理
内阴影的原理主要是用的canvas的shadowBlur和globalCompositeOperation
属性，shadowBlur让它整体有模糊的效果,globalCompositeOperation为'source-out'在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。另外高亮区域使用的是canvas的裁剪。
方案一
使用maptalks原生api,这里只要设置一下symbol和layer
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mtk内阴影-polong</title>
<style type="text/css">
html, body {
margin: 0px;
height: 100%;
width: 100%
}
.container {
width: 100%;
height: 100%
}
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<body>
<div id="map" class="container"></div>
<script>
var map = new maptalks.Map('map', {
center: [109.876457, 19.386884],
zoom: 13,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c', 'd']
})
})
var layer = new maptalks.VectorLayer('vector', {
globalCompositeOperation: 'source-out'
}).addTo(map)
var rect = new maptalks.Polygon([
[[109.876457, 19.386884], [109.874559, 19.38895], [109.872839, 19.392086], [109.87176, 19.392998], [109.868459, 19.393136], [109.867704, 19.395202], [109.868948, 19.399271], [109.8691, 19.401654], [109.868649, 19.404583], [109.865069, 19.409155], [109.863121, 19.41015], [109.859528, 19.410192], [109.857592, 19.411552], [109.857345, 19.413058], [109.86107, 19.416747], [109.861185, 19.417769], [109.858754, 19.419689], [109.856748, 19.42], [109.855396, 19.419053], [109.854291, 19.417223], [109.854729, 19.412202], [109.853263, 19.409674], [109.849524, 19.406945], [109.842771, 19.405115], [109.841723, 19.404576], [109.840092, 19.401668], [109.839882, 19.399968], [109.840619, 19.39811], [109.841444, 19.397627], [109.84463, 19.396963], [109.847804, 19.394974], [109.851067, 19.39172], [109.852305, 19.391679], [109.853498, 19.390484], [109.853561, 19.38895], [109.851105, 19.388162], [109.847893, 19.388743], [109.846541, 19.387527], [109.844535, 19.384743], [109.842891, 19.384363], [109.841368, 19.38589], [109.840962, 19.387285], [109.839311, 19.389074], [109.837635, 19.389447], [109.836588, 19.390435], [109.832304, 19.393171], [109.82953, 19.395692], [109.827302, 19.395803], [109.823855, 19.394808], [109.821925, 19.39362], [109.818326, 19.390643], [109.815844, 19.38971], [109.810011, 19.389365], [109.808665, 19.388909], [109.806615, 19.38694], [109.805301, 19.38522], [109.803264, 19.383555], [109.801378, 19.382926], [109.796954, 19.382594], [109.795907, 19.38218], [109.793476, 19.379955], [109.792467, 19.375665], [109.792606, 19.373302], [109.789534, 19.37306], [109.787623, 19.373578], [109.786728, 19.377054], [109.785954, 19.377724], [109.782666, 19.378553], [109.780425, 19.378152], [109.778699, 19.379582], [109.776966, 19.382055], [109.773538, 19.384846], [109.772827, 19.386166], [109.773126, 19.387278], [109.774725, 19.39018], [109.774814, 19.391492], [109.772009, 19.394532], [109.771285, 19.396687], [109.768809, 19.399208], [109.767635, 19.399692], [109.765153, 19.399727], [109.762246, 19.400148], [109.758438, 19.401398], [109.750541, 19.401177], [109.745965, 19.401619], [109.743146, 19.40327], [109.74182, 19.404928], [109.735612, 19.408831], [109.73379, 19.408755], [109.731797, 19.407822], [109.730058, 19.407974], [109.724497, 19.406337], [109.721482, 19.403996], [109.719369, 19.403236], [109.715693, 19.404707], [109.713853, 19.404976], [109.710888, 19.40604], [109.708857, 19.407083], [109.703798, 19.411207], [109.700828, 19.413908], [109.699641, 19.414288], [109.696918, 19.414329], [109.692569, 19.414032], [109.689161, 19.412278], [109.6848, 19.411794], [109.679722, 19.410198], [109.678573, 19.409625], [109.674187, 19.40642], [109.670588, 19.4047], [109.668297, 19.40441], [109.664291, 19.404431], [109.662298, 19.40508], [109.659099, 19.406676], [109.654789, 19.40613], [109.650174, 19.403837], [109.646436, 19.4024], [109.644462, 19.400887], [109.642615, 19.397357], [109.642983, 19.394691], [109.645147, 19.393053], [109.647997, 19.391375], [109.648695, 19.390311], [109.648581, 19.387057], [109.647445, 19.385226], [109.647445, 19.383941], [109.646226, 19.375672], [109.647534, 19.37333], [109.649108, 19.37134], [109.651241, 19.369267], [109.651336, 19.367264], [109.648994, 19.362793], [109.647946, 19.360409], [109.647248, 19.357549], [109.647464, 19.355642], [109.648232, 19.353327], [109.650168, 19.351738], [109.653386, 19.350694], [109.655919, 19.350494], [109.657798, 19.351703], [109.661092, 19.351759], [109.663999, 19.352194], [109.665059, 19.351047], [109.668201, 19.34999], [109.66876, 19.351054], [109.670696, 19.352664], [109.673267, 19.352622], [109.676828, 19.351772], [109.678776, 19.348974], [109.679855, 19.348884], [109.686679, 19.350328], [109.688463, 19.350328], [109.690557, 19.349637], [109.693357, 19.350024], [109.697565, 19.349872], [109.700212, 19.349485], [109.700421, 19.348691], [109.698612, 19.346707], [109.698612, 19.345249], [109.701183, 19.34234], [109.701843, 19.339528], [109.704243, 19.340156], [109.70675, 19.342382], [109.708692, 19.342492], [109.70946, 19.342043], [109.709739, 19.337565], [109.710812, 19.335727], [109.71245, 19.331221], [109.713922, 19.329798], [109.713764, 19.32818], [109.711707, 19.327026], [109.712304, 19.325769], [109.713104, 19.319804], [109.712977, 19.316494], [109.713415, 19.31281], [109.713415, 19.309886], [109.712843, 19.307025], [109.711574, 19.302512], [109.709733, 19.298378], [109.706839, 19.294017], [109.705328, 19.290553], [109.704827, 19.288203], [109.704058, 19.286676], [109.702084, 19.285397], [109.700193, 19.283655], [109.698517, 19.279549], [109.697495, 19.275795], [109.697241, 19.27128], [109.698447, 19.269151], [109.700396, 19.267029], [109.704249, 19.257723], [109.705455, 19.251397], [109.707683, 19.247075], [109.707911, 19.244794], [109.707721, 19.239041], [109.706889, 19.230805], [109.706985, 19.225626], [109.70682, 19.221622], [109.705074, 19.217424], [109.703481, 19.215357], [109.701761, 19.214458], [109.70084, 19.213351], [109.700612, 19.209693], [109.699691, 19.207148], [109.697019, 19.20481], [109.695204, 19.201864], [109.694359, 19.198717], [109.694131, 19.194505], [109.693515, 19.193121], [109.691459, 19.19142], [109.689738, 19.18938], [109.689129, 19.185091], [109.687714, 19.182117], [109.68699, 19.178935], [109.685041, 19.173588], [109.685606, 19.170973], [109.687358, 19.16795], [109.687555, 19.167079], [109.689535, 19.163149], [109.691287, 19.161205], [109.696067, 19.158957], [109.699082, 19.157214], [109.701139, 19.155629], [109.701494, 19.15437], [109.701494, 19.151029], [109.699774, 19.144228], [109.69985, 19.140118], [109.701602, 19.136064], [109.701164, 19.134632], [109.688945, 19.119305], [109.687733, 19.118766], [109.682204, 19.122558], [109.676498, 19.12727], [109.675025, 19.127982], [109.67187, 19.128467], [109.664482, 19.128737], [109.661473, 19.127546], [109.658699, 19.124336], [109.656376, 19.120738], [109.655049, 19.117195], [109.654269, 19.114344], [109.654192, 19.112136], [109.654707, 19.10541], [109.65451, 19.104331], [109.652878, 19.102815], [109.648613, 19.101625], [109.644246, 19.097922], [109.643008, 19.097154], [109.63946, 19.096427], [109.635683, 19.094857], [109.632541, 19.095313], [109.630567, 19.096317], [109.627539, 19.095722], [109.624861, 19.092434], [109.619408, 19.08932], [109.615536, 19.087624], [109.613556, 19.08642], [109.611137, 19.082897], [109.610756, 19.079997], [109.611137, 19.077685], [109.613295, 19.072349], [109.615657, 19.064804], [109.615301, 19.062444], [109.613708, 19.058028], [109.612013, 19.056429], [109.609392, 19.054892], [109.606465, 19.053812], [109.601483, 19.053556], [109.597376, 19.056124], [109.590546, 19.05962], [109.574214, 19.068411], [109.565854, 19.071629], [109.561366, 19.07264], [109.55778, 19.072619], [109.553038, 19.071685], [109.547123, 19.068307], [109.544311, 19.064638], [109.542794, 19.061793], [109.542743, 19.053528], [109.541391, 19.050018], [109.540318, 19.046218], [109.540159, 19.040036], [109.539652, 19.039316], [109.534009, 19.03753], [109.531451, 19.036152], [109.528429, 19.033237], [109.52403, 19.030939], [109.523821, 19.029319], [109.524671, 19.027166], [109.525693, 19.023337], [109.527229, 19.019861], [109.529197, 19.017445], [109.533145, 19.014537], [109.529584, 19.011255], [109.529223, 19.008076], [109.528658, 19.006228], [109.528632, 19.001533], [109.528867, 19.000093], [109.529781, 18.998832], [109.533291, 18.996028], [109.53411, 18.994892], [109.535183, 18.989241], [109.537798, 18.987877], [109.538522, 18.986541], [109.541384, 18.982683], [109.544069, 18.979671], [109.545104, 18.977586], [109.548138, 18.968312], [109.548297, 18.966262], [109.548481, 18.958069], [109.548703, 18.955527], [109.549985, 18.952652], [109.553597, 18.946328], [109.555362, 18.944603], [109.558777, 18.943876], [109.567282, 18.941043], [109.568641, 18.940343], [109.571929, 18.939366], [109.573306, 18.937593], [109.573776, 18.932792], [109.575978, 18.927701], [109.578663, 18.924549], [109.580485, 18.923821], [109.586947, 18.92351], [109.590375, 18.923177], [109.591796, 18.923302], [109.596132, 18.922983], [109.597477, 18.921847], [109.598074, 18.918459], [109.599731, 18.915958], [109.600937, 18.913263], [109.601527, 18.910332], [109.602384, 18.909501], [109.603558, 18.909591], [109.605558, 18.910991], [109.611271, 18.91221], [109.616342, 18.911482], [109.619287, 18.912064], [109.621306, 18.91372], [109.62168, 18.918043], [109.622772, 18.919096], [109.627476, 18.920413], [109.629894, 18.920378], [109.632935, 18.91929], [109.6364, 18.917101], [109.638298, 18.915625], [109.640837, 18.915127], [109.643078, 18.917683], [109.644436, 18.918203], [109.650473, 18.918418], [109.654561, 18.917551], [109.66007, 18.915272], [109.66318, 18.915438], [109.66471, 18.917579], [109.665935, 18.918521], [109.670423, 18.920309], [109.673584, 18.921888], [109.675679, 18.925297], [109.677646, 18.925657], [109.678687, 18.92466], [109.680934, 18.924265], [109.682775, 18.924535], [109.686336, 18.926599], [109.688526, 18.926696], [109.694937, 18.924161], [109.697895, 18.921099], [109.698942, 18.92087], [109.704014, 18.922921], [109.705963, 18.922886], [109.709473, 18.921237], [109.712774, 18.916734], [109.715973, 18.915799], [109.730477, 18.913699], [109.731867, 18.912626], [109.731448, 18.909667], [109.729652, 18.907208], [109.722847, 18.900674], [109.719496, 18.899364], [109.718093, 18.89926], [109.715389, 18.899718], [109.711301, 18.89951], [109.709682, 18.898942], [109.707829, 18.897604], [109.704414, 18.894466], [109.699107, 18.889324], [109.697927, 18.886573], [109.697806, 18.884134], [109.699158, 18.880108], [109.702224, 18.875749], [109.704071, 18.874516], [109.70675, 18.873241], [109.708134, 18.871342], [109.710196, 18.869235], [109.714202, 18.86611], [109.715186, 18.86401], [109.716366, 18.860212], [109.716779, 18.857953], [109.716461, 18.855541], [109.714976, 18.852096], [109.71457, 18.844861], [109.714043, 18.843114], [109.714487, 18.838879], [109.714392, 18.835836], [109.715452, 18.833743], [109.721178, 18.832863], [109.722035, 18.832454], [109.725672, 18.828877], [109.729639, 18.827262], [109.738037, 18.819027], [109.740836, 18.818028], [109.743661, 18.817342], [109.746765, 18.817599], [109.751982, 18.819186], [109.75819, 18.819165], [109.761243, 18.820364], [109.764353, 18.821037], [109.766505, 18.820649], [109.770149, 18.817307], [109.771736, 18.814486], [109.772097, 18.812483], [109.775125, 18.806243], [109.775716, 18.804288], [109.775258, 18.802264], [109.776096, 18.800822], [109.777791, 18.799976], [109.778153, 18.797924], [109.779257, 18.797612], [109.782152, 18.793064], [109.787585, 18.793397], [109.789198, 18.793085], [109.792511, 18.789979], [109.800636, 18.784161], [109.802273, 18.783156], [109.805092, 18.780251], [109.806501, 18.776146], [109.806939, 18.771521], [109.80765, 18.770162], [109.810297, 18.768075], [109.811116, 18.766917], [109.811109, 18.764025], [109.809884, 18.761889], [109.809979, 18.7594], [109.810703, 18.756168], [109.811135, 18.750489], [109.813864, 18.743339], [109.814093, 18.74225], [109.815883, 18.742014], [109.818974, 18.742881], [109.82018, 18.742389], [109.823874, 18.736355], [109.830742, 18.728559], [109.831739, 18.728226], [109.836017, 18.727858], [109.837375, 18.72824], [109.839984, 18.729905], [109.842853, 18.730668], [109.845703, 18.730841], [109.852609, 18.730203], [109.855205, 18.729412], [109.857141, 18.72919], [109.859039, 18.729988], [109.861724, 18.732381], [109.865419, 18.73752], [109.867151, 18.738893], [109.870243, 18.740287], [109.871309, 18.742853], [109.872141, 18.746348], [109.873785, 18.747521], [109.877917, 18.746619], [109.879631, 18.747125], [109.88436, 18.754247], [109.88733, 18.755912], [109.890079, 18.755371], [109.891024, 18.754449], [109.892903, 18.749878], [109.89508, 18.745412], [109.898216, 18.74089], [109.89993, 18.739406], [109.902367, 18.739379], [109.903116, 18.740329], [109.903421, 18.742201], [109.904189, 18.743734], [109.905859, 18.744968], [109.908962, 18.746459], [109.913418, 18.750503], [109.917011, 18.754442], [109.920972, 18.760579], [109.922318, 18.761175], [109.924457, 18.76096], [109.925955, 18.761307], [109.927434, 18.76225], [109.928887, 18.763942], [109.930792, 18.764254], [109.932924, 18.763949], [109.935393, 18.764358], [109.936828, 18.765752], [109.937653, 18.767624], [109.938866, 18.769066], [109.941976, 18.770557], [109.944109, 18.771868], [109.947092, 18.772436], [109.952944, 18.772526], [109.958575, 18.773615], [109.96628, 18.773594], [109.969702, 18.771126], [109.974996, 18.766355], [109.975865, 18.766279], [109.979217, 18.767367], [109.980454, 18.767139], [109.982048, 18.765731], [109.983279, 18.763914], [109.98519, 18.758193], [109.987913, 18.756994], [109.991004, 18.754386], [109.992553, 18.751876], [109.993143, 18.746772], [109.993791, 18.745641], [109.996076, 18.743595], [109.998291, 18.742215], [110.001071, 18.739732], [110.00321, 18.737118], [110.005737, 18.734739], [110.009342, 18.733109], [110.014921, 18.732818], [110.023764, 18.735363], [110.029578, 18.737249], [110.030866, 18.737894], [110.031019, 18.741924], [110.031863, 18.744906], [110.030917, 18.747167], [110.031089, 18.749525], [110.031615, 18.750142], [110.036782, 18.753263], [110.037531, 18.754317], [110.040007, 18.760405], [110.041905, 18.761487], [110.044482, 18.761626], [110.047211, 18.760502], [110.051655, 18.756356], [110.053863, 18.755974], [110.057266, 18.758491], [110.058345, 18.760066], [110.05971, 18.763685], [110.060947, 18.76605], [110.06341, 18.769469], [110.0656, 18.771882], [110.066939, 18.772859], [110.070659, 18.773095], [110.071789, 18.774586], [110.068767, 18.778254], [110.068767, 18.780077], [110.069605, 18.78231], [110.070564, 18.78724], [110.072366, 18.788474], [110.079482, 18.790103], [110.081951, 18.791441], [110.084973, 18.794728], [110.090736, 18.800427], [110.094824, 18.805786], [110.095782, 18.811491], [110.093142, 18.817779], [110.090133, 18.821099], [110.08762, 18.824635], [110.083855, 18.833258], [110.08218, 18.839517], [110.077159, 18.846801], [110.073465, 18.851292], [110.06951, 18.855333], [110.062718, 18.86085], [110.057005, 18.871612], [110.049896, 18.880212], [110.045313, 18.884772], [110.047859, 18.889851], [110.054968, 18.892907], [110.06666, 18.897487], [110.076302, 18.901561], [110.080948, 18.90427], [110.086877, 18.907041], [110.094005, 18.909771], [110.097712, 18.911704], [110.104478, 18.91742], [110.106421, 18.923551], [110.106351, 18.92768], [110.106021, 18.930409], [110.105437, 18.931663], [110.105748, 18.932702], [110.105266, 18.936672], [110.108249, 18.944589], [110.113022, 18.948773], [110.13157, 18.962661], [110.138146, 18.967724], [110.141694, 18.970252], [110.14966, 18.978279], [110.14966, 18.982247], [110.149121, 18.985959], [110.149774, 18.989027], [110.150511, 18.990072], [110.15258, 18.991284], [110.154065, 18.993002], [110.157874, 18.996249], [110.158566, 18.999372], [110.157779, 19.00057], [110.15795, 19.002246], [110.156903, 19.004808], [110.155754, 19.005992], [110.153989, 19.006872], [110.15284, 19.009039], [110.152834, 19.010327], [110.154465, 19.015264], [110.155182, 19.016745], [110.158071, 19.019321], [110.15484, 19.023157], [110.151628, 19.02414], [110.148829, 19.02423], [110.144988, 19.0254], [110.140494, 19.03269], [110.140278, 19.034664], [110.139441, 19.036145], [110.13767, 19.03762], [110.134039, 19.03879], [110.131538, 19.040652], [110.129253, 19.042722], [110.128288, 19.045096], [110.128402, 19.046723], [110.124073, 19.047485], [110.123876, 19.050088], [110.121763, 19.055314], [110.120988, 19.060298], [110.123902, 19.062859], [110.123051, 19.067511], [110.124568, 19.070882], [110.125628, 19.078869], [110.123121, 19.088607], [110.12128, 19.096933], [110.120887, 19.104753], [110.121414, 19.111839], [110.119097, 19.120191], [110.116799, 19.128993], [110.115276, 19.133179], [110.109766, 19.138001], [110.10663, 19.138575], [110.101851, 19.139904], [110.094595, 19.140388], [110.084408, 19.14007], [110.078054, 19.138686], [110.068983, 19.136479], [110.06579, 19.135441], [110.057272, 19.13459], [110.051109, 19.138472], [110.048601, 19.142222], [110.047732, 19.144782], [110.046976, 19.150081], [110.043663, 19.157995], [110.039201, 19.161586], [110.033278, 19.165225], [110.031457, 19.167646], [110.030943, 19.169465], [110.029305, 19.172419], [110.030517, 19.175366], [110.031488, 19.176715], [110.028467, 19.177005], [110.0282, 19.176113], [110.026512, 19.175691], [110.020279, 19.176549], [110.018368, 19.177143], [110.015874, 19.176673], [110.013144, 19.177226], [110.011716, 19.178665], [110.009355, 19.177863], [110.007869, 19.178243], [110.0046, 19.177904], [110.002677, 19.180837], [110.002226, 19.18256], [110.000132, 19.182663], [109.99944, 19.183154], [109.99963, 19.184752], [109.999053, 19.185395], [110.000506, 19.186945], [110.0001, 19.187477], [109.997828, 19.188107], [109.997542, 19.189933], [109.995879, 19.190535], [109.99447, 19.189801], [109.993873, 19.191745], [109.977319, 19.192125], [109.973396, 19.190742], [109.957642, 19.18866], [109.95363, 19.195902], [109.953262, 19.198668], [109.953947, 19.20369], [109.954861, 19.208247], [109.954322, 19.212853], [109.950704, 19.219402], [109.945162, 19.226476], [109.937869, 19.23223], [109.930455, 19.234774], [109.923606, 19.239601], [109.91736, 19.240963], [109.911235, 19.239566], [109.900311, 19.238813], [109.896445, 19.239179], [109.891761, 19.243017], [109.887349, 19.24776], [109.885521, 19.250353], [109.879256, 19.25746], [109.875625, 19.26333], [109.87009, 19.270181], [109.866802, 19.272829], [109.862537, 19.275048], [109.856037, 19.275974], [109.849499, 19.27576], [109.847652, 19.273887], [109.846008, 19.273845], [109.844192, 19.274751], [109.840194, 19.278747], [109.837178, 19.279991], [109.834532, 19.279521], [109.831878, 19.279963], [109.830431, 19.280648], [109.822706, 19.289683], [109.82197, 19.29121], [109.821868, 19.29271], [109.822706, 19.295634], [109.823442, 19.309278], [109.825258, 19.312292], [109.823747, 19.316736], [109.82435, 19.318899], [109.825556, 19.321041], [109.826451, 19.328229], [109.826908, 19.330378], [109.827054, 19.333253], [109.827841, 19.335651], [109.827175, 19.337047], [109.824065, 19.338954], [109.824337, 19.340143], [109.826445, 19.343156], [109.830215, 19.344876], [109.832164, 19.346742], [109.834436, 19.348117], [109.837052, 19.348608], [109.843291, 19.353417], [109.843793, 19.36005], [109.843462, 19.363961], [109.845951, 19.371672], [109.849277, 19.376135], [109.852393, 19.381751], [109.855859, 19.383693], [109.859839, 19.386297], [109.864549, 19.386726], [109.867754, 19.385454], [109.869563, 19.385171], [109.869874, 19.387658], [109.871518, 19.388052], [109.873562, 19.386401], [109.876457, 19.386884]]], {
symbol: {
'polygonFill': 'rgb(52,149,233)',
shadowBlur: 200,
shadowColor: 'rgb(52,149,233)',
'polygonOpacity': 1,
'lineColor': '#1bbc9b',
'lineWidth': 0,
'lineJoin': 'round', //miter, round, bevel
'lineCap': 'round', //butt, round, square
'lineDasharray': null, //dasharray, e.g. [10, 5, 5]
'lineOpacity ': 1
}
}
).addTo(layer)
</script>
</body>
</html>
展示效果
方案二
本方案比较复杂且只支持二维还不支持每个层级重绘，通过绘制图形到canvas上导出base64在贴到图层上，要确定能缩放到图形整体，这样才能使用地图的api转换(目前支持单面)，首先将图形的点转为屏幕坐标（小技巧是要减去最小经纬度的屏幕坐标，这样绘制的图片会小一点），绘制图形，设置shadowblur和globalCompositeOperation（'source-out'）， 绘制完图形之后通过imageLayer就行了
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>瓦片图层与地理投影 - 百度投影底图</title>
<style type="text/css">
html, body {
margin: 0px;
height: 100%;
width: 100%
}
.container {
width: 100%;
height: 100%
}
.pane {
background: #34495e;
line-height: 28px;
color: #fff;
z-index: 10;
position: absolute;
top: 20px;
right: 20px
}
.pane a {
display: block;
color: #fff;
text-align: left;
padding: 0 10px;
min-width: 28px;
min-height: 28px;
float: left
}
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<body>
<div id="map" class="container"></div>
<div class="pane"><a href="javascript:save();">Export image</a></div>
<script>
var boundary = [[[109.876457, 19.386884], [109.874559, 19.38895], [109.872839, 19.392086], [109.87176, 19.392998], [109.868459, 19.393136], [109.867704, 19.395202], [109.868948, 19.399271], [109.8691, 19.401654], [109.868649, 19.404583], [109.865069, 19.409155], [109.863121, 19.41015], [109.859528, 19.410192], [109.857592, 19.411552], [109.857345, 19.413058], [109.86107, 19.416747], [109.861185, 19.417769], [109.858754, 19.419689], [109.856748, 19.42], [109.855396, 19.419053], [109.854291, 19.417223], [109.854729, 19.412202], [109.853263, 19.409674], [109.849524, 19.406945], [109.842771, 19.405115], [109.841723, 19.404576], [109.840092, 19.401668], [109.839882, 19.399968], [109.840619, 19.39811], [109.841444, 19.397627], [109.84463, 19.396963], [109.847804, 19.394974], [109.851067, 19.39172], [109.852305, 19.391679], [109.853498, 19.390484], [109.853561, 19.38895], [109.851105, 19.388162], [109.847893, 19.388743], [109.846541, 19.387527], [109.844535, 19.384743], [109.842891, 19.384363], [109.841368, 19.38589], [109.840962, 19.387285], [109.839311, 19.389074], [109.837635, 19.389447], [109.836588, 19.390435], [109.832304, 19.393171], [109.82953, 19.395692], [109.827302, 19.395803], [109.823855, 19.394808], [109.821925, 19.39362], [109.818326, 19.390643], [109.815844, 19.38971], [109.810011, 19.389365], [109.808665, 19.388909], [109.806615, 19.38694], [109.805301, 19.38522], [109.803264, 19.383555], [109.801378, 19.382926], [109.796954, 19.382594], [109.795907, 19.38218], [109.793476, 19.379955], [109.792467, 19.375665], [109.792606, 19.373302], [109.789534, 19.37306], [109.787623, 19.373578], [109.786728, 19.377054], [109.785954, 19.377724], [109.782666, 19.378553], [109.780425, 19.378152], [109.778699, 19.379582], [109.776966, 19.382055], [109.773538, 19.384846], [109.772827, 19.386166], [109.773126, 19.387278], [109.774725, 19.39018], [109.774814, 19.391492], [109.772009, 19.394532], [109.771285, 19.396687], [109.768809, 19.399208], [109.767635, 19.399692], [109.765153, 19.399727], [109.762246, 19.400148], [109.758438, 19.401398], [109.750541, 19.401177], [109.745965, 19.401619], [109.743146, 19.40327], [109.74182, 19.404928], [109.735612, 19.408831], [109.73379, 19.408755], [109.731797, 19.407822], [109.730058, 19.407974], [109.724497, 19.406337], [109.721482, 19.403996], [109.719369, 19.403236], [109.715693, 19.404707], [109.713853, 19.404976], [109.710888, 19.40604], [109.708857, 19.407083], [109.703798, 19.411207], [109.700828, 19.413908], [109.699641, 19.414288], [109.696918, 19.414329], [109.692569, 19.414032], [109.689161, 19.412278], [109.6848, 19.411794], [109.679722, 19.410198], [109.678573, 19.409625], [109.674187, 19.40642], [109.670588, 19.4047], [109.668297, 19.40441], [109.664291, 19.404431], [109.662298, 19.40508], [109.659099, 19.406676], [109.654789, 19.40613], [109.650174, 19.403837], [109.646436, 19.4024], [109.644462, 19.400887], [109.642615, 19.397357], [109.642983, 19.394691], [109.645147, 19.393053], [109.647997, 19.391375], [109.648695, 19.390311], [109.648581, 19.387057], [109.647445, 19.385226], [109.647445, 19.383941], [109.646226, 19.375672], [109.647534, 19.37333], [109.649108, 19.37134], [109.651241, 19.369267], [109.651336, 19.367264], [109.648994, 19.362793], [109.647946, 19.360409], [109.647248, 19.357549], [109.647464, 19.355642], [109.648232, 19.353327], [109.650168, 19.351738], [109.653386, 19.350694], [109.655919, 19.350494], [109.657798, 19.351703], [109.661092, 19.351759], [109.663999, 19.352194], [109.665059, 19.351047], [109.668201, 19.34999], [109.66876, 19.351054], [109.670696, 19.352664], [109.673267, 19.352622], [109.676828, 19.351772], [109.678776, 19.348974], [109.679855, 19.348884], [109.686679, 19.350328], [109.688463, 19.350328], [109.690557, 19.349637], [109.693357, 19.350024], [109.697565, 19.349872], [109.700212, 19.349485], [109.700421, 19.348691], [109.698612, 19.346707], [109.698612, 19.345249], [109.701183, 19.34234], [109.701843, 19.339528], [109.704243, 19.340156], [109.70675, 19.342382], [109.708692, 19.342492], [109.70946, 19.342043], [109.709739, 19.337565], [109.710812, 19.335727], [109.71245, 19.331221], [109.713922, 19.329798], [109.713764, 19.32818], [109.711707, 19.327026], [109.712304, 19.325769], [109.713104, 19.319804], [109.712977, 19.316494], [109.713415, 19.31281], [109.713415, 19.309886], [109.712843, 19.307025], [109.711574, 19.302512], [109.709733, 19.298378], [109.706839, 19.294017], [109.705328, 19.290553], [109.704827, 19.288203], [109.704058, 19.286676], [109.702084, 19.285397], [109.700193, 19.283655], [109.698517, 19.279549], [109.697495, 19.275795], [109.697241, 19.27128], [109.698447, 19.269151], [109.700396, 19.267029], [109.704249, 19.257723], [109.705455, 19.251397], [109.707683, 19.247075], [109.707911, 19.244794], [109.707721, 19.239041], [109.706889, 19.230805], [109.706985, 19.225626], [109.70682, 19.221622], [109.705074, 19.217424], [109.703481, 19.215357], [109.701761, 19.214458], [109.70084, 19.213351], [109.700612, 19.209693], [109.699691, 19.207148], [109.697019, 19.20481], [109.695204, 19.201864], [109.694359, 19.198717], [109.694131, 19.194505], [109.693515, 19.193121], [109.691459, 19.19142], [109.689738, 19.18938], [109.689129, 19.185091], [109.687714, 19.182117], [109.68699, 19.178935], [109.685041, 19.173588], [109.685606, 19.170973], [109.687358, 19.16795], [109.687555, 19.167079], [109.689535, 19.163149], [109.691287, 19.161205], [109.696067, 19.158957], [109.699082, 19.157214], [109.701139, 19.155629], [109.701494, 19.15437], [109.701494, 19.151029], [109.699774, 19.144228], [109.69985, 19.140118], [109.701602, 19.136064], [109.701164, 19.134632], [109.688945, 19.119305], [109.687733, 19.118766], [109.682204, 19.122558], [109.676498, 19.12727], [109.675025, 19.127982], [109.67187, 19.128467], [109.664482, 19.128737], [109.661473, 19.127546], [109.658699, 19.124336], [109.656376, 19.120738], [109.655049, 19.117195], [109.654269, 19.114344], [109.654192, 19.112136], [109.654707, 19.10541], [109.65451, 19.104331], [109.652878, 19.102815], [109.648613, 19.101625], [109.644246, 19.097922], [109.643008, 19.097154], [109.63946, 19.096427], [109.635683, 19.094857], [109.632541, 19.095313], [109.630567, 19.096317], [109.627539, 19.095722], [109.624861, 19.092434], [109.619408, 19.08932], [109.615536, 19.087624], [109.613556, 19.08642], [109.611137, 19.082897], [109.610756, 19.079997], [109.611137, 19.077685], [109.613295, 19.072349], [109.615657, 19.064804], [109.615301, 19.062444], [109.613708, 19.058028], [109.612013, 19.056429], [109.609392, 19.054892], [109.606465, 19.053812], [109.601483, 19.053556], [109.597376, 19.056124], [109.590546, 19.05962], [109.574214, 19.068411], [109.565854, 19.071629], [109.561366, 19.07264], [109.55778, 19.072619], [109.553038, 19.071685], [109.547123, 19.068307], [109.544311, 19.064638], [109.542794, 19.061793], [109.542743, 19.053528], [109.541391, 19.050018], [109.540318, 19.046218], [109.540159, 19.040036], [109.539652, 19.039316], [109.534009, 19.03753], [109.531451, 19.036152], [109.528429, 19.033237], [109.52403, 19.030939], [109.523821, 19.029319], [109.524671, 19.027166], [109.525693, 19.023337], [109.527229, 19.019861], [109.529197, 19.017445], [109.533145, 19.014537], [109.529584, 19.011255], [109.529223, 19.008076], [109.528658, 19.006228], [109.528632, 19.001533], [109.528867, 19.000093], [109.529781, 18.998832], [109.533291, 18.996028], [109.53411, 18.994892], [109.535183, 18.989241], [109.537798, 18.987877], [109.538522, 18.986541], [109.541384, 18.982683], [109.544069, 18.979671], [109.545104, 18.977586], [109.548138, 18.968312], [109.548297, 18.966262], [109.548481, 18.958069], [109.548703, 18.955527], [109.549985, 18.952652], [109.553597, 18.946328], [109.555362, 18.944603], [109.558777, 18.943876], [109.567282, 18.941043], [109.568641, 18.940343], [109.571929, 18.939366], [109.573306, 18.937593], [109.573776, 18.932792], [109.575978, 18.927701], [109.578663, 18.924549], [109.580485, 18.923821], [109.586947, 18.92351], [109.590375, 18.923177], [109.591796, 18.923302], [109.596132, 18.922983], [109.597477, 18.921847], [109.598074, 18.918459], [109.599731, 18.915958], [109.600937, 18.913263], [109.601527, 18.910332], [109.602384, 18.909501], [109.603558, 18.909591], [109.605558, 18.910991], [109.611271, 18.91221], [109.616342, 18.911482], [109.619287, 18.912064], [109.621306, 18.91372], [109.62168, 18.918043], [109.622772, 18.919096], [109.627476, 18.920413], [109.629894, 18.920378], [109.632935, 18.91929], [109.6364, 18.917101], [109.638298, 18.915625], [109.640837, 18.915127], [109.643078, 18.917683], [109.644436, 18.918203], [109.650473, 18.918418], [109.654561, 18.917551], [109.66007, 18.915272], [109.66318, 18.915438], [109.66471, 18.917579], [109.665935, 18.918521], [109.670423, 18.920309], [109.673584, 18.921888], [109.675679, 18.925297], [109.677646, 18.925657], [109.678687, 18.92466], [109.680934, 18.924265], [109.682775, 18.924535], [109.686336, 18.926599], [109.688526, 18.926696], [109.694937, 18.924161], [109.697895, 18.921099], [109.698942, 18.92087], [109.704014, 18.922921], [109.705963, 18.922886], [109.709473, 18.921237], [109.712774, 18.916734], [109.715973, 18.915799], [109.730477, 18.913699], [109.731867, 18.912626], [109.731448, 18.909667], [109.729652, 18.907208], [109.722847, 18.900674], [109.719496, 18.899364], [109.718093, 18.89926], [109.715389, 18.899718], [109.711301, 18.89951], [109.709682, 18.898942], [109.707829, 18.897604], [109.704414, 18.894466], [109.699107, 18.889324], [109.697927, 18.886573], [109.697806, 18.884134], [109.699158, 18.880108], [109.702224, 18.875749], [109.704071, 18.874516], [109.70675, 18.873241], [109.708134, 18.871342], [109.710196, 18.869235], [109.714202, 18.86611], [109.715186, 18.86401], [109.716366, 18.860212], [109.716779, 18.857953], [109.716461, 18.855541], [109.714976, 18.852096], [109.71457, 18.844861], [109.714043, 18.843114], [109.714487, 18.838879], [109.714392, 18.835836], [109.715452, 18.833743], [109.721178, 18.832863], [109.722035, 18.832454], [109.725672, 18.828877], [109.729639, 18.827262], [109.738037, 18.819027], [109.740836, 18.818028], [109.743661, 18.817342], [109.746765, 18.817599], [109.751982, 18.819186], [109.75819, 18.819165], [109.761243, 18.820364], [109.764353, 18.821037], [109.766505, 18.820649], [109.770149, 18.817307], [109.771736, 18.814486], [109.772097, 18.812483], [109.775125, 18.806243], [109.775716, 18.804288], [109.775258, 18.802264], [109.776096, 18.800822], [109.777791, 18.799976], [109.778153, 18.797924], [109.779257, 18.797612], [109.782152, 18.793064], [109.787585, 18.793397], [109.789198, 18.793085], [109.792511, 18.789979], [109.800636, 18.784161], [109.802273, 18.783156], [109.805092, 18.780251], [109.806501, 18.776146], [109.806939, 18.771521], [109.80765, 18.770162], [109.810297, 18.768075], [109.811116, 18.766917], [109.811109, 18.764025], [109.809884, 18.761889], [109.809979, 18.7594], [109.810703, 18.756168], [109.811135, 18.750489], [109.813864, 18.743339], [109.814093, 18.74225], [109.815883, 18.742014], [109.818974, 18.742881], [109.82018, 18.742389], [109.823874, 18.736355], [109.830742, 18.728559], [109.831739, 18.728226], [109.836017, 18.727858], [109.837375, 18.72824], [109.839984, 18.729905], [109.842853, 18.730668], [109.845703, 18.730841], [109.852609, 18.730203], [109.855205, 18.729412], [109.857141, 18.72919], [109.859039, 18.729988], [109.861724, 18.732381], [109.865419, 18.73752], [109.867151, 18.738893], [109.870243, 18.740287], [109.871309, 18.742853], [109.872141, 18.746348], [109.873785, 18.747521], [109.877917, 18.746619], [109.879631, 18.747125], [109.88436, 18.754247], [109.88733, 18.755912], [109.890079, 18.755371], [109.891024, 18.754449], [109.892903, 18.749878], [109.89508, 18.745412], [109.898216, 18.74089], [109.89993, 18.739406], [109.902367, 18.739379], [109.903116, 18.740329], [109.903421, 18.742201], [109.904189, 18.743734], [109.905859, 18.744968], [109.908962, 18.746459], [109.913418, 18.750503], [109.917011, 18.754442], [109.920972, 18.760579], [109.922318, 18.761175], [109.924457, 18.76096], [109.925955, 18.761307], [109.927434, 18.76225], [109.928887, 18.763942], [109.930792, 18.764254], [109.932924, 18.763949], [109.935393, 18.764358], [109.936828, 18.765752], [109.937653, 18.767624], [109.938866, 18.769066], [109.941976, 18.770557], [109.944109, 18.771868], [109.947092, 18.772436], [109.952944, 18.772526], [109.958575, 18.773615], [109.96628, 18.773594], [109.969702, 18.771126], [109.974996, 18.766355], [109.975865, 18.766279], [109.979217, 18.767367], [109.980454, 18.767139], [109.982048, 18.765731], [109.983279, 18.763914], [109.98519, 18.758193], [109.987913, 18.756994], [109.991004, 18.754386], [109.992553, 18.751876], [109.993143, 18.746772], [109.993791, 18.745641], [109.996076, 18.743595], [109.998291, 18.742215], [110.001071, 18.739732], [110.00321, 18.737118], [110.005737, 18.734739], [110.009342, 18.733109], [110.014921, 18.732818], [110.023764, 18.735363], [110.029578, 18.737249], [110.030866, 18.737894], [110.031019, 18.741924], [110.031863, 18.744906], [110.030917, 18.747167], [110.031089, 18.749525], [110.031615, 18.750142], [110.036782, 18.753263], [110.037531, 18.754317], [110.040007, 18.760405], [110.041905, 18.761487], [110.044482, 18.761626], [110.047211, 18.760502], [110.051655, 18.756356], [110.053863, 18.755974], [110.057266, 18.758491], [110.058345, 18.760066], [110.05971, 18.763685], [110.060947, 18.76605], [110.06341, 18.769469], [110.0656, 18.771882], [110.066939, 18.772859], [110.070659, 18.773095], [110.071789, 18.774586], [110.068767, 18.778254], [110.068767, 18.780077], [110.069605, 18.78231], [110.070564, 18.78724], [110.072366, 18.788474], [110.079482, 18.790103], [110.081951, 18.791441], [110.084973, 18.794728], [110.090736, 18.800427], [110.094824, 18.805786], [110.095782, 18.811491], [110.093142, 18.817779], [110.090133, 18.821099], [110.08762, 18.824635], [110.083855, 18.833258], [110.08218, 18.839517], [110.077159, 18.846801], [110.073465, 18.851292], [110.06951, 18.855333], [110.062718, 18.86085], [110.057005, 18.871612], [110.049896, 18.880212], [110.045313, 18.884772], [110.047859, 18.889851], [110.054968, 18.892907], [110.06666, 18.897487], [110.076302, 18.901561], [110.080948, 18.90427], [110.086877, 18.907041], [110.094005, 18.909771], [110.097712, 18.911704], [110.104478, 18.91742], [110.106421, 18.923551], [110.106351, 18.92768], [110.106021, 18.930409], [110.105437, 18.931663], [110.105748, 18.932702], [110.105266, 18.936672], [110.108249, 18.944589], [110.113022, 18.948773], [110.13157, 18.962661], [110.138146, 18.967724], [110.141694, 18.970252], [110.14966, 18.978279], [110.14966, 18.982247], [110.149121, 18.985959], [110.149774, 18.989027], [110.150511, 18.990072], [110.15258, 18.991284], [110.154065, 18.993002], [110.157874, 18.996249], [110.158566, 18.999372], [110.157779, 19.00057], [110.15795, 19.002246], [110.156903, 19.004808], [110.155754, 19.005992], [110.153989, 19.006872], [110.15284, 19.009039], [110.152834, 19.010327], [110.154465, 19.015264], [110.155182, 19.016745], [110.158071, 19.019321], [110.15484, 19.023157], [110.151628, 19.02414], [110.148829, 19.02423], [110.144988, 19.0254], [110.140494, 19.03269], [110.140278, 19.034664], [110.139441, 19.036145], [110.13767, 19.03762], [110.134039, 19.03879], [110.131538, 19.040652], [110.129253, 19.042722], [110.128288, 19.045096], [110.128402, 19.046723], [110.124073, 19.047485], [110.123876, 19.050088], [110.121763, 19.055314], [110.120988, 19.060298], [110.123902, 19.062859], [110.123051, 19.067511], [110.124568, 19.070882], [110.125628, 19.078869], [110.123121, 19.088607], [110.12128, 19.096933], [110.120887, 19.104753], [110.121414, 19.111839], [110.119097, 19.120191], [110.116799, 19.128993], [110.115276, 19.133179], [110.109766, 19.138001], [110.10663, 19.138575], [110.101851, 19.139904], [110.094595, 19.140388], [110.084408, 19.14007], [110.078054, 19.138686], [110.068983, 19.136479], [110.06579, 19.135441], [110.057272, 19.13459], [110.051109, 19.138472], [110.048601, 19.142222], [110.047732, 19.144782], [110.046976, 19.150081], [110.043663, 19.157995], [110.039201, 19.161586], [110.033278, 19.165225], [110.031457, 19.167646], [110.030943, 19.169465], [110.029305, 19.172419], [110.030517, 19.175366], [110.031488, 19.176715], [110.028467, 19.177005], [110.0282, 19.176113], [110.026512, 19.175691], [110.020279, 19.176549], [110.018368, 19.177143], [110.015874, 19.176673], [110.013144, 19.177226], [110.011716, 19.178665], [110.009355, 19.177863], [110.007869, 19.178243], [110.0046, 19.177904], [110.002677, 19.180837], [110.002226, 19.18256], [110.000132, 19.182663], [109.99944, 19.183154], [109.99963, 19.184752], [109.999053, 19.185395], [110.000506, 19.186945], [110.0001, 19.187477], [109.997828, 19.188107], [109.997542, 19.189933], [109.995879, 19.190535], [109.99447, 19.189801], [109.993873, 19.191745], [109.977319, 19.192125], [109.973396, 19.190742], [109.957642, 19.18866], [109.95363, 19.195902], [109.953262, 19.198668], [109.953947, 19.20369], [109.954861, 19.208247], [109.954322, 19.212853], [109.950704, 19.219402], [109.945162, 19.226476], [109.937869, 19.23223], [109.930455, 19.234774], [109.923606, 19.239601], [109.91736, 19.240963], [109.911235, 19.239566], [109.900311, 19.238813], [109.896445, 19.239179], [109.891761, 19.243017], [109.887349, 19.24776], [109.885521, 19.250353], [109.879256, 19.25746], [109.875625, 19.26333], [109.87009, 19.270181], [109.866802, 19.272829], [109.862537, 19.275048], [109.856037, 19.275974], [109.849499, 19.27576], [109.847652, 19.273887], [109.846008, 19.273845], [109.844192, 19.274751], [109.840194, 19.278747], [109.837178, 19.279991], [109.834532, 19.279521], [109.831878, 19.279963], [109.830431, 19.280648], [109.822706, 19.289683], [109.82197, 19.29121], [109.821868, 19.29271], [109.822706, 19.295634], [109.823442, 19.309278], [109.825258, 19.312292], [109.823747, 19.316736], [109.82435, 19.318899], [109.825556, 19.321041], [109.826451, 19.328229], [109.826908, 19.330378], [109.827054, 19.333253], [109.827841, 19.335651], [109.827175, 19.337047], [109.824065, 19.338954], [109.824337, 19.340143], [109.826445, 19.343156], [109.830215, 19.344876], [109.832164, 19.346742], [109.834436, 19.348117], [109.837052, 19.348608], [109.843291, 19.353417], [109.843793, 19.36005], [109.843462, 19.363961], [109.845951, 19.371672], [109.849277, 19.376135], [109.852393, 19.381751], [109.855859, 19.383693], [109.859839, 19.386297], [109.864549, 19.386726], [109.867754, 19.385454], [109.869563, 19.385171], [109.869874, 19.387658], [109.871518, 19.388052], [109.873562, 19.386401], [109.876457, 19.386884]]]
var mask = new maptalks.Polygon(boundary, {
'symbol': [
{
'polygonOpacity': 1,
'polygonFill': 'rgb(0,0,0)',
'lineColor': 'rgb(31,89,158)',
'lineWidth': 0
}
]
})
let lock = true
var map = new maptalks.Map('map', {
center: mask.getCenter(),
zoom: 10,
minZoom: 1,
maxZoom: 19,
baseLayer: new maptalks.TileLayer('base', {
'urlTemplate': 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
'subdomains': ['a', 'b', 'c', 'd']
}),
attribution: false
})
map.fitExtent(mask.getExtent())
let layer2 = new maptalks.VectorLayer('vector2').addTo(map)
var imageLayer = new maptalks.ImageLayer('images')
map.addLayer(imageLayer)
function createMagCircle(width, height, coords, mask) {
let {xmin, ymin, xmax, ymax} = mask.getExtent()
var center1 = new maptalks.Coordinate(xmin, ymin)
var center2 = new maptalks.Coordinate(xmax, ymax)
let containerPoint1 = map.coordinateToContainerPoint(center1).round()
let containerPoint2 = map.coordinateToContainerPoint(center2).round()
let sw = containerPoint2.x - containerPoint1.x
let sh = containerPoint1.y - containerPoint2.y
var magImg = document.createElement('canvas')
magImg.width = sw
magImg.height = sh
var ctx = magImg.getContext('2d')
//ctx.beginPath();
const path2D = new Path2D()
for (let i = 0; i < coords[0].length; i++) {
var center = new maptalks.Coordinate(coords[0][i])
let containerPoint = map.coordinateToContainerPoint(center).round()
console.log(containerPoint)
let cx = containerPoint.x - containerPoint1.x
let cy = containerPoint.y - containerPoint2.y
if (i === 0) {
path2D.moveTo(cx, cy)
} else {
path2D.lineTo(cx, cy)
}
}
path2D.closePath()
ctx.save()
ctx.globalCompositeOperation = 'source-out'
ctx.lineWidth = 50
ctx.shadowBlur = 2000
ctx.shadowColor = 'rgba(37,188,47,1)'
ctx.fillStyle = 'rgba(37,188,47,1)'
ctx.strokeStyle = 'rgba(37,188,47,1)'
ctx.stroke()
ctx.fill(path2D)
ctx.imageSmoothingEnabled = true
return magImg
}
function onRenderEnd(e) {
if (lock === false) {
return
}
lock = false
console.time('draw')
var ctx = e.context
var c = ctx.canvas
let can = createMagCircle(c.width, c.height, boundary, mask)
//ctx.imageSmoothingQuality = "low";
let {xmin, ymin, xmax, ymax} = mask.getExtent()
// var image = can.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception.
// window.location.href=image;
let base64 = can.toDataURL('image/png', 1)
let a = {}
a[base64] = 1
imageLayer.setImages([
{
url: base64,
extent: [xmin, ymin, xmax, ymax],
opacity: 1
}
])
console.timeEnd('draw')
}
map.on('renderend', onRenderEnd)
function save() {
console.log(map.getExtent())
var data = map.toDataURL({
'mimeType': 'image/jpeg', // or 'image/png'
'save': true, // to pop a save dialog
'fileName': 'map' // file name
})
}
</script>
</body>
</html>
效果
结论
看结果都知道方案一简单很多，不过我是通过做方案二时候才想出来方案一，两个方案各有优略，方案二可以自定义生成贴图用于不同的底图api,方案一非常简单适合新手。
参考资料：
w3chool canvas globalcompositeoperation参考
# canvas可视化效果之内阴影效果
# canvas内阴影?