|
|
|
|
@ -1,20 +1,26 @@
|
|
|
|
|
<!--基地点坐标-->
|
|
|
|
|
<script setup>
|
|
|
|
|
import {ElAmap, useGeolocation ,lazyAMapApiLoaderInstance} from "@vuemap/vue-amap";
|
|
|
|
|
import {ElAmap, useGeolocation, lazyAMapApiLoaderInstance} from "@vuemap/vue-amap";
|
|
|
|
|
import BaseRightControl from "@/views/system/base/baseRightControl.vue";
|
|
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
const maxHeight = ref(window.innerHeight - 100);
|
|
|
|
|
const zoom = ref(13);
|
|
|
|
|
const center = ref([
|
|
|
|
|
116.338461,
|
|
|
|
|
39.97947
|
|
|
|
|
107.5856025,
|
|
|
|
|
22.484856
|
|
|
|
|
]);
|
|
|
|
|
const baseList = ref([
|
|
|
|
|
{
|
|
|
|
|
baseId:1,
|
|
|
|
|
position:[116.338461, 39.97947],
|
|
|
|
|
label:'测试',
|
|
|
|
|
}
|
|
|
|
|
baseId: 1,
|
|
|
|
|
position: [116.338461, 39.97947],
|
|
|
|
|
label: '测试',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
baseId: 2,
|
|
|
|
|
position: [107.5856025, 22.484856],
|
|
|
|
|
label: '金光农场（广西农垦育种基地）',
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
const control = reactive({
|
|
|
|
|
// 地图类型
|
|
|
|
|
@ -39,7 +45,7 @@ const control = reactive({
|
|
|
|
|
const clickBase = ref(null)
|
|
|
|
|
const clickMarker = (value) => {
|
|
|
|
|
clickBase.value = value
|
|
|
|
|
router.push({path:'/system/base/massifMap/'+value.baseId})
|
|
|
|
|
router.push({path: '/system/base/massifMap/' + value.baseId})
|
|
|
|
|
console.log(value);
|
|
|
|
|
}
|
|
|
|
|
onBeforeMount(() => {
|
|
|
|
|
@ -75,19 +81,19 @@ const selectPoi = ({poi}) => {
|
|
|
|
|
:features="control.showPoi?['bg','point','road','building']:['bg']"
|
|
|
|
|
>
|
|
|
|
|
<!--卫星云图-->
|
|
|
|
|
<el-amap-layer-satellite :visible="true" />
|
|
|
|
|
<el-amap-layer-satellite :visible="true"/>
|
|
|
|
|
<!--定位控件-->
|
|
|
|
|
<el-amap-control-geolocation :visible="false"/>
|
|
|
|
|
<!--地图缩放控件-->
|
|
|
|
|
<el-amap-control-tool-bar :visible="true" />
|
|
|
|
|
<el-amap-control-tool-bar :visible="true"/>
|
|
|
|
|
<!--比例尺-->
|
|
|
|
|
<el-amap-control-scale :visible="true" />
|
|
|
|
|
<el-amap-control-scale :visible="true"/>
|
|
|
|
|
<!--灵活点标记-->
|
|
|
|
|
<el-amap-marker
|
|
|
|
|
v-for="item in baseList"
|
|
|
|
|
:position="item.position"
|
|
|
|
|
:title="item.label"
|
|
|
|
|
:label="{content:item.label,offset:[5,0]}"
|
|
|
|
|
:label="{content:item.label,offset:[0,0]}"
|
|
|
|
|
:visible="true"
|
|
|
|
|
:draggable="false"
|
|
|
|
|
@click="clickMarker(item)"
|
|
|
|
|
@ -108,22 +114,24 @@ const selectPoi = ({poi}) => {
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.top-block{
|
|
|
|
|
.top-block {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
pointer-events:none;//值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
|
|
|
|
|
.operate{
|
|
|
|
|
pointer-events: none; //值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
|
|
|
|
|
.operate {
|
|
|
|
|
//该控件可以点击
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.local-icon{
|
|
|
|
|
|
|
|
|
|
.local-icon {
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
}
|
|
|
|
|
:deep(.amap-marker-label){
|
|
|
|
|
|
|
|
|
|
:deep(.amap-marker-label) {
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
|
