mirror of
https://gitee.com/dromara/go-view.git
synced 2025-10-14 06:22:10 +08:00
Pre Merge pull request !119 from 解剑放舟/dev
This commit is contained in:
解剑放舟
Gitee
commit
a3c8ef9b8c
@ -1,19 +1,193 @@
|
||||
{
|
||||
"markers": [
|
||||
{
|
||||
"name": "某某地市",
|
||||
"value": 10,
|
||||
"position": [116.300467, 39.907761]
|
||||
},
|
||||
{
|
||||
"name": "某某地市",
|
||||
"value": 15,
|
||||
"position": [116.400567, 39.908761]
|
||||
},
|
||||
{
|
||||
"name": "某某地市",
|
||||
"value": 20,
|
||||
"position": [116.200467, 39.937761]
|
||||
}
|
||||
]
|
||||
}
|
||||
"markers": [{
|
||||
"name": "某某地市",
|
||||
"value": 10,
|
||||
"position": [103.97968785561011, 30.81394429379418]
|
||||
},
|
||||
{
|
||||
"name": "某某地市",
|
||||
"value": 15,
|
||||
"position": [103.97664416399704, 30.816569718817505]
|
||||
},
|
||||
{
|
||||
"name": "某某地市",
|
||||
"value": 20,
|
||||
"position": [103.98931694891814, 30.825916214561687]
|
||||
}
|
||||
],
|
||||
"polygons": [{
|
||||
"name": "某某区域",
|
||||
"position": [103.987264891828,30.820649806031],
|
||||
"position_list": [
|
||||
[103.97968785561011, 30.81394429379418],
|
||||
[103.97823357541921, 30.814536301309317],
|
||||
[103.97809474707498, 30.814470284775894],
|
||||
[103.97800691748529, 30.814520635119266],
|
||||
[103.97763983041392, 30.814898772160632],
|
||||
[103.97642296584723, 30.814739804398528],
|
||||
[103.97636263842509, 30.815141983016133],
|
||||
[103.97664416399704, 30.816569718817505],
|
||||
[103.97680503562395, 30.81755505742001],
|
||||
[103.97696590725087, 30.819002902062323],
|
||||
[103.97670449051986, 30.81962627972905],
|
||||
[103.97636263842509, 30.82075238111753],
|
||||
[103.9758829481396, 30.821616200627204],
|
||||
[103.9763772155361, 30.822249916900205],
|
||||
[103.97685030479778, 30.82294676558081],
|
||||
[103.97708684987828, 30.823515752250216],
|
||||
[103.97715717416429, 30.823963269289493],
|
||||
[103.97720152602966, 30.824493097678385],
|
||||
[103.97717155792111, 30.825452063661885],
|
||||
[103.97776092232874, 30.825641858385097],
|
||||
[103.97773095511957, 30.826830576869668],
|
||||
[103.97733138633447, 30.82746988692577],
|
||||
[103.97733538292164, 30.827591861974895],
|
||||
[103.97734585732553, 30.827709700142577],
|
||||
[103.97742179697843, 30.82780135185095],
|
||||
[103.9776967521035, 30.82781968183292],
|
||||
[103.97774650529703, 30.827950612330937],
|
||||
[103.97779364056413, 30.82804488286513],
|
||||
[103.97783553817959, 30.828175813363146],
|
||||
[103.97793766429186, 30.82822294863024],
|
||||
[103.9781262044608, 30.828196762170876],
|
||||
[103.97825975378464, 30.828175813363146],
|
||||
[103.97840639633819, 30.828241278612154],
|
||||
[103.97857136977296, 30.82826746507152],
|
||||
[103.9788279940168, 30.82846909847018],
|
||||
[103.97902962741546, 30.828487428452092],
|
||||
[103.9790673602705, 30.828453227234718],
|
||||
[103.97911991665092, 30.82844357391184],
|
||||
[103.97922503031094, 30.8284585907914],
|
||||
[103.9793204906482, 30.828478969428943],
|
||||
[103.97937519191163, 30.828462880557538],
|
||||
[103.97939878922278, 30.828456445008953],
|
||||
[103.97947172514006, 30.828491840526056],
|
||||
[103.9796272493981, 30.828489695642986],
|
||||
[103.97968409644398, 30.828569067108788],
|
||||
[103.97977097634953, 30.828630203920852],
|
||||
[103.97984820203294, 30.8286570190063],
|
||||
[103.98032502078314, 30.82909707257187],
|
||||
[103.98045702597102, 30.828992858233846],
|
||||
[103.98117086374441, 30.828338506117234],
|
||||
[103.98140880996868, 30.827862613668742],
|
||||
[103.98176572930504, 30.827446208675667],
|
||||
[103.98256879691252, 30.827178519173344],
|
||||
[103.98337186541931, 30.827148775895353],
|
||||
[103.9845021090851, 30.82735697884158],
|
||||
[103.98545389398208, 30.827654410722516],
|
||||
[103.98604281052735, 30.827933997356126],
|
||||
[103.98691845162529, 30.828219533005097],
|
||||
[103.98766084377297, 30.82837181880444],
|
||||
[103.98832709302098, 30.82827663995505],
|
||||
[103.98874587851952, 30.827838819406054],
|
||||
[103.98906948516867, 30.827058356258192],
|
||||
[103.98914562716902, 30.826315964110506],
|
||||
[103.98931694891814, 30.825916214561687],
|
||||
[103.98954537671784, 30.825516465012925],
|
||||
[103.98964055556723, 30.82496443056408],
|
||||
[103.9897166984669, 30.824431431165692],
|
||||
[103.98986898336693, 30.824031681616873],
|
||||
[103.99017355496562, 30.823574825118158],
|
||||
[103.99057330451444, 30.823327361368683],
|
||||
[103.99110630301351, 30.823232182519234],
|
||||
[103.99167737431145, 30.823194111519058],
|
||||
[103.99207712386021, 30.823441575268532],
|
||||
[103.99253398035898, 30.823936503666744],
|
||||
[103.99274717993848, 30.824298181316067],
|
||||
[103.99324210743737, 30.824621787965214],
|
||||
[103.99379414278553, 30.82477407376456],
|
||||
[103.99455556998362, 30.824583716965037],
|
||||
[103.9952979621313, 30.82416493146644],
|
||||
[103.99584999658015, 30.82347964716803],
|
||||
[103.99626878207869, 30.822737255020343],
|
||||
[103.99661142467755, 30.82218521967218],
|
||||
[103.99718249507617, 30.821823542022912],
|
||||
[103.99758224462494, 30.821614149273614],
|
||||
[103.99817235097328, 30.82174739912324],
|
||||
[103.9985340286226, 30.821994862872657],
|
||||
[103.99874356616272, 30.822070296207244],
|
||||
[103.9987239735326, 30.82169558468354],
|
||||
[103.9994821442856, 30.821428457257525],
|
||||
[104.00052708365803, 30.821098477113082],
|
||||
[104.00084527998575, 30.82090205978227],
|
||||
[104.00132625630175, 30.820767022979794],
|
||||
[104.0013201184288, 30.82025142726161],
|
||||
[104.00047306857732, 30.819606933513228],
|
||||
[104.00060196750684, 30.81939210256354],
|
||||
[104.00002652640313, 30.818855023840342],
|
||||
[103.99952781095976, 30.818442624427632],
|
||||
[103.99897155149597, 30.81872075415953],
|
||||
[103.99848242642292, 30.818164494695736],
|
||||
[103.99922090921763, 30.817665779252366],
|
||||
[103.9990482771563, 30.8172629711093],
|
||||
[104.00169530569389, 30.816629985985116],
|
||||
[104.0015034919926, 30.815718870229716],
|
||||
[104.00097600453904, 30.81572846149936],
|
||||
[104.00064033078672, 30.815929865570865],
|
||||
[103.99986348561146, 30.814635123312314],
|
||||
[103.9988660538254, 30.815105066745502],
|
||||
[103.99844406404236, 30.81523933642626],
|
||||
[103.99817552468079, 30.815191382776163],
|
||||
[103.99760967484667, 30.815047522725024],
|
||||
[103.99730277310454, 30.815066704364938],
|
||||
[103.99644920226893, 30.815306471716326],
|
||||
[103.99607516523673, 30.814826937013606],
|
||||
[103.99581621714475, 30.814807755373636],
|
||||
[103.99533668244197, 30.814894072303673],
|
||||
[103.99500100868966, 30.815181792405838],
|
||||
[103.99476124133827, 30.81535442446716],
|
||||
[103.9944735212361, 30.81535442446716],
|
||||
[103.99430088917478, 30.815191382776163],
|
||||
[103.99412825621414, 30.814980388334334],
|
||||
[103.99385971775183, 30.814865300293434],
|
||||
[103.99390767050267, 30.814740620982946],
|
||||
[103.99411866584381, 30.814663895322553],
|
||||
[103.9942433451543, 30.81437617522039],
|
||||
[103.9936679040506, 30.813676054806137],
|
||||
[103.99321714135806, 30.813887050147287],
|
||||
[103.99278556120476, 30.814299449559996],
|
||||
[103.99237316179205, 30.81470225860238],
|
||||
[103.99218134809081, 30.81470225860238],
|
||||
[103.99211421280074, 30.81454880728171],
|
||||
[103.99214298481098, 30.81414599823927],
|
||||
[103.99218134809081, 30.813791143746357],
|
||||
[103.99196076237934, 30.81358014840515],
|
||||
[103.99151959095644, 30.81355137639497],
|
||||
[103.99121268921431, 30.813781552476712],
|
||||
[103.990953740223, 30.814174770249508],
|
||||
[103.99074274578118, 30.814683076962467],
|
||||
[103.99102087551307, 30.814750211353214],
|
||||
[103.9916730413778, 30.815009160344516],
|
||||
[103.99159631661678, 30.8151530203956],
|
||||
[103.99133736762548, 30.815488694147973],
|
||||
[103.9910784195335, 30.81556541980831],
|
||||
[103.99087701456261, 30.81525851806623],
|
||||
[103.99071397377094, 30.815181792405838],
|
||||
[103.99032075509882, 30.815248926796585],
|
||||
[103.98999467171677, 30.81541196848758],
|
||||
[103.9889013344291, 30.815814777530022],
|
||||
[103.9885272973969, 30.816016181601526],
|
||||
[103.98846975337648, 30.816160042551985],
|
||||
[103.98854647903681, 30.816313492973393],
|
||||
[103.98869992945822, 30.816543669055136],
|
||||
[103.98870952072787, 30.816793026776793],
|
||||
[103.98858484141738, 30.816994431747673],
|
||||
[103.98825875803533, 30.817119110158842],
|
||||
[103.98725293557459, 30.81550967353263],
|
||||
[103.9862591811164, 30.813913933581205],
|
||||
[103.98595047263626, 30.814481672890963],
|
||||
[103.98584190647887, 30.814865300293434],
|
||||
[103.9851993300851, 30.81490366267394],
|
||||
[103.98488283797263, 30.81523933642626],
|
||||
[103.98448002893025, 30.81520097404575],
|
||||
[103.98388540708595, 30.815622963828787],
|
||||
[103.98312774265128, 30.816121679272158],
|
||||
[103.98284961291938, 30.816217586572407],
|
||||
[103.98107533685737, 30.815699689489122],
|
||||
[103.98125571477948, 30.815349772274203],
|
||||
[103.98039541521632, 30.814796481472513],
|
||||
[103.9804933414946, 30.814638069491366],
|
||||
[103.97968785561011, 30.81394429379418]
|
||||
]
|
||||
}]
|
||||
}
|
||||
@ -33,8 +33,25 @@ let {
|
||||
marker
|
||||
} = toRefs(props.chartConfig.option.mapOptions)
|
||||
|
||||
let color = [
|
||||
"#95f204", // 荧色
|
||||
"#bfbf00", // 黄色01
|
||||
"#f59a23", // 淡黄色
|
||||
"#ec808d", // 小红色
|
||||
"#facd91",
|
||||
"#ffff80",
|
||||
"#caf982",
|
||||
"#80ffff",
|
||||
"#81d3f8",
|
||||
"#c280ff",
|
||||
"#0000ff",
|
||||
"#02a7f0",
|
||||
"#8400ff"
|
||||
];
|
||||
|
||||
let mapIns: any = null
|
||||
let markers: any = []
|
||||
let polygons: any = []
|
||||
let AMapIns: any = null
|
||||
const vChartRef = ref<HTMLElement>()
|
||||
|
||||
@ -69,6 +86,7 @@ const dataHandle = (newData: any) => {
|
||||
initMap(props.chartConfig.option)
|
||||
return
|
||||
}
|
||||
|
||||
if (isArray(newData.markers)) {
|
||||
// 先清除旧标记
|
||||
mapIns.remove(markers)
|
||||
@ -95,6 +113,58 @@ const dataHandle = (newData: any) => {
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (isArray(newData.polygons)) {
|
||||
// 先清除旧标记
|
||||
mapIns.remove(markers)
|
||||
markers = []
|
||||
|
||||
// 先清除旧多边形图层
|
||||
mapIns.remove(polygons)
|
||||
polygons = []
|
||||
// 绘制新的多边形图层
|
||||
var index = 0
|
||||
newData.polygons.forEach((polygonItem: any) => {
|
||||
var path = [];
|
||||
for (let i = 0; i < polygonItem.position_list.length; i++) {
|
||||
var pos = polygonItem.position_list[i]
|
||||
path.push(new AMapIns.LngLat(pos[0], pos[1]))
|
||||
}
|
||||
|
||||
let fillColor = color[index] || color[index - color.length] || color[parseInt(String(Math.random() * color.length))]
|
||||
const polygonInstance = new AMapIns.Polygon({
|
||||
bubble: true,
|
||||
fillColor,
|
||||
fillOpacity: 0.4,
|
||||
strokeWeight: 1,
|
||||
strokeColor: "#0074ff",
|
||||
path: path
|
||||
});
|
||||
|
||||
polygons.push(polygonInstance)
|
||||
polygonInstance.setMap(mapIns)
|
||||
|
||||
const markerInstance = new AMapIns.Marker({
|
||||
zooms: [11, 20],
|
||||
position: [polygonItem.position[0], polygonItem.position[1]],
|
||||
content: `<div class='mapMarker gridCenterMarker'>
|
||||
<span class='village-name'>${polygonItem.name}</span>
|
||||
<div class='highlight-body'>
|
||||
<i></i>
|
||||
<i></i>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>`,
|
||||
zIndex: 1000,
|
||||
});
|
||||
|
||||
markers.push(markerInstance)
|
||||
markerInstance.setMap(mapIns)
|
||||
|
||||
index++
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const stopWatch = watch(
|
||||
@ -128,3 +198,65 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
dataHandle(newData)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$primaryColor: #0074ff;
|
||||
// 格子中心label
|
||||
.mapMarker.gridCenterMarker {
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-family: youshe, pingfang;
|
||||
transform: translateX(-50%);
|
||||
padding: 0 20px;
|
||||
background: linear-gradient(90deg, transparent, #0080ff66 30%, #00daff, #0080ff66 70%, transparent) no-repeat,
|
||||
linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba($primaryColor, 0.3) 10%,
|
||||
rgba($primaryColor, 0.8) 30%,
|
||||
$primaryColor,
|
||||
rgba($primaryColor, 0.8) 70%,
|
||||
rgba($primaryColor, 0.3) 90%,
|
||||
transparent
|
||||
)
|
||||
no-repeat;
|
||||
background-size: 100% 2px, 100% 100%;
|
||||
border-radius: 4px;
|
||||
.village-name {
|
||||
// background: linear-gradient(180deg, #e4e6eb, #007eff);
|
||||
// background-clip: text;
|
||||
// -webkit-background-clip: text;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(100% - 4px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(90deg);
|
||||
width: 14px;
|
||||
height: 20px;
|
||||
background-color: $primaryColor;
|
||||
background: linear-gradient(0deg, rgba($primaryColor, 0.8), $primaryColor, rgba($primaryColor, 0.8));
|
||||
clip-path: polygon(0 0, 100% 50%, 0 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
left: 50%;
|
||||
transform: translate(-50%, -10px);
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 6px;
|
||||
background: radial-gradient(black, #393636, transparent);
|
||||
animation: fadeDown1 300ms ease-in-out forwards;
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user