区域掩膜
实现思路
主要就是考验 canvas 的使用，核心代码参考openlayers 中区域掩膜的实现
- 在地图容器中添加一个 canvas，设置其在 map 之上；
- 监听 map 的 postrender 事件，每次事件触发重新绘制掩膜；
- 通过 map.getPixelFromCoordinate 实现地理坐标到屏幕坐标的转换；
- 通过 globalCompositeOperation = 'source-out'设置反向裁剪；
展开代码
vue
<template>
<div ref="mapContainer" id="map"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Map from "ol/Map.js";
import XYZ from "ol/source/XYZ.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import "ol/ol.css";
import modalData from "./320000_bj.json";
const mapContainer = ref(null);
let map = null;
let canvas = null;
let ctx = null;
const view = new View({
center: [118.7784, 32.0647], // 南京市中心经纬度
zoom: 7,
projection: "EPSG:4326",
});
onMounted(async () => {
map = new Map({
target: mapContainer.value,
layers: [
new TileLayer({
source: new XYZ({
url: "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
}),
}),
],
view,
});
// 创建canvas
const { offsetWidth, offsetHeight } = map.getViewport();
canvas = document.createElement("canvas");
canvas.width = offsetWidth;
canvas.height = offsetHeight;
canvas.style.position = "absolute";
canvas.style.top = "0px";
canvas.style.left = "0px";
canvas.style.zIndex = "1";
ctx = canvas.getContext("2d");
map.getViewport().appendChild(canvas);
// 注册map事件
map.on("postrender", () => {
addMask();
});
});
// 添加区域掩膜
const addMask = (params) => {
const { fillStyle, strokeStyle, lineWidth } = {
fillStyle: "rgba(255,255,255,0.8)",
strokeStyle: "#f00",
lineWidth: 3,
...params,
};
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 获取整个江苏省的所有多边形
const jiangsuPolygons = modalData.features[0].geometry.coordinates;
// 1. 绘制整个画布为半透明白色
ctx.fillStyle = fillStyle;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 2. 使用组合模式清除多边形区域
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = "rgba(0,0,0,1)"; // 使用任意颜色，alpha=1确保完全清除
// 绘制所有多边形（包括主区域和岛屿）
jiangsuPolygons.forEach((polygon) => {
const ring = polygon[0]; // 获取多边形外环
const coords = ring.map((coord) => map.getPixelFromCoordinate(coord));
ctx.beginPath();
coords.forEach((coord, index) => {
index === 0
? ctx.moveTo(coord[0], coord[1])
: ctx.lineTo(coord[0], coord[1]);
});
ctx.closePath();
ctx.fill();
});
// 3. 恢复组合模式并绘制边界
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = strokeStyle;
ctx.lineWidth = lineWidth;
// 绘制所有多边形的边界
jiangsuPolygons.forEach((polygon) => {
const ring = polygon[0];
const coords = ring.map((coord) => map.getPixelFromCoordinate(coord));
ctx.beginPath();
coords.forEach((coord, index) => {
index === 0
? ctx.moveTo(coord[0], coord[1])
: ctx.lineTo(coord[0], coord[1]);
});
ctx.closePath();
ctx.stroke();
});
};
</script>
<style scoped>
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
}
</style>Json 数据
json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"adcode": 320000,
"name": "江苏省",
"center": [118.767413, 32.041544],
"centroid": [119.486506, 32.983991],
"childrenNum": 13,
"level": "province",
"acroutes": [100000],
"parent": { "adcode": 100000 }
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[118.408205, 34.435512],
[118.40495, 34.42774],
[118.395184, 34.427053],
[118.379974, 34.415545],
[118.353203, 34.417435],
[118.352248, 34.422845],
[118.320931, 34.421342],
[118.290679, 34.424563],
[118.289164, 34.412281],
[118.279903, 34.412152],
[118.277377, 34.40468],
[118.242411, 34.40571],
[118.230962, 34.398709],
[118.220298, 34.405925],
[118.217716, 34.379121],
[118.204359, 34.377359],
[118.189598, 34.380624],
[118.183368, 34.390333],
[118.179271, 34.379422],
[118.170403, 34.381355],
[118.177138, 34.408717],
[118.178878, 34.425207],
[118.177755, 34.453241],
[118.139927, 34.475344],
[118.132855, 34.483412],
[118.141611, 34.496884],
[118.164959, 34.504906],
[118.167597, 34.519705],
[118.184659, 34.544192],
[118.163556, 34.55148],
[118.153734, 34.549165],
[118.140713, 34.55401],
[118.137177, 34.563227],
[118.127243, 34.555382],
[118.100471, 34.564727],
[118.078975, 34.569786],
[118.082399, 34.579858],
[118.102828, 34.593443],
[118.114727, 34.614396],
[118.113043, 34.621464],
[118.100527, 34.626562],
[118.094578, 34.636584],
[118.10266, 34.64772],
[118.08397, 34.655899],
[118.077796, 34.653715],
[118.057423, 34.654999],
[118.053943, 34.650931],
[118.020661, 34.660437],
[118.018191, 34.647034],
[118.007864, 34.647505],
[118.007415, 34.656113],
[117.990802, 34.661722],
[117.9917, 34.670071],
[117.963301, 34.678547],
[117.951683, 34.678462],
[117.939672, 34.664847],
[117.909701, 34.670199],
[117.903135, 34.64455],
[117.881021, 34.64515],
[117.877934, 34.650203],
[117.863454, 34.645193],
[117.849367, 34.647206],
[117.847515, 34.652387],
[117.834494, 34.647291],
[117.831743, 34.653458],
[117.820126, 34.646178],
[117.79964, 34.647291],
[117.793634, 34.651788],
[117.796048, 34.637741],
[117.793634, 34.625619],
[117.798517, 34.62185],
[117.791446, 34.585087],
[117.794589, 34.559755],
[117.794813, 34.539947],
[117.799303, 34.535015],
[117.80166, 34.518761],
[117.790491, 34.518933],
[117.773991, 34.529054],
[117.748622, 34.533386],
[117.699344, 34.545607],
[117.684471, 34.547322],
[117.682001, 34.529569],
[117.673414, 34.515845],
[117.659102, 34.501045],
[117.647035, 34.492937],
[117.638224, 34.49727],
[117.629244, 34.488518],
[117.609656, 34.490491],
[117.603202, 34.476846],
[117.592257, 34.462512],
[117.569807, 34.46307],
[117.561332, 34.471954],
[117.547806, 34.475173],
[117.538265, 34.467233],
[117.512952, 34.472598],
[117.493252, 34.472641],
[117.487359, 34.466332],
[117.486686, 34.482039],
[117.482084, 34.485943],
[117.466481, 34.484656],
[117.451439, 34.506279],
[117.43825, 34.516445],
[117.439428, 34.520005],
[117.426744, 34.525237],
[117.424499, 34.537031],
[117.403789, 34.546893],
[117.402554, 34.5694],
[117.374435, 34.584187],
[117.36495, 34.577715],
[117.35294, 34.584058],
[117.344016, 34.582044],
[117.333745, 34.572657],
[117.31904, 34.573643],
[117.318086, 34.566228],
[117.330938, 34.567985],
[117.333015, 34.56177],
[117.321341, 34.565413],
[117.302988, 34.55894],
[117.308376, 34.571886],
[117.281604, 34.563827],
[117.272849, 34.556711],
[117.279696, 34.552724],
[117.289237, 34.555939],
[117.303381, 34.548351],
[117.302651, 34.541362],
[117.287441, 34.5336],
[117.268078, 34.532828],
[117.275206, 34.520606],
[117.270828, 34.516145],
[117.274364, 34.503534],
[117.259323, 34.497056],
[117.267461, 34.480022],
[117.263588, 34.472641],
[117.256011, 34.476331],
[117.252363, 34.486501],
[117.24271, 34.47852],
[117.255113, 34.472555],
[117.255843, 34.46204],
[117.247929, 34.451052],
[117.234628, 34.454486],
[117.222336, 34.450623],
[117.223122, 34.446459],
[117.200223, 34.441608],
[117.199549, 34.434481],
[117.166043, 34.434653],
[117.159869, 34.453113],
[117.156614, 34.480923],
[117.14595, 34.503963],
[117.139383, 34.526653],
[117.140618, 34.538703],
[117.151282, 34.559283],
[117.147634, 34.570257],
[117.13349, 34.586073],
[117.123724, 34.60467],
[117.115249, 34.628147],
[117.103912, 34.648961],
[117.095886, 34.647548],
[117.081518, 34.638212],
[117.072987, 34.639069],
[117.062323, 34.657697],
[117.061706, 34.675722],
[117.072033, 34.694214],
[117.077365, 34.696482],
[117.069058, 34.708294],
[117.070518, 34.713685],
[117.061145, 34.723997],
[117.043185, 34.736532],
[117.021913, 34.759202],
[116.995647, 34.758261],
[116.989697, 34.765146],
[116.978472, 34.763606],
[116.976789, 34.771261],
[116.967921, 34.772971],
[116.965844, 34.785071],
[116.951644, 34.794562],
[116.951139, 34.810591],
[116.971681, 34.811873],
[116.979146, 34.81495],
[116.966125, 34.844477],
[116.928858, 34.842896],
[116.930092, 34.859685],
[116.933741, 34.861906],
[116.976845, 34.868526],
[116.966967, 34.875616],
[116.945246, 34.876811],
[116.945302, 34.873779],
[116.922123, 34.87143],
[116.922291, 34.89449],
[116.899055, 34.904693],
[116.8761, 34.912548],
[116.858084, 34.928384],
[116.822164, 34.929323],
[116.815878, 34.965292],
[116.805775, 34.968364],
[116.806785, 34.936919],
[116.812173, 34.927957],
[116.798928, 34.928512],
[116.80325, 34.937388],
[116.802015, 34.970497],
[116.789106, 34.975104],
[116.789106, 34.959789],
[116.781641, 34.961922],
[116.785458, 34.947288],
[116.796907, 34.944131],
[116.797637, 34.938754],
[116.786973, 34.940461],
[116.781192, 34.916561],
[116.764579, 34.916475],
[116.73517, 34.924628],
[116.721363, 34.925908],
[116.706209, 34.933974],
[116.696948, 34.932737],
[116.677978, 34.939181],
[116.675733, 34.933121],
[116.658447, 34.93342],
[116.657885, 34.928981],
[116.639981, 34.932609],
[116.631787, 34.940717],
[116.622526, 34.940034],
[116.613883, 34.922792],
[116.560059, 34.909304],
[116.54614, 34.909389],
[116.523073, 34.903968],
[116.502755, 34.906102],
[116.500566, 34.90115],
[116.480698, 34.89735],
[116.455779, 34.900638],
[116.445059, 34.895429],
[116.445283, 34.88864],
[116.436079, 34.883046],
[116.40796, 34.850714],
[116.408297, 34.826147],
[116.405827, 34.817386],
[116.403189, 34.756293],
[116.371535, 34.750177],
[116.365698, 34.742778],
[116.368448, 34.725324],
[116.363789, 34.715226],
[116.377091, 34.718136],
[116.391796, 34.710348],
[116.392694, 34.703886],
[116.38551, 34.694727],
[116.385229, 34.68668],
[116.378101, 34.684155],
[116.378214, 34.668016],
[116.364407, 34.651831],
[116.37058, 34.642238],
[116.382591, 34.63864],
[116.393367, 34.643052],
[116.430466, 34.650803],
[116.432823, 34.63016],
[116.447584, 34.620564],
[116.477218, 34.615081],
[116.478341, 34.603856],
[116.491418, 34.588944],
[116.490408, 34.573343],
[116.509546, 34.557525],
[116.526159, 34.553367],
[116.520659, 34.543162],
[116.52919, 34.540676],
[116.548048, 34.542905],
[116.570555, 34.523393],
[116.587673, 34.512542],
[116.595193, 34.511512],
[116.598954, 34.500145],
[116.592443, 34.493838],
[116.573641, 34.497699],
[116.568646, 34.492508],
[116.575101, 34.488947],
[116.623424, 34.488646],
[116.662544, 34.473027],
[116.722878, 34.472684],
[116.745104, 34.468263],
[116.76065, 34.462598],
[116.773728, 34.453456],
[116.782708, 34.438302],
[116.782146, 34.431089],
[116.804709, 34.412754],
[116.828057, 34.389216],
[116.848543, 34.389045],
[116.867008, 34.39218],
[116.883509, 34.403047],
[116.909214, 34.408287],
[116.920551, 34.406999],
[116.945639, 34.395531],
[116.969324, 34.38883],
[116.960961, 34.371989],
[116.961242, 34.363266],
[116.980773, 34.358109],
[116.982962, 34.345775],
[116.969268, 34.323122],
[116.976283, 34.304892],
[116.969717, 34.293109],
[116.968987, 34.28369],
[116.984365, 34.269839],
[117.010632, 34.2559],
[117.018882, 34.255512],
[117.020791, 34.243335],
[117.027526, 34.240194],
[117.045261, 34.24781],
[117.049583, 34.242432],
[117.044868, 34.224743],
[117.051042, 34.221558],
[117.047226, 34.205803],
[117.040322, 34.201498],
[117.030837, 34.186342],
[117.025337, 34.167651],
[117.038358, 34.167436],
[117.047057, 34.151412],
[117.054915, 34.155073],
[117.072314, 34.146716],
[117.089993, 34.145682],
[117.106438, 34.13043],
[117.123837, 34.128232],
[117.129954, 34.117459],
[117.130291, 34.10177],
[117.146567, 34.097804],
[117.157961, 34.09871],
[117.15145, 34.083707],
[117.161272, 34.084354],
[117.182094, 34.076076],
[117.192702, 34.068746],
[117.20707, 34.068616],
[117.212121, 34.074696],
[117.224693, 34.064175],
[117.257639, 34.0659],
[117.277002, 34.078922],
[117.287778, 34.078663],
[117.29384, 34.071074],
[117.311463, 34.068056],
[117.319489, 34.084397],
[117.343398, 34.08056],
[117.357149, 34.088234],
[117.377803, 34.071462],
[117.371124, 34.060682],
[117.388242, 34.055593],
[117.400253, 34.041575],
[117.405753, 34.030057],
[117.415631, 34.025916],
[117.435444, 34.028332],
[117.460251, 34.037391],
[117.476808, 34.047614],
[117.500437, 34.052272],
[117.50487, 34.06163],
[117.514805, 34.060854],
[117.530632, 34.050676],
[117.545337, 34.035191],
[117.54253, 34.021644],
[117.544663, 34.013619],
[117.556449, 34.007319],
[117.568909, 33.985222],
[117.575757, 33.982891],
[117.58816, 33.987855],
[117.59787, 33.997005],
[117.610273, 33.999249],
[117.616672, 34.004946],
[117.618131, 34.017071],
[117.610217, 34.029281],
[117.616391, 34.032257],
[117.629749, 34.02872],
[117.645801, 34.013619],
[117.666286, 33.998688],
[117.671338, 33.986733],
[117.662975, 33.968732],
[117.67246, 33.952411],
[117.672629, 33.934965],
[117.690084, 33.915398],
[117.70361, 33.887789],
[117.715396, 33.879233],
[117.740821, 33.891981],
[117.753729, 33.891419],
[117.758668, 33.885672],
[117.75923, 33.874522],
[117.752439, 33.863241],
[117.753, 33.847203],
[117.750081, 33.827183],
[117.746153, 33.823724],
[117.752495, 33.812868],
[117.749015, 33.791629],
[117.741831, 33.762769],
[117.734086, 33.751776],
[117.724713, 33.749569],
[117.723478, 33.739007],
[117.731953, 33.734765],
[117.735264, 33.722729],
[117.752663, 33.711515],
[117.767031, 33.72182],
[117.777919, 33.722513],
[117.791277, 33.733163],
[117.805589, 33.736193],
[117.828151, 33.736972],
[117.835841, 33.734115],
[117.848357, 33.73602],
[117.879955, 33.727751],
[117.8877, 33.722599],
[117.901675, 33.720131],
[117.897578, 33.72931],
[117.900497, 33.735674],
[117.915819, 33.738358],
[117.918176, 33.734332],
[117.936754, 33.729353],
[117.952749, 33.738185],
[117.954321, 33.75104],
[117.96549, 33.763461],
[117.972505, 33.749872],
[117.99445, 33.750045],
[118.003936, 33.744937],
[118.018809, 33.745846],
[118.019931, 33.738704],
[118.030876, 33.740479],
[118.02835, 33.746625],
[118.045749, 33.750045],
[118.062418, 33.758398],
[118.065561, 33.765798],
[118.105971, 33.76463],
[118.117982, 33.766534],
[118.133472, 33.75143],
[118.149187, 33.746452],
[118.168326, 33.749569],
[118.185332, 33.744937],
[118.177811, 33.736107],
[118.160862, 33.735327],
[118.153341, 33.720175],
[118.167709, 33.714979],
[118.164005, 33.692633],
[118.168102, 33.663739],
[118.120115, 33.621659],
[118.112257, 33.617064],
[118.117252, 33.591657],
[118.108384, 33.530017],
[118.099124, 33.52941],
[118.107992, 33.520167],
[118.106813, 33.503934],
[118.108104, 33.475107],
[118.05776, 33.491693],
[118.050632, 33.49204],
[118.04356, 33.473718],
[118.028631, 33.458432],
[118.023579, 33.440928],
[118.021952, 33.421596],
[118.016844, 33.406692],
[118.028238, 33.390569],
[118.029304, 33.372269],
[118.0059, 33.352095],
[117.995517, 33.347095],
[117.971607, 33.349313],
[117.975368, 33.335745],
[117.99243, 33.333135],
[117.985919, 33.32026],
[117.983281, 33.296768],
[117.974245, 33.279711],
[117.939448, 33.262606],
[117.948035, 33.252115],
[117.938999, 33.234309],
[117.942366, 33.225078],
[117.953816, 33.223945],
[117.977444, 33.226253],
[117.993496, 33.211272],
[117.993608, 33.20561],
[117.980924, 33.200166],
[117.986424, 33.193371],
[117.989175, 33.179648],
[118.003879, 33.177033],
[118.008482, 33.16784],
[118.017406, 33.164615],
[118.025656, 33.155943],
[118.036713, 33.1525],
[118.038228, 33.135196],
[118.046871, 33.138422],
[118.069153, 33.139948],
[118.088292, 33.149667],
[118.11888, 33.160562],
[118.149019, 33.169495],
[118.159964, 33.181042],
[118.156315, 33.195461],
[118.168382, 33.21345],
[118.178204, 33.217979],
[118.194368, 33.211664],
[118.211599, 33.19912],
[118.221364, 33.180693],
[118.223722, 33.155464],
[118.219625, 33.114096],
[118.210476, 33.111829],
[118.20969, 33.104329],
[118.220915, 33.105855],
[118.221308, 33.087626],
[118.206491, 33.091246],
[118.202899, 33.088106],
[118.223666, 33.083439],
[118.22765, 33.069525],
[118.214854, 33.070833],
[118.212441, 33.061934],
[118.233375, 33.060014],
[118.239605, 33.046445],
[118.243478, 33.027767],
[118.244825, 32.998303],
[118.252402, 32.982148],
[118.269352, 32.969178],
[118.303812, 32.968654],
[118.309649, 32.959002],
[118.293373, 32.947164],
[118.251335, 32.936155],
[118.235396, 32.926543],
[118.233039, 32.916231],
[118.239774, 32.883363],
[118.244432, 32.874488],
[118.250606, 32.848384],
[118.263178, 32.856168],
[118.284618, 32.857305],
[118.289557, 32.845498],
[118.301736, 32.846241],
[118.297863, 32.83207],
[118.306619, 32.810591],
[118.294439, 32.800134],
[118.298761, 32.785562],
[118.307124, 32.778735],
[118.322334, 32.777465],
[118.326431, 32.763459],
[118.334064, 32.761576],
[118.348769, 32.773001],
[118.366224, 32.768318],
[118.371163, 32.757724],
[118.372285, 32.741744],
[118.36628, 32.735001],
[118.368188, 32.724754],
[118.375316, 32.719017],
[118.398664, 32.721426],
[118.411011, 32.716039],
[118.422854, 32.718097],
[118.450467, 32.743364],
[118.459279, 32.726111],
[118.483469, 32.721426],
[118.489755, 32.724491],
[118.520456, 32.723221],
[118.544702, 32.729396],
[118.559743, 32.729921],
[118.576581, 32.719104],
[118.59078, 32.724841],
[118.607562, 32.726637],
[118.617047, 32.738942],
[118.632313, 32.739993],
[118.639385, 32.744809],
[118.654033, 32.740693],
[118.657569, 32.736096],
[118.694163, 32.726637],
[118.70724, 32.720287],
[118.724471, 32.721951],
[118.736706, 32.73233],
[118.756294, 32.737059],
[118.752702, 32.755842],
[118.746359, 32.759256],
[118.737941, 32.773264],
[118.736874, 32.793351],
[118.746808, 32.800353],
[118.741813, 32.853369],
[118.747875, 32.858704],
[118.791035, 32.848384],
[118.811689, 32.854987],
[118.812531, 32.865219],
[118.806189, 32.870247],
[118.81124, 32.875494],
[118.814608, 32.902727],
[118.809332, 32.907884],
[118.812194, 32.91693],
[118.818985, 32.920644],
[118.836945, 32.911424],
[118.839471, 32.922523],
[118.848956, 32.927198],
[118.842502, 32.943669],
[118.849405, 32.945897],
[118.849349, 32.956643],
[118.865233, 32.955027],
[118.884652, 32.960618],
[118.896214, 32.957735],
[118.891162, 32.951489],
[118.893239, 32.940873],
[118.90626, 32.944936],
[118.921414, 32.939563],
[118.933818, 32.938645],
[118.941619, 32.946116],
[118.961207, 32.94581],
[118.993647, 32.958215],
[119.008913, 32.959395],
[119.020812, 32.955813],
[119.026312, 32.947251],
[119.023281, 32.935063],
[119.030016, 32.927854],
[119.019801, 32.925713],
[119.015592, 32.907534],
[119.021541, 32.905961],
[119.045002, 32.911424],
[119.045731, 32.892455],
[119.055104, 32.874751],
[119.071324, 32.864738],
[119.10427, 32.826734],
[119.113081, 32.822928],
[119.184922, 32.82564],
[119.188906, 32.810854],
[119.19132, 32.788844],
[119.200861, 32.750982],
[119.208214, 32.740518],
[119.208943, 32.71525],
[119.211637, 32.708199],
[119.208719, 32.641508],
[119.220224, 32.629628],
[119.216913, 32.617308],
[119.220505, 32.609854],
[119.231, 32.607135],
[119.220056, 32.592444],
[119.220168, 32.57661],
[119.20928, 32.573583],
[119.193733, 32.579154],
[119.187167, 32.599944],
[119.176952, 32.593848],
[119.175212, 32.571083],
[119.153828, 32.56187],
[119.154502, 32.554938],
[119.166681, 32.545986],
[119.167803, 32.536332],
[119.155568, 32.528081],
[119.150124, 32.509821],
[119.142266, 32.499417],
[119.147767, 32.492655],
[119.134521, 32.491558],
[119.115495, 32.476979],
[119.096019, 32.466088],
[119.085131, 32.452735],
[119.073681, 32.455371],
[119.067452, 32.462398],
[119.062793, 32.484576],
[119.050502, 32.492919],
[119.043318, 32.502841],
[119.041409, 32.514782],
[119.01924, 32.517986],
[119.00751, 32.514079],
[118.997463, 32.503895],
[118.97984, 32.503851],
[118.967942, 32.514562],
[118.964799, 32.526721],
[118.940609, 32.547785],
[118.936568, 32.557526],
[118.919786, 32.557263],
[118.914005, 32.548839],
[118.887907, 32.55485],
[118.898627, 32.560466],
[118.896382, 32.577268],
[118.909347, 32.586874],
[118.901995, 32.589023],
[118.885101, 32.586348],
[118.884203, 32.580426],
[118.874998, 32.58297],
[118.872641, 32.576084],
[118.855972, 32.574373],
[118.848507, 32.568187],
[118.842502, 32.572969],
[118.827011, 32.572662],
[118.827573, 32.581172],
[118.820501, 32.582532],
[118.824654, 32.589637],
[118.824542, 32.602531],
[118.820501, 32.604241],
[118.805291, 32.593453],
[118.801811, 32.58433],
[118.784749, 32.582444],
[118.774815, 32.587663],
[118.775769, 32.597751],
[118.757528, 32.603978],
[118.743273, 32.597751],
[118.740691, 32.589374],
[118.725986, 32.596523],
[118.725312, 32.608232],
[118.69798, 32.60639],
[118.700842, 32.588541],
[118.689561, 32.588541],
[118.668794, 32.5949],
[118.658411, 32.594812],
[118.641237, 32.587093],
[118.633043, 32.578979],
[118.623838, 32.592444],
[118.601781, 32.597356],
[118.598077, 32.601347],
[118.569509, 32.586435],
[118.563728, 32.564371],
[118.56805, 32.558755],
[118.584663, 32.549014],
[118.598975, 32.54467],
[118.608853, 32.537034],
[118.604812, 32.52299],
[118.614465, 32.5204],
[118.617496, 32.512411],
[118.608011, 32.501744],
[118.592464, 32.500207],
[118.592127, 32.482029],
[118.59673, 32.476628],
[118.608067, 32.475837],
[118.608572, 32.470567],
[118.628104, 32.467669],
[118.643426, 32.47048],
[118.647691, 32.47654],
[118.672892, 32.469865],
[118.68928, 32.47351],
[118.692648, 32.465122],
[118.687091, 32.431297],
[118.688887, 32.418202],
[118.685744, 32.404975],
[118.678672, 32.393943],
[118.690178, 32.378293],
[118.698878, 32.383085],
[118.696071, 32.367961],
[118.702021, 32.357936],
[118.692928, 32.351692],
[118.699832, 32.349757],
[118.697531, 32.342632],
[118.707914, 32.33841],
[118.703199, 32.328954],
[118.687652, 32.330009],
[118.683948, 32.324071],
[118.696352, 32.317736],
[118.678448, 32.316549],
[118.660263, 32.305418],
[118.659983, 32.296354],
[118.667335, 32.296354],
[118.670759, 32.285617],
[118.659253, 32.266119],
[118.667447, 32.257535],
[118.675137, 32.255862],
[118.667504, 32.235918],
[118.644099, 32.20998],
[118.626588, 32.202536],
[118.619629, 32.205443],
[118.598357, 32.199497],
[118.580902, 32.19866],
[118.575627, 32.202536],
[118.561708, 32.196898],
[118.551717, 32.199629],
[118.539594, 32.192449],
[118.532354, 32.195797],
[118.521859, 32.188219],
[118.509848, 32.194299],
[118.50648, 32.182096],
[118.495592, 32.177073],
[118.495648, 32.165176],
[118.507435, 32.137895],
[118.500587, 32.14173],
[118.494694, 32.130974],
[118.500812, 32.121584],
[118.489474, 32.120746],
[118.472974, 32.114839],
[118.473647, 32.11065],
[118.462871, 32.10064],
[118.441095, 32.092041],
[118.433518, 32.086661],
[118.405455, 32.080794],
[118.393276, 32.062665],
[118.385025, 32.060768],
[118.394342, 32.048414],
[118.38598, 32.033147],
[118.401526, 32.018671],
[118.389628, 32.01205],
[118.390975, 31.989536],
[118.387158, 31.983267],
[118.376719, 31.981721],
[118.379974, 31.968341],
[118.368974, 31.956196],
[118.369198, 31.94299],
[118.364371, 31.930178],
[118.375316, 31.925319],
[118.386036, 31.914803],
[118.402986, 31.914007],
[118.41595, 31.901457],
[118.44014, 31.892707],
[118.452263, 31.884663],
[118.4723, 31.879623],
[118.467081, 31.868881],
[118.466744, 31.858005],
[118.475443, 31.850312],
[118.490597, 31.843148],
[118.504741, 31.841733],
[118.486107, 31.795421],
[118.482178, 31.778342],
[118.502608, 31.778342],
[118.510746, 31.765641],
[118.523599, 31.762011],
[118.533869, 31.767234],
[118.53965, 31.761569],
[118.538696, 31.749352],
[118.529379, 31.748555],
[118.529772, 31.742358],
[118.55312, 31.729032],
[118.571698, 31.746253],
[118.57529, 31.740941],
[118.593082, 31.744438],
[118.600995, 31.754133],
[118.609358, 31.757187],
[118.619068, 31.75006],
[118.627037, 31.759444],
[118.641686, 31.758249],
[118.648365, 31.748821],
[118.641686, 31.743996],
[118.652125, 31.73979],
[118.653977, 31.730139],
[118.677269, 31.728589],
[118.684902, 31.724914],
[118.687372, 31.716147],
[118.697699, 31.709416],
[118.680749, 31.696616],
[118.674407, 31.696483],
[118.671432, 31.688201],
[118.654931, 31.67562],
[118.646962, 31.679873],
[118.643257, 31.671367],
[118.647972, 31.65936],
[118.643594, 31.649656],
[118.65785, 31.641103],
[118.673846, 31.640527],
[118.685127, 31.636139],
[118.694949, 31.639729],
[118.71695, 31.639463],
[118.719419, 31.627452],
[118.72868, 31.634233],
[118.735976, 31.633436],
[118.7394, 31.651074],
[118.745125, 31.656524],
[118.748099, 31.675753],
[118.760503, 31.680271],
[118.768304, 31.677481],
[118.774141, 31.682619],
[118.799005, 31.666361],
[118.782953, 31.656258],
[118.789576, 31.646554],
[118.79603, 31.628294],
[118.802765, 31.619473],
[118.814495, 31.619252],
[118.819547, 31.628516],
[118.832848, 31.630377],
[118.858554, 31.62395],
[118.868768, 31.611139],
[118.870789, 31.599346],
[118.862258, 31.595001],
[118.877299, 31.589902],
[118.873315, 31.578417],
[118.881958, 31.565156],
[118.875111, 31.551982],
[118.873539, 31.532062],
[118.886279, 31.527669],
[118.883193, 31.496471],
[118.870508, 31.463042],
[118.866074, 31.44488],
[118.86961, 31.421561],
[118.851145, 31.392549],
[118.847385, 31.393927],
[118.829481, 31.377529],
[118.80024, 31.368995],
[118.784525, 31.368595],
[118.767575, 31.363973],
[118.770886, 31.376951],
[118.765386, 31.387928],
[118.75461, 31.385084],
[118.745742, 31.372684],
[118.735078, 31.344769],
[118.721103, 31.32267],
[118.719588, 31.294784],
[118.704434, 31.302791],
[118.707914, 31.296786],
[118.726603, 31.28224],
[118.761401, 31.277702],
[118.778575, 31.261684],
[118.781382, 31.239833],
[118.79575, 31.229373],
[118.806357, 31.229507],
[118.819491, 31.236005],
[118.831277, 31.229462],
[118.840481, 31.236361],
[118.869666, 31.242237],
[118.891219, 31.237964],
[118.915184, 31.244195],
[118.92495, 31.2397],
[118.984218, 31.237474],
[118.986463, 31.231154],
[119.0033, 31.233735],
[119.014526, 31.241524],
[119.048818, 31.233557],
[119.062344, 31.238498],
[119.073794, 31.23289],
[119.083728, 31.239744],
[119.10528, 31.235293],
[119.10702, 31.250603],
[119.120041, 31.261684],
[119.13222, 31.262752],
[119.140695, 31.276011],
[119.149787, 31.276945],
[119.15815, 31.294784],
[119.176222, 31.293939],
[119.181105, 31.300478],
[119.199458, 31.293583],
[119.197157, 31.27352],
[119.204229, 31.265689],
[119.215285, 31.274098],
[119.218148, 31.264799],
[119.236276, 31.259326],
[119.238577, 31.254653],
[119.249971, 31.256967],
[119.249746, 31.261995],
[119.26142, 31.261328],
[119.266977, 31.250425],
[119.294815, 31.263241],
[119.314851, 31.265733],
[119.33326, 31.264131],
[119.337526, 31.258881],
[119.345945, 31.268981],
[119.35021, 31.280905],
[119.350154, 31.301012],
[119.356609, 31.30328],
[119.367946, 31.288957],
[119.371594, 31.271606],
[119.379676, 31.269382],
[119.370528, 31.242548],
[119.365196, 31.232667],
[119.360088, 31.212145],
[119.365757, 31.195938],
[119.371369, 31.197719],
[119.379171, 31.189214],
[119.394886, 31.19959],
[119.405662, 31.192777],
[119.395335, 31.193356],
[119.389329, 31.188324],
[119.391182, 31.174518],
[119.400611, 31.178749],
[119.415428, 31.172959],
[119.423454, 31.181866],
[119.438832, 31.177056],
[119.454771, 31.164897],
[119.460608, 31.156389],
[119.475818, 31.158928],
[119.482497, 31.152513],
[119.485584, 31.161601],
[119.494508, 31.164006],
[119.514376, 31.156077],
[119.532617, 31.159106],
[119.545863, 31.147835],
[119.560231, 31.140707],
[119.571343, 31.128988],
[119.574094, 31.11397],
[119.582007, 31.108667],
[119.599799, 31.109157],
[119.613718, 31.129167],
[119.63078, 31.131261],
[119.638132, 31.135538],
[119.641837, 31.148414],
[119.662491, 31.159863],
[119.663726, 31.165966],
[119.678037, 31.168193],
[119.682752, 31.160487],
[119.703855, 31.151889],
[119.713116, 31.167614],
[119.740505, 31.173404],
[119.755378, 31.170776],
[119.779343, 31.178793],
[119.793375, 31.168059],
[119.791298, 31.156611],
[119.801008, 31.156344],
[119.809875, 31.148504],
[119.823289, 31.154117],
[119.829744, 31.161378],
[119.823458, 31.165832],
[119.826489, 31.173181],
[119.837545, 31.173671],
[119.842147, 31.168772],
[119.866618, 31.168327],
[119.878348, 31.160799],
[119.900237, 31.169173],
[119.919993, 31.17091],
[119.921059, 31.1612],
[119.936775, 31.146543],
[119.94626, 31.106215],
[119.969776, 31.074298],
[119.988522, 31.059226],
[120.001711, 31.027114],
[120.017034, 31.017791],
[120.052449, 31.005745],
[120.103971, 30.965223],
[120.111043, 30.955894],
[120.135121, 30.941875],
[120.149657, 30.937455],
[120.221778, 30.926873],
[120.250739, 30.926248],
[120.308099, 30.932276],
[120.343514, 30.94],
[120.371127, 30.948751],
[120.359453, 30.931919],
[120.362709, 30.921648],
[120.356928, 30.908875],
[120.360127, 30.892795],
[120.357994, 30.887077],
[120.364673, 30.880465],
[120.372418, 30.882163],
[120.379434, 30.890785],
[120.3947, 30.890785],
[120.423492, 30.903069],
[120.417992, 30.925578],
[120.423436, 30.927453],
[120.434998, 30.920799],
[120.442294, 30.900612],
[120.436345, 30.896949],
[120.439544, 30.885201],
[120.45234, 30.867911],
[120.441284, 30.856292],
[120.454473, 30.849634],
[120.460422, 30.839846],
[120.460984, 30.828269],
[120.455259, 30.816825],
[120.477204, 30.800014],
[120.476979, 30.785571],
[120.489439, 30.763432],
[120.504425, 30.757974],
[120.518231, 30.773227],
[120.563805, 30.835511],
[120.580867, 30.845656],
[120.588949, 30.854416],
[120.60298, 30.848919],
[120.615496, 30.849589],
[120.626216, 30.856069],
[120.644176, 30.855354],
[120.655401, 30.847489],
[120.658713, 30.865274],
[120.66309, 30.861342],
[120.673642, 30.87573],
[120.68279, 30.882565],
[120.699909, 30.867821],
[120.704286, 30.872959],
[120.702546, 30.884039],
[120.713266, 30.885067],
[120.709843, 30.907535],
[120.712705, 30.919683],
[120.70945, 30.933169],
[120.697551, 30.950358],
[120.684474, 30.95518],
[120.698225, 30.970803],
[120.705521, 30.966473],
[120.710067, 30.971919],
[120.725614, 30.971517],
[120.736109, 30.963706],
[120.745931, 30.9625],
[120.760692, 30.975445],
[120.770177, 30.978078],
[120.769953, 30.996642],
[120.802898, 31.005388],
[120.820914, 31.006369],
[120.840053, 30.997803],
[120.847406, 30.989592],
[120.853692, 30.993206],
[120.865646, 30.989815],
[120.86806, 30.995348],
[120.891352, 31.003737],
[120.895168, 31.017345],
[120.901342, 31.017479],
[120.901959, 31.037641],
[120.894551, 31.053875],
[120.902128, 31.085666],
[120.892193, 31.094181],
[120.869575, 31.097212],
[120.856778, 31.102828],
[120.857901, 31.108533],
[120.870585, 31.119719],
[120.872325, 31.127161],
[120.881305, 31.134736],
[120.905383, 31.134202],
[120.930359, 31.14142],
[120.983902, 31.131706],
[121.018475, 31.134113],
[121.025659, 31.140751],
[121.041823, 31.13888],
[121.041486, 31.14984],
[121.062533, 31.153137],
[121.065733, 31.148593],
[121.077014, 31.158438],
[121.075442, 31.173449],
[121.062646, 31.224655],
[121.064329, 31.246153],
[121.060962, 31.246509],
[121.063263, 31.267913],
[121.080437, 31.270138],
[121.084703, 31.287622],
[121.090147, 31.291893],
[121.09879, 31.276233],
[121.105469, 31.273653],
[121.11501, 31.285265],
[121.120342, 31.286154],
[121.143017, 31.275477],
[121.154242, 31.276723],
[121.161314, 31.283975],
[121.151267, 31.291937],
[121.143803, 31.309685],
[121.139649, 31.302969],
[121.12994, 31.302613],
[121.127246, 31.319291],
[121.133307, 31.325561],
[121.130445, 31.344191],
[121.117985, 31.343435],
[121.117255, 31.351704],
[121.108332, 31.350637],
[121.109286, 31.364684],
[121.12023, 31.368684],
[121.113776, 31.374462],
[121.148461, 31.385395],
[121.143803, 31.392327],
[121.158844, 31.4101],
[121.146272, 31.421072],
[121.164288, 31.427203],
[121.162717, 31.432222],
[121.14689, 31.437241],
[121.147339, 31.443947],
[121.160921, 31.449676],
[121.174952, 31.449276],
[121.186065, 31.454339],
[121.186065, 31.460822],
[121.214352, 31.479114],
[121.219067, 31.475207],
[121.230348, 31.477427],
[121.234725, 31.492698],
[121.240899, 31.493675],
[121.247073, 31.477072],
[121.261441, 31.478848],
[121.26885, 31.48746],
[121.298596, 31.4915],
[121.299943, 31.499756],
[121.310326, 31.505925],
[121.319923, 31.499711],
[121.343496, 31.512049],
[121.372232, 31.553224],
[121.345573, 31.571676],
[121.289111, 31.616282],
[121.145318, 31.753911],
[121.11849, 31.75909],
[121.149247, 31.78728],
[121.181519, 31.820416],
[121.200321, 31.835144],
[121.225296, 31.84704],
[121.265594, 31.864107],
[121.301907, 31.872727],
[121.323066, 31.868528],
[121.369314, 31.843281],
[121.385029, 31.833552],
[121.41629, 31.797634],
[121.410902, 31.795598],
[121.420893, 31.779581],
[121.4315, 31.76927],
[121.455578, 31.759356],
[121.487738, 31.753424],
[121.49857, 31.753247],
[121.51305, 31.743686],
[121.539429, 31.735496],
[121.565022, 31.716722],
[121.599651, 31.703127],
[121.600886, 31.70698],
[121.63327, 31.696173],
[121.642643, 31.697458],
[121.715269, 31.673848],
[121.81781, 31.652049],
[121.975185, 31.617035],
[121.96772, 31.703924],
[121.970302, 31.718892],
[121.960143, 31.736868],
[121.941005, 31.776572],
[121.897452, 31.85354],
[121.889145, 31.866627],
[121.874833, 31.90212],
[121.870287, 31.928279],
[121.856031, 31.955225],
[121.772405, 32.033235],
[121.759047, 32.0594],
[121.729637, 32.069194],
[121.59258, 32.112943],
[121.544368, 32.123039],
[121.52551, 32.136528],
[121.542291, 32.152131],
[121.50306, 32.170067],
[121.473089, 32.169803],
[121.458609, 32.17769],
[121.461527, 32.193726],
[121.479263, 32.197999],
[121.49958, 32.211169],
[121.493912, 32.263478],
[121.457767, 32.27391],
[121.45019, 32.282272],
[121.447047, 32.299258],
[121.440536, 32.366071],
[121.425495, 32.431033],
[121.417413, 32.443115],
[121.390529, 32.460729],
[121.351915, 32.474256],
[121.287652, 32.480185],
[121.269523, 32.483434],
[121.153119, 32.529266],
[121.122026, 32.569328],
[121.076901, 32.576391],
[121.051701, 32.587137],
[121.020496, 32.605513],
[120.988448, 32.606741],
[120.961733, 32.612178],
[120.979637, 32.636335],
[120.976044, 32.658426],
[120.963585, 32.682396],
[120.950059, 32.689581],
[120.933838, 32.69221],
[120.915934, 32.701234],
[120.915036, 32.711703],
[120.93294, 32.715688],
[120.952865, 32.714068],
[120.963136, 32.750238],
[120.971947, 32.761182],
[120.981376, 32.85971],
[120.978682, 32.875712],
[120.972677, 32.88568],
[120.957579, 32.893504],
[120.950395, 32.916405],
[120.940124, 32.975467],
[120.932604, 33.005899],
[120.917843, 33.02576],
[120.894438, 33.038634],
[120.87182, 33.04723],
[120.874065, 33.093645],
[120.859865, 33.142781],
[120.843757, 33.209835],
[120.846844, 33.219852],
[120.843028, 33.22965],
[120.819455, 33.238184],
[120.820297, 33.256077],
[120.831971, 33.26883],
[120.832589, 33.282148],
[120.821812, 33.298552],
[120.81373, 33.303425],
[120.796388, 33.306122],
[120.782862, 33.304208],
[120.769335, 33.306818],
[120.760748, 33.319869],
[120.740992, 33.337615],
[120.730777, 33.365183],
[120.728252, 33.384571],
[120.719833, 33.420467],
[120.717476, 33.436715],
[120.680153, 33.520297],
[120.649957, 33.577347],
[120.622849, 33.615113],
[120.611175, 33.627251],
[120.583786, 33.668462],
[120.570596, 33.702247],
[120.534508, 33.782587],
[120.50942, 33.830945],
[120.485454, 33.859221],
[120.424671, 33.975121],
[120.367591, 34.091424],
[120.359846, 34.121897],
[120.355973, 34.149559],
[120.347499, 34.179236],
[120.331671, 34.209333],
[120.314272, 34.255814],
[120.308492, 34.297452],
[120.311635, 34.307042],
[120.292833, 34.318092],
[120.233284, 34.337179],
[120.103691, 34.391622],
[120.043019, 34.422201],
[119.962536, 34.458907],
[119.919039, 34.469122],
[119.8495, 34.477404],
[119.823009, 34.481996],
[119.811615, 34.485557],
[119.781813, 34.515759],
[119.741066, 34.532871],
[119.697906, 34.546593],
[119.641388, 34.568971],
[119.62528, 34.585901],
[119.611248, 34.592929],
[119.584926, 34.601328],
[119.56893, 34.615381],
[119.560736, 34.63153],
[119.537051, 34.633758],
[119.464986, 34.674694],
[119.474584, 34.696054],
[119.484855, 34.692716],
[119.491814, 34.69554],
[119.492488, 34.711546],
[119.507978, 34.711032],
[119.522795, 34.722329],
[119.525714, 34.733281],
[119.508427, 34.729217],
[119.483508, 34.736404],
[119.457129, 34.748167],
[119.381809, 34.752444],
[119.378273, 34.761383],
[119.399993, 34.755823],
[119.444332, 34.758432],
[119.460777, 34.754069],
[119.468241, 34.748167],
[119.48839, 34.747868],
[119.49709, 34.759458],
[119.480421, 34.76412],
[119.477165, 34.769037],
[119.459486, 34.77109],
[119.456175, 34.779813],
[119.438271, 34.784302],
[119.440684, 34.769208],
[119.378497, 34.764547],
[119.370864, 34.772971],
[119.355037, 34.775751],
[119.342689, 34.769251],
[119.324393, 34.770406],
[119.312831, 34.774724],
[119.272196, 34.797811],
[119.250756, 34.794049],
[119.238577, 34.799563],
[119.213602, 34.833924],
[119.220393, 34.841187],
[119.218035, 34.852594],
[119.210515, 34.862333],
[119.21377, 34.876726],
[119.202433, 34.890433],
[119.212704, 34.917799],
[119.214612, 34.937687],
[119.211806, 34.957912],
[119.211357, 34.981715],
[119.21899, 35.004828],
[119.227521, 35.020944],
[119.232572, 35.041831],
[119.238072, 35.048479],
[119.279436, 35.071105],
[119.285442, 35.068506],
[119.281064, 35.053678],
[119.29184, 35.02849],
[119.307162, 35.03305],
[119.292682, 35.068506],
[119.293524, 35.07298],
[119.305871, 35.076686],
[119.30183, 35.093171],
[119.286677, 35.115146],
[119.273768, 35.115487],
[119.252665, 35.122683],
[119.24071, 35.122938],
[119.220729, 35.107183],
[119.203218, 35.110888],
[119.171395, 35.107183],
[119.159048, 35.100965],
[119.138057, 35.09628],
[119.12947, 35.076175],
[119.12049, 35.070083],
[119.120378, 35.058024],
[119.114597, 35.054956],
[119.073625, 35.056661],
[119.06139, 35.05159],
[119.037368, 35.051334],
[119.02721, 35.05534],
[118.999877, 35.053039],
[118.992132, 35.048181],
[118.965641, 35.046476],
[118.945155, 35.040808],
[118.926521, 35.05078],
[118.911143, 35.047754],
[118.903847, 35.041319],
[118.885774, 35.034244],
[118.865345, 35.029854],
[118.862482, 35.025719],
[118.86512, 34.99323],
[118.859227, 34.962647],
[118.860799, 34.944003],
[118.829761, 34.91114],
[118.807199, 34.877708],
[118.804449, 34.870277],
[118.804617, 34.852466],
[118.797265, 34.842853],
[118.788734, 34.845673],
[118.769034, 34.846143],
[118.768248, 34.838795],
[118.781999, 34.827472],
[118.776611, 34.818754],
[118.779024, 34.809608],
[118.77358, 34.795332],
[118.759998, 34.790287],
[118.737548, 34.792083],
[118.728399, 34.786867],
[118.740186, 34.781224],
[118.738502, 34.766857],
[118.727221, 34.768738],
[118.716445, 34.76382],
[118.716501, 34.747739],
[118.730364, 34.74543],
[118.74013, 34.736917],
[118.759212, 34.740853],
[118.768529, 34.738072],
[118.783402, 34.722029],
[118.76735, 34.710519],
[118.766228, 34.705213],
[118.744732, 34.695284],
[118.720093, 34.694214],
[118.704041, 34.688778],
[118.69029, 34.67859],
[118.681366, 34.678333],
[118.664304, 34.693443],
[118.650554, 34.69507],
[118.633716, 34.687023],
[118.604924, 34.696482],
[118.601332, 34.714156],
[118.570463, 34.71253],
[118.558901, 34.706839],
[118.546105, 34.706197],
[118.539314, 34.711503],
[118.525226, 34.712573],
[118.522701, 34.692288],
[118.508164, 34.687066],
[118.500812, 34.675165],
[118.484255, 34.670884],
[118.468484, 34.674309],
[118.460851, 34.657569],
[118.466463, 34.643137],
[118.474882, 34.637184],
[118.473816, 34.623435],
[118.463657, 34.625277],
[118.45434, 34.617737],
[118.439186, 34.626305],
[118.423864, 34.592929],
[118.428017, 34.561169],
[118.440421, 34.52751],
[118.439523, 34.507995],
[118.43088, 34.489076],
[118.421395, 34.48324],
[118.416231, 34.473885],
[118.408205, 34.435512]
]
],
[
[
[118.86585, 31.518972],
[118.856421, 31.522256],
[118.846262, 31.50912],
[118.846711, 31.50304],
[118.855691, 31.504726],
[118.86585, 31.518972]
]
],
[
[
[121.403775, 32.530583],
[121.402652, 32.521541],
[121.408601, 32.519566],
[121.435205, 32.520005],
[121.436495, 32.529266],
[121.429255, 32.531505],
[121.403775, 32.530583]
]
]
]
}
}
]
}
UI 交互
借助AI工具生成了一些样式
展开代码
vue
<template>
<div class="map-wrapper">
<!-- 地图容器 -->
<div ref="mapContainer" id="map" class="map-container"></div>
<!-- 控制面板 -->
<div class="control-panel">
<h3 class="panel-title">地图控制</h3>
<!-- 遮罩控制 -->
<div class="control-section">
<h4 class="section-title">区域遮罩</h4>
<div class="button-group">
<button
@click="toggleMask"
:class="[
'control-button',
maskEnabled ? 'button-danger' : 'button-success',
]"
>
{{ maskEnabled ? "取消遮罩" : "添加遮罩" }}
</button>
</div>
<!-- 遮罩样式控制 -->
<div v-if="maskEnabled" class="mask-controls">
<div class="control-item">
<label class="control-label">遮罩透明度</label>
<input
v-model="maskOpacity"
type="range"
min="0"
max="1"
step="0.1"
@input="updateMask"
class="range-input"
/>
<span class="control-value">{{ maskOpacity }}</span>
</div>
<div class="control-item">
<label class="control-label">边界颜色</label>
<input
v-model="strokeColor"
type="color"
@change="updateMask"
class="color-input"
/>
</div>
<div class="control-item">
<label class="control-label">边界宽度</label>
<input
v-model="lineWidth"
type="range"
min="1"
max="10"
@input="updateMask"
class="range-input"
/>
<span class="control-value">{{ lineWidth }}px</span>
</div>
</div>
</div>
<!-- 地图裁剪控制 -->
<div class="control-section">
<h4 class="section-title">地图裁剪</h4>
<div class="button-group">
<button
@click="toggleClipping"
:class="[
'control-button',
clippingEnabled ? 'button-warning' : 'button-primary',
]"
>
{{ clippingEnabled ? "取消裁剪" : "启用裁剪" }}
</button>
</div>
<!-- 裁剪预设选项 -->
<div v-if="clippingEnabled" class="clipping-controls">
<div class="control-item">
<label class="control-label">裁剪形状</label>
<select
v-model="clipShape"
@change="updateClipping"
class="select-input"
>
<option value="circle">圆形</option>
<option value="rectangle">矩形</option>
<option value="polygon">多边形区域</option>
</select>
</div>
<div v-if="clipShape === 'circle'" class="control-item">
<label class="control-label">圆形半径</label>
<input
v-model="circleRadius"
type="range"
min="50"
max="300"
@input="updateClipping"
class="range-input"
/>
<span class="control-value">{{ circleRadius }}px</span>
</div>
<button
@click="resetClipping"
class="control-button button-secondary full-width"
>
重置裁剪
</button>
</div>
</div>
</div>
<!-- 状态指示器 -->
<div class="status-indicator">
<div class="status-item">
<div
:class="['status-dot', maskEnabled ? 'dot-red' : 'dot-gray']"
></div>
<span class="status-text"
>遮罩: {{ maskEnabled ? "开启" : "关闭" }}</span
>
</div>
<div class="status-item">
<div
:class="['status-dot', clippingEnabled ? 'dot-blue' : 'dot-gray']"
></div>
<span class="status-text"
>裁剪: {{ clippingEnabled ? "开启" : "关闭" }}</span
>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Map from "ol/Map.js";
import XYZ from "ol/source/XYZ.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import "ol/ol.css";
import modalData from "./320000_bj.json";
const mapContainer = ref(null);
let map = null;
let canvas = null;
let ctx = null;
let clipCanvas = null;
let clipCtx = null;
// 响应式状态
const maskEnabled = ref(true);
const maskOpacity = ref(0.8);
const strokeColor = ref("#ff0000");
const lineWidth = ref(3);
const clippingEnabled = ref(false);
const clipShape = ref("circle");
const circleRadius = ref(150);
const view = new View({
center: [118.7784, 32.0647],
zoom: 7,
projection: "EPSG:4326",
});
onMounted(async () => {
map = new Map({
target: mapContainer.value,
layers: [
new TileLayer({
source: new XYZ({
url: "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
}),
}),
],
view,
});
// 创建遮罩canvas
const { offsetWidth, offsetHeight } = map.getViewport();
canvas = document.createElement("canvas");
canvas.width = offsetWidth;
canvas.height = offsetHeight;
canvas.style.position = "absolute";
canvas.style.top = "0px";
canvas.style.left = "0px";
canvas.style.zIndex = "1";
ctx = canvas.getContext("2d");
map.getViewport().appendChild(canvas);
// 创建裁剪canvas
clipCanvas = document.createElement("canvas");
clipCanvas.width = offsetWidth;
clipCanvas.height = offsetHeight;
clipCanvas.style.position = "absolute";
clipCanvas.style.top = "0px";
clipCanvas.style.left = "0px";
clipCanvas.style.zIndex = "2";
clipCtx = clipCanvas.getContext("2d");
map.getViewport().appendChild(clipCanvas);
// 注册map事件
map.on("postrender", () => {
if (maskEnabled.value) {
addMask();
}
if (clippingEnabled.value) {
addClipping();
}
});
// 监听窗口大小变化
window.addEventListener("resize", handleResize);
});
const handleResize = () => {
if (map && canvas && clipCanvas) {
const { offsetWidth, offsetHeight } = map.getViewport();
canvas.width = offsetWidth;
canvas.height = offsetHeight;
clipCanvas.width = offsetWidth;
clipCanvas.height = offsetHeight;
}
};
// 切换遮罩
const toggleMask = () => {
maskEnabled.value = !maskEnabled.value;
if (!maskEnabled.value) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
} else {
addMask();
}
};
// 更新遮罩
const updateMask = () => {
if (maskEnabled.value) {
addMask();
}
};
// 添加区域遮罩
const addMask = () => {
const fillStyle = `rgba(255,255,255,${maskOpacity.value})`;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 获取整个江苏省的所有多边形
const jiangsuPolygons = modalData.features[0].geometry.coordinates;
// 1. 绘制整个画布为半透明白色
ctx.fillStyle = fillStyle;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 2. 使用组合模式清除多边形区域
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = "rgba(255,255,255,1)";
// 绘制所有多边形
jiangsuPolygons.forEach((polygon) => {
const ring = polygon[0];
const coords = ring.map((coord) => map.getPixelFromCoordinate(coord));
ctx.beginPath();
coords.forEach((coord, index) => {
index === 0
? ctx.moveTo(coord[0], coord[1])
: ctx.lineTo(coord[0], coord[1]);
});
ctx.closePath();
ctx.fill();
});
// 3. 恢复组合模式并绘制边界
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = strokeColor.value;
ctx.lineWidth = lineWidth.value;
// 绘制所有多边形的边界
jiangsuPolygons.forEach((polygon) => {
const ring = polygon[0];
const coords = ring.map((coord) => map.getPixelFromCoordinate(coord));
ctx.beginPath();
coords.forEach((coord, index) => {
index === 0
? ctx.moveTo(coord[0], coord[1])
: ctx.lineTo(coord[0], coord[1]);
});
ctx.closePath();
ctx.stroke();
});
};
// 切换裁剪
const toggleClipping = () => {
clippingEnabled.value = !clippingEnabled.value;
if (!clippingEnabled.value) {
clipCtx.clearRect(0, 0, clipCanvas.width, clipCanvas.height);
clipCanvas.style.display = "none";
} else {
clipCanvas.style.display = "block";
addClipping();
}
};
// 更新裁剪
const updateClipping = () => {
if (clippingEnabled.value) {
addClipping();
}
};
// 添加裁剪效果
const addClipping = () => {
clipCtx.clearRect(0, 0, clipCanvas.width, clipCanvas.height);
if (clipShape.value === "polygon") {
// 对于多边形裁剪，只显示江苏省区域内的内容
// 先填充整个画布为黑色遮罩
clipCtx.fillStyle = "rgba(255,255,255,1)";
clipCtx.fillRect(0, 0, clipCanvas.width, clipCanvas.height);
// 使用destination-out模式清除江苏省区域，显示下方地图
clipCtx.globalCompositeOperation = "destination-out";
const jiangsuPolygons = modalData.features[0].geometry.coordinates;
jiangsuPolygons.forEach((polygon) => {
const ring = polygon[0];
const coords = ring.map((coord) => map.getPixelFromCoordinate(coord));
clipCtx.beginPath();
coords.forEach((coord, index) => {
index === 0
? clipCtx.moveTo(coord[0], coord[1])
: clipCtx.lineTo(coord[0], coord[1]);
});
clipCtx.closePath();
clipCtx.fill();
});
// 恢复组合模式并绘制边界
clipCtx.globalCompositeOperation = "source-over";
clipCtx.strokeStyle = "#00ff00";
clipCtx.lineWidth = 2;
jiangsuPolygons.forEach((polygon) => {
const ring = polygon[0];
const coords = ring.map((coord) => map.getPixelFromCoordinate(coord));
clipCtx.beginPath();
coords.forEach((coord, index) => {
index === 0
? clipCtx.moveTo(coord[0], coord[1])
: clipCtx.lineTo(coord[0], coord[1]);
});
clipCtx.closePath();
clipCtx.stroke();
});
} else {
// 对于圆形和矩形裁剪，也采用相同的逻辑
// 先填充整个画布为黑色遮罩
clipCtx.fillStyle = "rgba(255,255,255,1)";
clipCtx.fillRect(0, 0, clipCanvas.width, clipCanvas.height);
// 根据选择的形状创建透明区域
clipCtx.globalCompositeOperation = "destination-out";
const centerX = clipCanvas.width / 2;
const centerY = clipCanvas.height / 2;
if (clipShape.value === "circle") {
clipCtx.beginPath();
clipCtx.arc(centerX, centerY, circleRadius.value, 0, 2 * Math.PI);
clipCtx.fill();
} else if (clipShape.value === "rectangle") {
const rectWidth = circleRadius.value * 2;
const rectHeight = circleRadius.value * 1.5;
clipCtx.fillRect(
centerX - rectWidth / 2,
centerY - rectHeight / 2,
rectWidth,
rectHeight
);
}
// 恢复组合模式并添加边框
clipCtx.globalCompositeOperation = "source-over";
clipCtx.strokeStyle = "#00ff00";
clipCtx.lineWidth = 2;
if (clipShape.value === "circle") {
clipCtx.beginPath();
clipCtx.arc(centerX, centerY, circleRadius.value, 0, 2 * Math.PI);
clipCtx.stroke();
} else if (clipShape.value === "rectangle") {
const rectWidth = circleRadius.value * 2;
const rectHeight = circleRadius.value * 1.5;
clipCtx.strokeRect(
centerX - rectWidth / 2,
centerY - rectHeight / 2,
rectWidth,
rectHeight
);
}
}
};
// 重置裁剪
const resetClipping = () => {
circleRadius.value = 150;
clipShape.value = "circle";
if (clippingEnabled.value) {
addClipping();
}
};
</script>
<style scoped>
/* 主容器 */
.map-wrapper {
position: relative;
width: 100%;
height: 100vh;
}
/* 地图容器 */
.map-container {
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
}
/* 控制面板 */
.control-panel {
position: absolute;
top: 16px;
left: 16px;
z-index: 1000; /* 从10改为1000 */
background: white;
border-radius: 8px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
padding: 16px;
min-width: 256px;
}
.panel-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
color: #1f2937;
margin-top: 0;
}
/* 控制区域 */
.control-section {
margin-bottom: 24px;
}
.control-section:last-child {
margin-bottom: 0;
}
.section-title {
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
color: #374151;
margin-top: 0;
}
/* 按钮组 */
.button-group {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
/* 按钮样式 */
.control-button {
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.button-success {
background-color: #10b981;
color: white;
}
.button-success:hover {
background-color: #059669;
}
.button-danger {
background-color: #ef4444;
color: white;
}
.button-danger:hover {
background-color: #dc2626;
}
.button-primary {
background-color: #3b82f6;
color: white;
}
.button-primary:hover {
background-color: #2563eb;
}
.button-warning {
background-color: #f59e0b;
color: white;
}
.button-warning:hover {
background-color: #d97706;
}
.button-secondary {
background-color: #6b7280;
color: white;
}
.button-secondary:hover {
background-color: #4b5563;
}
.full-width {
width: 100%;
}
/* 控制项 */
.mask-controls,
.clipping-controls {
display: flex;
flex-direction: column;
gap: 8px;
}
.control-item {
display: flex;
flex-direction: column;
}
.control-label {
display: block;
font-size: 12px;
color: #6b7280;
margin-bottom: 4px;
}
.control-value {
font-size: 12px;
color: #6b7280;
margin-top: 2px;
}
/* 输入控件 */
.range-input {
width: 100%;
height: 4px;
background: #d1d5db;
border-radius: 2px;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.range-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: #4f46e5;
border-radius: 50%;
cursor: pointer;
}
.range-input::-moz-range-thumb {
width: 16px;
height: 16px;
background: #4f46e5;
border-radius: 50%;
cursor: pointer;
border: none;
}
.color-input {
width: 100%;
height: 32px;
border-radius: 4px;
border: 1px solid #d1d5db;
cursor: pointer;
}
.select-input {
width: 100%;
padding: 4px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 14px;
background: white;
color: #1f2937;
}
.select-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 1px #3b82f6;
}
/* 状态指示器 */
.status-indicator {
position: absolute;
top: 16px;
right: 16px;
z-index: 1000; /* 从10改为1000 */
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 12px;
border-radius: 8px;
font-size: 14px;
}
.status-item {
display: flex;
align-items: center;
gap: 8px;
}
.status-item:first-child {
margin-bottom: 4px;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.dot-red {
background-color: #ef4444;
}
.dot-blue {
background-color: #3b82f6;
}
.dot-gray {
background-color: #6b7280;
}
.status-text {
font-size: 14px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.control-panel {
min-width: 200px;
padding: 12px;
}
.panel-title {
font-size: 16px;
}
.control-button {
padding: 6px 10px;
font-size: 12px;
}
}
</style>