|
|
@@ -0,0 +1,134 @@ |
|
|
|
<template> |
|
|
|
<div id="map"> |
|
|
|
<div class="tips"> |
|
|
|
<p>{{this.tips}}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import MapLoader from '@/config/map'; |
|
|
|
export default { |
|
|
|
name:'point-in-ring', |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
map: { |
|
|
|
instance: null, |
|
|
|
zoom: 13, |
|
|
|
center: [113.121586,23.021351], // |
|
|
|
marker: null, |
|
|
|
polygon: null, |
|
|
|
}, //创建地图参数 |
|
|
|
polyLnglAtList: [ |
|
|
|
[113.102037, 23.041415], |
|
|
|
[113.137954, 23.045997], |
|
|
|
[113.142029, 23.016554], |
|
|
|
[113.105961, 23.014332] |
|
|
|
], //绘制多边形围栏数据数组 |
|
|
|
|
|
|
|
isPointInRing: null, //是否在围栏内 |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
tips() { |
|
|
|
return this.isPointInRing ? '该点在围栏内' : '该点在围栏外'; |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getMap(); |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
setTimeout(() => { |
|
|
|
this.createPolygon(); |
|
|
|
this.createMarker(); |
|
|
|
this.computeMarker(); |
|
|
|
}, 2000) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// getMap 创建地图 |
|
|
|
getMap() { |
|
|
|
console.log("地图加载重"); |
|
|
|
const plugins = [ |
|
|
|
'AMap.Geocoder', |
|
|
|
'AMap.GraspRoad', |
|
|
|
'AMap.GeometryUtil', |
|
|
|
'AMap.CitySearch', |
|
|
|
'AMap.ToolBar', |
|
|
|
]; |
|
|
|
MapLoader(false, plugins).then( |
|
|
|
AMap => { |
|
|
|
// 地图实例 |
|
|
|
let that = this; |
|
|
|
that.map.instance = new AMap.Map('map', { |
|
|
|
center: that.map.center, |
|
|
|
resizeEnable: true, |
|
|
|
zoom: that.map.zoom, |
|
|
|
}); |
|
|
|
const toolBar = new AMap.ToolBar({ offset: new AMap.Pixel(10, 310), position: 'LT' }); |
|
|
|
this.map.instance.addControl(toolBar); |
|
|
|
}, |
|
|
|
e => { |
|
|
|
console.log("加载地图失败,下面是报错数据"); |
|
|
|
console.log(e); |
|
|
|
} |
|
|
|
) |
|
|
|
|
|
|
|
}, |
|
|
|
// 创建围栏 |
|
|
|
createPolygon() { |
|
|
|
this.map.polygon = new AMap.Polygon({ |
|
|
|
map: this.map.instance, |
|
|
|
fillOpacity: 0.1, |
|
|
|
path: this.polyLnglAtList |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 创建marker |
|
|
|
createMarker() { |
|
|
|
let content = ` |
|
|
|
<div class="marker_avatar"> |
|
|
|
<div class="avatar"> |
|
|
|
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div>`; |
|
|
|
let center = this.map.center; |
|
|
|
this.map.marker = new AMap.Marker({ |
|
|
|
position: center, |
|
|
|
draggable:true, |
|
|
|
|
|
|
|
}); |
|
|
|
// 注册拖拽事件 |
|
|
|
this.map.marker.on('dragging', this.computeMarker); |
|
|
|
this.map.instance.add(this.map.marker); |
|
|
|
this.map.instance.setCenter(center); |
|
|
|
}, |
|
|
|
// 拖拽marker |
|
|
|
computeMarker() { |
|
|
|
let point = this.map.marker.getPosition(); |
|
|
|
this.isPointInRing = AMap.GeometryUtil.isPointInRing(point, this.polyLnglAtList); |
|
|
|
console.log("是否在围栏内部::", this.isPointInRing ); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
#map { |
|
|
|
height:100%; |
|
|
|
width: 100%; |
|
|
|
z-index: 99; |
|
|
|
.tips { |
|
|
|
height: 80px; |
|
|
|
width: 150px; |
|
|
|
line-height: 80px; |
|
|
|
color: red; |
|
|
|
background: wheat; |
|
|
|
position: absolute; |
|
|
|
top: 20px; |
|
|
|
left: 20%; |
|
|
|
text-align: center; |
|
|
|
font-size: 16px; |
|
|
|
z-index: 9999; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |