mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改地图

wangqin
刘朋 11 months ago
parent
75e31d0026
commit
3ad2d9e528
3 changed files with 262 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/data/ac.json
  2. 161
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/data/lcz.json
  3. 108
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue

15
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/data/ac.json
View File

File diff suppressed because one or more lines are too long

161
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/data/lcz.json
View File

@ -0,0 +1,161 @@
[
{"code":"K54","lng":116.864504,"lat":36.580292},
{"code":"K55","lng":116.857721,"lat":36.580915},
{"code":"K56","lng":116.84603,"lat":36.582315},
{"code":"K57","lng":116.835372,"lat":36.583456},
{"code":"K58","lng":116.823809,"lat":36.582523},
{"code":"K59","lng":116.813668,"lat":36.578892},
{"code":"K60","lng":116.805077,"lat":36.57303},
{"code":"K61","lng":116.798876,"lat":36.565715},
{"code":"K62","lng":116.794871,"lat":36.55731},
{"code":"K63","lng":116.791447,"lat":36.5488},
{"code":"K64","lng":116.786995,"lat":36.540406},
{"code":"K65","lng":116.781607,"lat":36.532641},
{"code":"K66","lng":116.774733,"lat":36.525493},
{"code":"K67","lng":116.767455,"lat":36.51867},
{"code":"K68","lng":116.760581,"lat":36.511521},
{"code":"K69","lng":116.754112,"lat":36.504046},
{"code":"K70","lng":116.747238,"lat":36.497221},
{"code":"K71","lng":116.739556,"lat":36.49072},
{"code":"K72","lng":116.731874,"lat":36.483893},
{"code":"K73","lng":116.725809,"lat":36.476416},
{"code":"K74","lng":116.71934,"lat":36.469262},
{"code":"K75","lng":116.714648,"lat":36.460906},
{"code":"K76","lng":116.709238,"lat":36.453097},
{"code":"K77","lng":116.704245,"lat":36.444952},
{"code":"K78","lng":116.699945,"lat":36.436583},
{"code":"K78","lng":116.696894,"lat":36.428437},
{"code":"K80","lng":116.694674,"lat":36.419397},
{"code":"K81","lng":116.691207,"lat":36.410914},
{"code":"K82","lng":116.683856,"lat":36.403992},
{"code":"K83","lng":116.674701,"lat":36.398969},
{"code":"K84","lng":116.664021,"lat":36.396401},
{"code":"K85","lng":116.653895,"lat":36.392381},
{"code":"K86","lng":116.644645,"lat":36.38743},
{"code":"K87","lng":116.634658,"lat":36.383633},
{"code":"K88","lng":116.623839,"lat":36.381065},
{"code":"K89","lng":116.613991,"lat":36.37738},
{"code":"K90","lng":116.604421,"lat":36.372466},
{"code":"K91","lng":116.596376,"lat":36.366212},
{"code":"K92","lng":116.588952,"lat":36.359622},
{"code":"K93","lng":116.58166,"lat":36.35263},
{"code":"K94","lng":116.572283,"lat":36.348155},
{"code":"K95","lng":116.561518,"lat":36.345358},
{"code":"K96","lng":116.5511,"lat":36.342001},
{"code":"K97","lng":116.543113,"lat":36.335847},
{"code":"K98","lng":116.535473,"lat":36.329413},
{"code":"K99","lng":116.530959,"lat":36.321019},
{"code":"K100","lng":116.524816,"lat":36.313313},
{"code":"K101","lng":116.517853,"lat":36.30658},
{"code":"K102","lng":116.50741,"lat":36.303214},
{"code":"K103","lng":116.498011,"lat":36.298164},
{"code":"K104","lng":116.492789,"lat":36.290588},
{"code":"K105","lng":116.487915,"lat":36.282451},
{"code":"K106","lng":116.48513,"lat":36.273751},
{"code":"K107","lng":116.484434,"lat":36.26477},
{"code":"K108","lng":116.482346,"lat":36.256068},
{"code":"K109","lng":116.479909,"lat":36.247085},
{"code":"K110","lng":116.480953,"lat":36.238381},
{"code":"K111","lng":116.474687,"lat":36.220971},
{"code":"K112","lng":116.474687,"lat":36.220971},
{"code":"K113","lng":116.468073,"lat":36.213388},
{"code":"K114","lng":116.462155,"lat":36.206085},
{"code":"K1150","lng":116.456585,"lat":36.198501},
{"code":"K116","lng":116.454844,"lat":36.189511},
{"code":"K117","lng":116.454322,"lat":36.18052},
{"code":"K118","lng":116.453278,"lat":36.171489},
{"code":"K119","lng":116.450073,"lat":36.163385},
{"code":"K120","lng":116.447643,"lat":36.154871},
{"code":"K121","lng":116.442917,"lat":36.146339},
{"code":"K122","lng":116.441756,"lat":36.137402},
{"code":"K123","lng":116.440466,"lat":36.128509},
{"code":"K124","lng":116.438119,"lat":36.119675},
{"code":"K125","lng":116.43906,"lat":36.110446},
{"code":"K126","lng":116.441559,"lat":36.10191},
{"code":"K127","lng":116.442922,"lat":36.093098},
{"code":"K128","lng":116.4419,"lat":36.084075},
{"code":"K129","lng":116.440991,"lat":36.075077},
{"code":"K130","lng":116.441446,"lat":36.065987},
{"code":"K131","lng":116.444513,"lat":36.057446},
{"code":"K132","lng":116.445182,"lat":36.048615},
{"code":"K133","lng":116.443483,"lat":36.039641},
{"code":"K134","lng":116.439746,"lat":36.031215},
{"code":"K135","lng":116.433857,"lat":36.023613},
{"code":"K136","lng":116.431252,"lat":36.014834},
{"code":"K137","lng":116.431365,"lat":36.014834},
{"code":"K138","lng":116.431139,"lat":36.015009},
{"code":"K139","lng":116.431139,"lat":36.005848},
{"code":"K140","lng":116.428873,"lat":35.996948},
{"code":"K141","lng":116.42302,"lat":35.989299},
{"code":"K142","lng":116.416678,"lat":35.981876},
{"code":"K143","lng":116.412148,"lat":35.973628},
{"code":"K144","lng":116.40875,"lat":35.96492},
{"code":"K145","lng":116.407618,"lat":35.955936},
{"code":"K146","lng":116.406938,"lat":35.946886},
{"code":"K147","lng":116.409203,"lat":35.937992},
{"code":"K148","lng":116.412261,"lat":35.929188},
{"code":"K149","lng":116.415192,"lat":35.920454},
{"code":"K150","lng":116.416236,"lat":35.911326},
{"code":"K151","lng":116.415818,"lat":35.902197},
{"code":"K152","lng":116.413314,"lat":35.893405},
{"code":"K153","lng":116.409974,"lat":35.884612},
{"code":"K154","lng":116.403712,"lat":35.877171},
{"code":"K155","lng":116.397451,"lat":35.869729},
{"code":"K156","lng":116.390771,"lat":35.862527},
{"code":"K157","lng":116.384802,"lat":35.854733},
{"code":"K158","lng":116.381264,"lat":35.846193},
{"code":"K159","lng":116.375815,"lat":35.838318},
{"code":"K160","lng":116.370209,"lat":35.830526},
{"code":"K161","lng":116.366206,"lat":35.822089},
{"code":"K162","lng":116.361747,"lat":35.814167},
{"code":"K163","lng":116.356086,"lat":35.806346},
{"code":"K164","lng":116.348957,"lat":35.799374},
{"code":"K165","lng":116.341619,"lat":35.792402},
{"code":"K166","lng":116.3347,"lat":35.785089},
{"code":"K167","lng":116.326943,"lat":35.778456},
{"code":"K168","lng":116.317299,"lat":35.773863},
{"code":"K169","lng":116.309751,"lat":35.767229},
{"code":"K170","lng":116.30388,"lat":35.759573},
{"code":"K171","lng":116.298219,"lat":35.751746},
{"code":"K172","lng":116.290881,"lat":35.74494},
{"code":"K173","lng":116.282076,"lat":35.739154},
{"code":"K174","lng":116.272431,"lat":35.734389},
{"code":"K175","lng":116.264045,"lat":35.728432},
{"code":"K176","lng":116.257545,"lat":35.720943},
{"code":"K177","lng":116.252886,"lat":35.71273},
{"code":"K178","lng":116.247407,"lat":35.704879},
{"code":"K179","lng":116.241238,"lat":35.697371},
{"code":"K180","lng":116.234196,"lat":35.6904},
{"code":"K181","lng":116.226049,"lat":35.684243},
{"code":"K182","lng":116.217362,"lat":35.678514},
{"code":"K183","lng":116.208758,"lat":35.672627},
{"code":"K184","lng":116.200902,"lat":35.666283},
{"code":"K185","lng":116.194434,"lat":35.658863},
{"code":"K186","lng":116.189724,"lat":35.650712},
{"code":"K187","lng":116.183941,"lat":35.642973},
{"code":"K188","lng":116.176385,"lat":35.636248},
{"code":"K189","lng":116.167679,"lat":35.63058},
{"code":"K190","lng":116.158725,"lat":35.625216},
{"code":"K191","lng":116.151916,"lat":35.617975},
{"code":"K192","lng":116.1452,"lat":35.610178},
{"code":"K193","lng":116.140303,"lat":35.602095},
{"code":"K194","lng":116.137598,"lat":35.593248},
{"code":"K195","lng":116.136944,"lat":35.584263},
{"code":"K196","lng":116.137909,"lat":35.575207},
{"code":"K197","lng":116.139862,"lat":35.566291},
{"code":"K198","lng":116.140001,"lat":35.557251},
{"code":"K199","lng":116.139095,"lat":35.548242},
{"code":"K200","lng":116.136445,"lat":35.539503},
{"code":"K201","lng":116.132262,"lat":35.531164},
{"code":"K202","lng":116.126964,"lat":35.523226},
{"code":"K203","lng":116.120062,"lat":35.516206},
{"code":"K204","lng":116.112765,"lat":35.509378},
{"code":"K205","lng":116.106769,"lat":35.501773},
{"code":"K206","lng":116.101471,"lat":35.493727},
{"code":"K207","lng":116.096033,"lat":35.485894},
{"code":"K208","lng":116.088962,"lat":35.478935},
{"code":"K209","lng":116.08151,"lat":35.472134},
{"code":"K210","lng":116.074572,"lat":35.465123}
]

