|
|
<template>
|
|
|
<div class="container">
|
|
|
<!-- 顶部操作栏 -->
|
|
|
|
|
|
<!-- 内容区域 -->
|
|
|
<div class="main-content">
|
|
|
|
|
|
<!-- 右侧地图缩略图 -->
|
|
|
<div class="map-thumbnail">
|
|
|
<div id="mars2dContainerSSS" class="mars2d-container"></div>
|
|
|
<div class="classify">
|
|
|
位置
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import 'mars2d/mars2d.css';
|
|
|
import * as mars2d from 'mars2d';
|
|
|
|
|
|
export default {
|
|
|
components: {},
|
|
|
data() {
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
return {
|
|
|
configUrl: basePathUrl + "config/config.json",
|
|
|
mapOptions: {
|
|
|
// 配置文档：http://mars2d.cn/apidoc.html#Map
|
|
|
copyright: false, // 不显示厂商logo
|
|
|
basemaps: [
|
|
|
{
|
|
|
"id": 2021,
|
|
|
"pid": 10,
|
|
|
"name": "高德电子",
|
|
|
"icon": "img/basemaps/gaode_vec.png",
|
|
|
"type": "gaode",
|
|
|
"layer": "vec",
|
|
|
"show": true
|
|
|
},
|
|
|
],
|
|
|
center: { lat: 31.2704, lng: 120.7600 }, // 中心点
|
|
|
zoom: 16, // 设置地图缩放级别
|
|
|
minZoom: 15, // 最小缩放级别
|
|
|
maxZoom: 20, // 最大缩放级别
|
|
|
zoomControl: true,
|
|
|
},
|
|
|
map: null, // 地图实例
|
|
|
markerIcon: require('@/assets/images/detailsicon/icon-定位@2x.png'), // 使用 require 引入图片
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
// 初始化地图
|
|
|
initMap() {
|
|
|
this.map = new mars2d.Map('mars2dContainerSSS', this.mapOptions);
|
|
|
this.map.on('load', this.onload);
|
|
|
},
|
|
|
// 地图加载完成后的回调
|
|
|
onload() {
|
|
|
this.addTestMarker();
|
|
|
},
|
|
|
// 设置WGS84坐标参照物(辨识是否纠偏)
|
|
|
addTestMarker() {
|
|
|
const graphic = new mars2d.graphic.Marker({
|
|
|
latlng: [31.835299, 120.216588],
|
|
|
style: {
|
|
|
image: this.markerIcon, // 使用引入的图片路径
|
|
|
width: 32,
|
|
|
height: 44,
|
|
|
horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
|
|
|
verticalOrigin: mars2d.VerticalOrigin.BOTTOM
|
|
|
},
|
|
|
attr: { remark: "示例1" }
|
|
|
});
|
|
|
this.map.graphicLayer.addGraphic(graphic);
|
|
|
|
|
|
graphic.bindPopup("<p>我是WGS84坐标下，望江西路与怀宁路交口</p>").openPopup();
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.initMap();
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
if (this.map) {
|
|
|
this.map.destroy();
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
width: 100%;
|
|
|
background-color: #FFFFFF;
|
|
|
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
|
|
|
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
|
|
|
gap: 1rem;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
.main-content {
|
|
|
display: flex;
|
|
|
gap: 2rem;
|
|
|
padding: 1rem;
|
|
|
}
|
|
|
|
|
|
.map-thumbnail {
|
|
|
width: 76rem;
|
|
|
height: 25rem;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.mars2d-container {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.classify {
|
|
|
width: 2.81rem;
|
|
|
height: 1.38rem;
|
|
|
background-color: rgba(43, 98, 241, 0.8);
|
|
|
border-radius: 0.69rem 0.69rem 0.69rem 0.69rem;
|
|
|
color: white;
|
|
|
position: absolute;
|
|
|
bottom: .5rem;
|
|
|
left: .5rem;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
font-size: .7rem;
|
|
|
z-index: 999;
|
|
|
}
|
|
|
</style> |
