xyxj
/
CPCenterData
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页地图

master
chenchen 6 months ago
parent
de07b2edec
commit
a3e098d21e
3 changed files with 130 additions and 170 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 92
      src/views/screen/components/gisMapOfCounty.vue
  2. 23
      src/views/screen/county-screen.vue
  3. 185
      src/views/screen/global-travel.vue

92
src/views/screen/components/gisMapOfCounty.vue
View File

@ -279,92 +279,86 @@ export default {
// 使用 require 加载 GeoJSON 文件 // 使用 require 加载 GeoJSON 文件
const geojsonData = require('@/assets/geojson/town_boundaries.geojson'); const geojsonData = require('@/assets/geojson/town_boundaries.geojson');
const colors = ['#33FFD450']; const colors = ['#33FFD450']; // 定义多边形边界颜色
// 提取所有边界坐标 // 遍历 GeoJSON 数据
const boundaries = geojsonData.features.map((feature) => {
const coordinates = feature.geometry.coordinates[0]; // 假设是 Polygon 类型
return coordinates[0].map((coord) => new AMap.LngLat(coord[0], coord[1])); // 转换为 AMap 坐标
});
// this.map.setMask(boundaries);
// 添加标签
geojsonData.features.forEach((feature, index) => { geojsonData.features.forEach((feature, index) => {
const { properties, geometry } = feature; const { properties, geometry } = feature;
const name = properties.name; // 获取乡镇名称 const name = properties.name; // 获取乡镇名称
const coordinates = geometry.coordinates[0]; // 获取多边形的坐标 const coordinates = geometry.coordinates[0]; // 获取多边形的坐标
const center = this.getPolygonCenter(coordinates); // 获取多边形的中心点 const center = this.getPolygonCenter(coordinates); // 计算多边形的中心点
console.log('多边形中心点:', center); console.log('多边形中心点:', center);
const path = coordinates[0].map((coord) => new AMap.LngLat(coord[0], coord[1]));
path.push(path[0]); // 闭合路径
// 创建多边形并设置样式 // 创建多边形并设置样式
const polygon = new AMap.Polygon({ const polygon = new AMap.Polygon({
zIndex: 100, zIndex: 100,
// path: coordinates[0].map((coord) => new AMap.LngLat(coord[0], coord[1])), // 转换为 AMap 坐标 path: coordinates[0].map((coord) => new AMap.LngLat(coord[0], coord[1])), // 转换为 AMap 坐标
path,
strokeColor: colors[index % colors.length], // 边界线颜色 strokeColor: colors[index % colors.length], // 边界线颜色
strokeWeight: 3, // 边界线宽度 strokeWeight: 2, // 边界线宽度
fillColor: '#0A7EA8', // 填充颜色 fillColor: '#0A7EA8', // 填充颜色
fillOpacity: 0.5, // 填充透明度 fillOpacity: 0.5, // 填充透明度
bubble: true, // 允许事件冒泡 bubble: true, // 允许事件冒泡
}); });
// 将多边形添加到地图 // 添加多边形到地图
polygon.setMap(this.map); polygon.setMap(this.map);
// 如果多边形有名称和中心点，则添加对应的 Marker
if (name && center) { if (name && center) {
const labelMarker = new AMap.Marker({ const labelMarker = new AMap.Marker({
position: center, position: center,
zIndex: 2000, zIndex: 2000,
clickable: true, clickable: true,
content: ` content: `
<div style=" <div style="
font-size: 16px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
width: max-content; width: max-content;
"> ">
${name} ${name}
</div> </div>
`, `,
offset: new AMap.Pixel(-25, -25), // 调整文本位置 offset: new AMap.Pixel(-25, -25), // 调整文本位置
}); });
// labelMarker的hover改变样式，高亮
// 添加 hover 高亮事件
labelMarker.on('mouseover', () => { labelMarker.on('mouseover', () => {
labelMarker.setContent(` labelMarker.setContent(`
<div style=" <div style="
font-size: 16px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #C6E1CA; color: #C6E1CA;
width: max-content; width: max-content;
"> ">
${name} ${name}
</div> </div>
`); `);
}); });
labelMarker.on('mouseout', () => { labelMarker.on('mouseout', () => {
labelMarker.setContent(` labelMarker.setContent(`
<div style=" <div style="
font-size: 16px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
width: max-content; width: max-content;
"> ">
${name} ${name}
</div> </div>
`); `);
}); });
// 使用 labelMarker.on 绑定事件
// 点击事件
labelMarker.on('click', () => { labelMarker.on('click', () => {
console.log('点击:', name); this.$emit('enterTown', name); // 触发事件
}); });
this.map.add(labelMarker);
labelMarker.setMap(this.map);
} }
}); });
}, },
// 添加点标记 // 添加点标记
addPoints() { addPoints() {
this.pointList.forEach((point) => { this.pointList.forEach((point) => {

23
src/views/screen/county-screen.vue
View File

@ -2,7 +2,19 @@
<!-- 县级大屏 --> <!-- 县级大屏 -->
<div class="eb-container" ref="appRef"> <div class="eb-container" ref="appRef">
<MainTitle class="title" :title="title" :show-menu="false"></MainTitle> <MainTitle class="title" :title="title" :show-menu="false"></MainTitle>
<div class="left"> <gis-map
ref="gisMapRef"
class="gismap"
pointType="全域旅游"
:point-list="dataList"
@currentPoint="currentPointFn"
@enterTown="enterTown"
:lngLat="lngLat"
list-item-key="name"
>
<template v-slot:content>
<div class="left">
<div class="min-title"> <div class="min-title">
<span>基本概况</span> <span>基本概况</span>
</div> </div>
@ -126,7 +138,9 @@
<!-- 各乡镇应急广播建设情况统计 --> <!-- 各乡镇应急广播建设情况统计 -->
<div class="emergency-broadcast" id="pieChart2"></div> <div class="emergency-broadcast" id="pieChart2"></div>
</div> </div>
<img class="map-center" :src="require('@/assets/map.png')" /> </template>
</gis-map>
<!-- <img class="map-center" :src="require('@/assets/map.png')" /> -->
<div class="page-bottom-bg"></div> <div class="page-bottom-bg"></div>
<div class="page-left-bg"></div> <div class="page-left-bg"></div>
<div class="page-right-bg"></div> <div class="page-right-bg"></div>
@ -242,6 +256,7 @@
<script> <script>
import { useIndex } from "../../utils/utilsDramAdmin"; import { useIndex } from "../../utils/utilsDramAdmin";
import MainTitle from "./components/MainTitle.vue"; import MainTitle from "./components/MainTitle.vue";
import gisMap from "./components/gisMapOfCounty.vue";
import ThreeView from "./components/three/three-view.vue"; import ThreeView from "./components/three/three-view.vue";
import Rotation3D from "@/utils/rotation3D"; import Rotation3D from "@/utils/rotation3D";
import vueSeamlessScroll from "vue-seamless-scroll"; import vueSeamlessScroll from "vue-seamless-scroll";
@ -259,6 +274,7 @@ export default {
Swiper, Swiper,
SwiperSlide, SwiperSlide,
CommonModal, CommonModal,
gisMap
}, },
data() { data() {
let self = this; let self = this;
@ -611,6 +627,9 @@ export default {
this.getTownMemu(); this.getTownMemu();
}, },
methods: { methods: {
enterTown(name) {
console.log(name);
},
toWarring(item) { toWarring(item) {
switch (this.currentType) { switch (this.currentType) {
case "person": case "person":

185
src/views/screen/global-travel.vue
View File

@ -2,32 +2,16 @@
<!-- 全域旅游 --> <!-- 全域旅游 -->
<div class="eb-container" ref="appRef"> <div class="eb-container" ref="appRef">
<MainTitle class="title" :title="title"></MainTitle> <MainTitle class="title" :title="title"></MainTitle>
<gis-map <gis-map ref="gisMapRef" class="gismap" pointType="全域旅游" :point-list="dataList" @currentPoint="currentPointFn"
ref="gisMapRef" :lngLat="lngLat" list-item-key="name">
class="gismap"
pointType="全域旅游"
:point-list="dataList"
@currentPoint="currentPointFn"
:lngLat="lngLat"
list-item-key="name"
>
<template v-slot:content> <template v-slot:content>
<div class="center-window"> <div class="center-window">
<div <div class="top-title" v-for="(item, index) in iconList" @click="changeType(item, index)">
class="top-title" <img :src="item.icon" />
v-for="(item, index) in iconList"
@click="changeType(item, index)"
>
<img :src="item.icon"/>
<div class="text"> <div class="text">
<p class="text-name">{{ item.label }}</p> <p class="text-name">{{ item.label }}</p>
<p class="text-type"> <p class="text-type">
<CountTo <CountTo :startVal="0" :endVal="item.count" :duration="2000" />
:startVal="0"
:endVal="item.count"
:duration="2000"
/>
</p> </p>
</div> </div>
</div> </div>
@ -38,16 +22,9 @@
</div> </div>
<div class="content-info"> <div class="content-info">
<div class="content-inof-list"> <div class="content-inof-list">
<div <div class="content-info-item" v-for="(item, index) in travleList" :key="index"
class="content-info-item" @click="selectTravelInfoById(item.id, item)">
v-for="(item, index) in travleList" <div class="content-info-item-title" style="font-size: 20px; color: #fff">
:key="index"
@click="selectTravelInfoById(item.id, item)"
>
<div
class="content-info-item-title"
style="font-size: 20px; color: #fff"
>
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
@ -61,77 +38,55 @@
<div class="content-info"> <div class="content-info">
<!-- title --> <!-- title -->
<div class="content-info-title"> <div class="content-info-title">
<span <span style="
style="
font-size: 24px; font-size: 24px;
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
" ">{{ detailInfo.name }}</span>
>{{ detailInfo.name }}</span
>
<span style="font-size: 18px; color: #c9c9c9">{{ <span style="font-size: 18px; color: #c9c9c9">{{
typeList[detailInfo.type] typeList[detailInfo.type]
}}</span> }}</span>
</div> </div>
<!-- content --> <!-- content -->
<div <div class="content-info-content" style="margin-top: 20px">
class="content-info-content" <span style="font-size: 24px; color: #fff">基础信息</span>
style="margin-top: 20px"
>
<span style="font-size: 24px; color: #fff"
>基础信息</span
>
<div style="margin-top: 10px" v-if="detailInfo.address"> <div style="margin-top: 10px" v-if="detailInfo.address">
<span style="font-size: 18px; color: #c9c9c9" <span style="font-size: 18px; color: #c9c9c9">地址:
>地址:
</span> </span>
<span style="font-size: 18px; color: #fff">{{ <span style="font-size: 18px; color: #fff">{{
detailInfo.address detailInfo.address
}}</span> }}</span>
</div> </div>
<!-- 工作时间 --> <!-- 工作时间 -->
<div style="margin-top: 10px" v-if="detailInfo.openHours"> <div style="margin-top: 10px" v-if="detailInfo.openHours">
<span style="font-size: 18px; color: #c9c9c9" <span style="font-size: 18px; color: #c9c9c9">工作时间:
>工作时间:
</span> </span>
<span style="font-size: 18px; color: #fff">{{ <span style="font-size: 18px; color: #fff">{{
detailInfo.openHours detailInfo.openHours
}}</span> }}</span>
</div> </div>
<!-- 简介 --> <!-- 简介 -->
<div style="margin-top: 10px" v-if="detailInfo.remark"> <div style="margin-top: 10px" v-if="detailInfo.remark">
<span style="font-size: 18px; color: #c9c9c9" <span style="font-size: 18px; color: #c9c9c9">简介:
>简介:
</span> </span>
<span style="font-size: 18px; color: #fff">{{ <span style="font-size: 18px; color: #fff">{{
detailInfo.remark detailInfo.remark
}}</span> }}</span>
</div> </div>
<!-- 图片 --> <!-- 图片 -->
<div style="margin-top: 10px" v-if="detailInfo.coverImage"> <div style="margin-top: 10px" v-if="detailInfo.coverImage">
<span style="font-size: 18px; color: #c9c9c9" <span style="font-size: 18px; color: #c9c9c9">图片:
>图片:
</span> </span>
<img <img :src="detailInfo.coverImage" alt="" style="width: 100%; height: 200px" />
:src="detailInfo.coverImage"
alt=""
style="width: 100%; height: 200px"
/>
</div> </div>
<div <div style="
style="
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
" ">
> <Button type="text" class="text-button" @click="
<Button openLineOrPlayAudio(detailInfo.type)
type="text" ">
class="text-button"
@click="
openLineOrPlayAudio(detailInfo.type)
"
>
{{ {{
detailInfo.type == 4 detailInfo.type == 4
? "播放音频" ? "播放音频"
@ -141,13 +96,8 @@
}} }}
</Button> </Button>
<!-- 音频播放 --> <!-- 音频播放 -->
<audio <audio ref="audioRef" class="audio-controls" v-if="detailInfo.type == 4"
ref="audioRef" :src="detailInfo.audioList" controls></audio>
class="audio-controls"
v-if="detailInfo.type == 4"
:src="detailInfo.audioList"
controls
></audio>
</div> </div>
</div> </div>
</div> </div>
@ -155,20 +105,13 @@
</template> </template>
</gis-map> </gis-map>
<div class="page-bottom-bg"></div> <div class="page-bottom-bg"></div>
<div class="page-left-bg"></div> <div class="page-left-bg"></div>
<div class="page-right-bg"></div> <div class="page-right-bg"></div>
<commonModal v-model="lineVisible" title="相关路线" width="600"> <commonModal v-model="lineVisible" title="相关路线" width="600">
<div class="line-box"> <div class="line-box">
<div <div class="line-item" v-for="(item, index) in lineList" @click="openLine(item)" :key="index">
class="line-item" <span class="line-title">线路名称：{{ item.lineName }}</span>
v-for="(item, index) in lineList"
@click="openLine(item)"
:key="index"
>
<span class="line-title"
>线路名称：{{ item.lineName }}</span
>
<div class="line-content"> <div class="line-content">
<span>线路途经：{{ item.lineText }}</span> <span>线路途经：{{ item.lineText }}</span>
</div> </div>
@ -179,14 +122,14 @@
</template> </template>
<script> <script>
import {useIndex} from "../../utils/utilsDramAdmin"; import { useIndex } from "../../utils/utilsDramAdmin";
import MainTitle from "./components/MainTitle.vue"; import MainTitle from "./components/MainTitle.vue";
import gisMap from "./components/gisMapOfCounty.vue"; import gisMap from "./components/gisMapOfCounty.vue";
import commonModal from "@/views/common-components/common-modal.vue"; import commonModal from "@/views/common-components/common-modal.vue";
export default { export default {
name: "GlobalTravel", name: "GlobalTravel",
components: {MainTitle, gisMap, commonModal}, components: { MainTitle, gisMap, commonModal },
data() { data() {
return { return {
title: "全域旅游", title: "全域旅游",
@ -235,14 +178,14 @@ export default {
type: "", type: "",
iconList: [ iconList: [
// 1、酒店 2、景区 3、饭店 4、讲解 5、服务区 6、设备设施 // 1、酒店 2、景区 3、饭店 4、讲解 5、服务区 6、设备设施
{icon: require("@/assets/mapIcon/jd.png"), label: "住宿", count: 0, type: "1"}, { icon: require("@/assets/mapIcon/jd.png"), label: "住宿", count: 0, type: "1" },
{icon: require("@/assets/mapIcon/jq.png"), label: "景点", count: 0, type: "2"}, { icon: require("@/assets/mapIcon/jq.png"), label: "景点", count: 0, type: "2" },
{icon: require("@/assets/mapIcon/fd.png"), label: "美食", count: 0, type: "3"}, { icon: require("@/assets/mapIcon/fd.png"), label: "美食", count: 0, type: "3" },
{icon: require("@/assets/mapIcon/jj.png"), label: "讲解", count: 0, type: "4"}, { icon: require("@/assets/mapIcon/jj.png"), label: "讲解", count: 0, type: "4" },
{icon: require("@/assets/mapIcon/sd.png"), label: "商店", count: 0, type: "5"}, { icon: require("@/assets/mapIcon/sd.png"), label: "商店", count: 0, type: "5" },
{icon: require("@/assets/mapIcon/wsj.png"), label: "卫生间", count: 0, type: "6"}, { icon: require("@/assets/mapIcon/wsj.png"), label: "卫生间", count: 0, type: "6" },
{icon: require("@/assets/mapIcon/fwq.png"), label: "停车场", count: 0, type: "7"}, { icon: require("@/assets/mapIcon/fwq.png"), label: "停车场", count: 0, type: "7" },
{icon: require("@/assets/mapIcon/ykzx.png"), label: "游客服务", count: 0, type: "8"}, { icon: require("@/assets/mapIcon/ykzx.png"), label: "游客服务", count: 0, type: "8" },
], ],
travleList: [], travleList: [],
detailInfo: {}, detailInfo: {},
@ -262,7 +205,7 @@ export default {
}, },
mounted() { mounted() {
const {calcRate, windowDraw} = useIndex(this.$refs.appRef); const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
calcRate(); calcRate();
windowDraw(); windowDraw();
this.$nextTick(() => { this.$nextTick(() => {
@ -277,7 +220,7 @@ export default {
this.$http this.$http
.post( .post(
"/travel/selectTravelLineById", "/travel/selectTravelLineById",
this.common.request({id}) this.common.request({ id })
) )
.then((res) => { .then((res) => {
if (res.data.code == 200 && res.data.data) { if (res.data.code == 200 && res.data.data) {
@ -334,12 +277,12 @@ export default {
this.driving.search( this.driving.search(
lngList[0], lngList[0],
lngList[lngLength - 1], lngList[lngLength - 1],
{waypoints: this.trimmedLngList}, { waypoints: this.trimmedLngList },
(status, result) => { (status, result) => {
console.log(status, "status"); console.log(status, "status");
if (status === "complete") { if (status === "complete") {
const {routes = []} = result; const { routes = [] } = result;
const {steps = []} = routes[0]; const { steps = [] } = routes[0];
const pathArr = []; const pathArr = [];
steps.map((i) => { steps.map((i) => {
pathArr.push(i.path); pathArr.push(i.path);
@ -445,7 +388,7 @@ export default {
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
this.assembleData(item.children); this.assembleData(item.children);
} else { } else {
let dataItem = {...item}; let dataItem = { ...item };
dataItem.lnglat = [item.lng, item.lat]; dataItem.lnglat = [item.lng, item.lat];
try { try {
dataItem.imageList = eval(dataItem.imageList); dataItem.imageList = eval(dataItem.imageList);
@ -488,7 +431,7 @@ export default {
this.$http this.$http
.post( .post(
"/travel/selectTravelInfoById", "/travel/selectTravelInfoById",
this.common.request({id}) this.common.request({ id })
) )
.then((res) => { .then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
@ -619,10 +562,11 @@ export default {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
&:hover { &:hover {
background-image: linear-gradient(90deg, background-image: linear-gradient(90deg,
#12181f 0%, #12181f 0%,
#293240 100%); #293240 100%);
} }
} }
} }
@ -666,8 +610,8 @@ export default {
height: 140px; height: 140px;
border-radius: 8px; border-radius: 8px;
background: linear-gradient(180deg, background: linear-gradient(180deg,
rgba(0, 125, 165, 0.24) 0%, rgba(0, 125, 165, 0.24) 0%,
rgba(1, 10, 43, 0) 100%); rgba(1, 10, 43, 0) 100%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -736,9 +680,12 @@ export default {
width: 80px; width: 80px;
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;
overflow: hidden; /*超出部分隐藏*/ overflow: hidden;
white-space: nowrap; /*禁止换行*/ /*超出部分隐藏*/
text-overflow: ellipsis; /*省略号*/ white-space: nowrap;
/*禁止换行*/
text-overflow: ellipsis;
/*省略号*/
} }
.text-type { .text-type {
@ -794,8 +741,8 @@ export default {
height: 140px; height: 140px;
border-radius: 8px; border-radius: 8px;
background: linear-gradient(180deg, background: linear-gradient(180deg,
rgba(0, 125, 165, 0.24) 0%, rgba(0, 125, 165, 0.24) 0%,
rgba(1, 10, 43, 0) 100%); rgba(1, 10, 43, 0) 100%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;

Write Preview
Loading…
Cancel
Save