108
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue
View File

@ -1,30 +1,39 @@
<template>
<div class='AMapContainer' v-loading="loading" element-loading-text="地图加载中..." element-loading-spinner="el-icon-place"
element-loading-background="rgba(0, 0, 0, 0.42)" ref="mapContainerRef"
:style="{ ...this.size, ...getReverseStyle }" />
<div
class="AMapContainer"
v-loading="loading"
element-loading-text="地图加载中..."
element-loading-spinner="el-icon-place"
element-loading-background="rgba(0, 0, 0, 0.42)"
ref="mapContainerRef"
:style="{ ...this.size, ...getReverseStyle }"
/>
</template>
<script lang="ts">
import { onceObserver } from "@screen/utils/resizeObserver";
import { loadAMap } from "./loadAMap"
import { loadAMap } from "./loadAMap";
const acData = require("./data/ac.json");
const lczData = require("./data/lcz.json");
export default {
name: 'AMapContainer',
inject: [
'adpScale'
],
name: "AMapContainer",
inject: ["adpScale"],
data() {
return {
size: null,
loading: true
}
loading: true,
};
},
computed: {
getReverseStyle() {
return {
transform: `scale(${1 / this.adpScale.scaleX}, ${1 / this.adpScale.scaleY})`,
}
}
transform: `scale(${1 / this.adpScale.scaleX}, ${
1 / this.adpScale.scaleY
})`,
};
},
},
async mounted() {
// console.log(this.$refs.mapContainerRef);
@ -32,18 +41,24 @@ export default {
if (!this.AMap) return;
onceObserver.call(this, this.$refs.mapContainerRef.parentElement, ({ width, height }) => this.size = {
onceObserver.call(
this,
this.$refs.mapContainerRef.parentElement,
({ width, height }) =>
(this.size = {
width: `${width}px`,
height: `${height + 24}px`,
});
})
);
this.aMapIns = new this.AMap.Map(this.$refs.mapContainerRef, {
resizeEnable: true, //是否监控地图容器尺寸变化
mapStyle: "amap://styles/blue",
zoom: 9,
center: [116.629514, 35.794168],
});
this.aMapIns.on('complete', () => {
this.aMapIns.on("complete", () => {
this.loading = false;
// var polyline1 = new this.AMap.Polyline({
@ -55,7 +70,54 @@ export default {
// bubble: true,
// })
// this.aMapIns.add([polyline1])
})
// this.initPolygon(this.AMap);
//各市边界线
let acPolylines = [];
for (let i = 0; i < acData.length; i++) {
let datas = [];
var poly = acData[i].polyline.split(";");
for (let j = 0; j < poly.length; j++) {
datas.push(poly[j].split(","));
}
let pl = drawingLine(this.AMap, datas);
acPolylines.push(pl);
// polyline.setMap(this.aMapIns)
}
this.aMapIns.add(acPolylines);
//济菏高速
let lczDatas = [];
for (let i = 0; i < lczData.length; i++) {
lczDatas.push([lczData[i].lng, lczData[i].lat]);
}
let jhgsPl = drawingLine(this.AMap, lczDatas, 3);
this.aMapIns.add(jhgsPl);
});
//画线
function drawingLine(AMap, datas, bWeight = 1, olColor = "#00B3CC") {
return new AMap.Polyline({
path: datas,
isOutline: true,
outlineColor: olColor,
borderWeight: bWeight,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 0,
// 折线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: "round",
lineCap: "round",
zIndex: 50,
});
}
// this.aMapIns.enableAutoResize();
},
@ -64,14 +126,14 @@ export default {
return {
AMap: this.AMap,
mapIns: this.aMapIns,
}
}
};
},
},
unmounted() {
if (!this.aMapIns) return;
this.aMapIns.destroyed();
},
}
};
</script>
<style lang='scss' scoped>
@ -82,7 +144,7 @@ export default {
height: 100%;
transform-origin: left top;
background-color: #103253 !important;
transition: all .15s linear;
transition: all 0.15s linear;
::v-deep {
.el-loading-mask {
@ -94,10 +156,9 @@ export default {
justify-content: center;
flex-direction: column;
.el-loading-text,
.el-icon-place {
color: #59D1FE;
color: #59d1fe;
font-size: 15px;
}
@ -111,7 +172,6 @@ export default {
}
@keyframes jump {
0%,
20%,
50%,

Write Preview
Loading…
Cancel
Save