html
复制代码
<template>
<div class="app-container">
<div id="container"></div>
</div>
</template>
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
/*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,
因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,
否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
import { shallowRef } from '@vue/reactivity';
import { ref, reactive} from "vue";
import geojsonData from '../assets/huzhou_division'
const allMap = shallowRef(null);
function initMap() {
window._AMapSecurityConfig = {
securityJsCode: '',
}
AMapLoader.load({
key: "", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ["AMap.GeoJSON"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap) => {
const map = new AMap.Map("container", { //设置地图容器id
viewMode: "2D", //是否为3D地图模式
zoom: 10, //初始化地图级别
center: [119.898881, 30.594178], //初始化地图中心点位置
mapStyle: 'amap://styles/',
});
allMap.value = map
//围栏
const geoJson = new AMap.GeoJSON({
// GeoJSON对象
geoJSON: geojsonData,
// 还可以自定义getMarker和getPolyline
getPolygon: function (geojson, lnglats) {
return new AMap.Polygon({
path: lnglats,
strokeColor: 'rgba(230, 230, 254, 0.5)',
fillColor: '#0E465A',
strokeWeight: 2,
strokeColor: '#2FD7D7',
// 设置虚线
strokeStyle: 'dashed'
})
},
})
map.add(geoJson)
// 点位信息
const markerdata = reactive([[119.898881, 30.794178], [119.998881, 30.794178], [119.798881, 30.794178], [119.698881, 30.794178], [120.098881, 30.794178]])
// 适用于少数点
markerdata.forEach(element => {
// 创建 AMap.Icon 实例:
const icon = new AMap.Icon({
size: new AMap.Size(50, 60), // 图标尺寸
// vue3/vite 需要用特定的本地图片引入方式,不可require引入
image: new URL('../assets/images/压力表.png', import.meta.url).href, // Icon的图像
// imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量,适于雪碧图等
imageSize: new AMap.Size(50, 60), // 根据所设置的大小拉伸或压缩图片
imageOffset: new AMap.Pixel(0, 0)
});
// 创建一个 Marker 实例:
const marker = new AMap.Marker({
position: new AMap.LngLat(element[0], element[1]), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
// title: 'hhhhhh',
icon: icon
});
marker.content = proxy.$refs.dialog
// 将创建的点标记添加到已有的地图实例:
map.add(marker);
});
}).catch(e => {
console.log(e);
})
}
initMap()
</script>
<style lang="scss" scoped>
.app-container {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#container {
padding: 0px;
margin: 0px;
width: 1920px;
height: 1080px;
}
</style>