| | |
|---|
| | | <template> |
|---|
| | | <GlobalWindow title="绘制地图停车区域" :visible.sync="isShowModal" :confirm-working="isWorking" @confirm="confirm" |
|---|
| | | width="1000px"> |
|---|
| | | <div class="map_title">站点名称 停车区域绘制</div> |
|---|
| | | <div id="mapContainer" style="width: 100%; height: calc( 100% - 40px )"></div> |
|---|
| | | <GlobalWindow title="绘制停车区域" :visible.sync="isShowModal" :confirm-working="isWorking" @close="close" |
|---|
| | | @confirm="confirm" width="1000px"> |
|---|
| | | <div class="map_title">绘制：鼠标左键点击及移动即可绘制图形，绘制过程中按下esc键可中断该过程</div> |
|---|
| | | <div class="map_title">鼠标左键双击即可结束当前多边形绘制，多边形会自动闭合；</div> |
|---|
| | | <div class="map_wrap"> |
|---|
| | | <div class="btns"> |
|---|
| | | <el-button plain type="primary" @click="changeMode">结束绘制</el-button> |
|---|
| | | <el-button plain type="primary" @click="handleAgain">继续绘制</el-button> |
|---|
| | | <el-button plain @click="reset">重新绘制</el-button> |
|---|
| | | <el-button plain type="danger" @click="deleteObj">删除</el-button> |
|---|
| | | </div> |
|---|
| | | <div id="container" style="width: 100%; height: 100%"></div> |
|---|
| | | </div> |
|---|
| | | </GlobalWindow> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
|---|
| | | var map // 地图 |
|---|
| | | // var editor // 编辑器 |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | GlobalWindow |
|---|
| | |
|---|
| | | return { |
|---|
| | | isShowModal: false, |
|---|
| | | isWorking: false, |
|---|
| | | |
|---|
| | | map: null, |
|---|
| | | editor: null, |
|---|
| | | polygon: null, |
|---|
| | | polygons: [], // 存储所有绘制的多边形 |
|---|
| | | selectedPolygon: null, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.initMap() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | initMap() { |
|---|
| | | this.map = new TMap.Map(document.getElementById("mapContainer"), { |
|---|
| | | zoom: 14, // 设置地图缩放级别 |
|---|
| | | center: new TMap.LatLng(30.656964, 104.066186), // 设置地图中心点坐标 |
|---|
| | | map = new TMap.Map("container", { |
|---|
| | | zoom: 15, // 设置地图缩放级别 |
|---|
| | | center: new TMap.LatLng(31.722763, 117.385480) // 设置地图中心点坐标 |
|---|
| | | }) |
|---|
| | | var polygon = new TMap.MultiPolygon({ |
|---|
| | | map: this.map, |
|---|
| | | this.polygon = new TMap.MultiPolygon({ |
|---|
| | | map: map, |
|---|
| | | id: 'polygon', |
|---|
| | | selectedStyleId: 'highlight', |
|---|
| | | styles: { |
|---|
| | | highlight: new TMap.PolygonStyle({ |
|---|
| | | color: 'rgba(255, 255, 0, 0.6)' |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | this.editor = new TMap.tools.GeometryEditor({ |
|---|
| | | // TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor |
|---|
| | | map: this.map, // 编辑器绑定的地图对象 |
|---|
| | | overlayList: [ |
|---|
| | | // 可编辑图层 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4 |
|---|
| | | { |
|---|
| | | overlay: polygon, |
|---|
| | | id: "polygon", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | map, |
|---|
| | | overlayList: [{ |
|---|
| | | overlay: this.polygon, |
|---|
| | | id: 'polygon', |
|---|
| | | }], |
|---|
| | | actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式 |
|---|
| | | activeOverlayId: this.activeId, // 激活图层 |
|---|
| | | activeOverlayId: 'polygon', // 激活图层 |
|---|
| | | snappable: true, // 开启吸附 |
|---|
| | | selectable: true, |
|---|
| | | }) |
|---|
| | | // 监听绘制结束事件，获取绘制几何图形 |
|---|
| | | this.editor.on("draw_complete", (geometry) => { |
|---|
| | | console.log('所有顶点坐标集合', geometry) |
|---|
| | | // 多边形处理 |
|---|
| | | if (this.activeId === "polygon") { |
|---|
| | | console.log("得到顶点经纬度的数组", geometry.paths) |
|---|
| | | |
|---|
| | | let evtList = ['delete', 'adjust', 'split', 'union'] |
|---|
| | | evtList.forEach(evtName => { |
|---|
| | | this.editor.on(evtName + '_complete', evtResult => { |
|---|
| | | // console.log(evtName, evtResult) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | this.editor.on('draw_complete', (geometry) => { |
|---|
| | | var id = geometry.id |
|---|
| | | if (this.editor.getActiveOverlay().id === 'polygon') { |
|---|
| | | var geo = this.polygon.geometries.filter(function (item) { |
|---|
| | | return item.id === id |
|---|
| | | }) |
|---|
| | | // console.log('绘制的多边形坐标：', geo[0].paths) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | confirm() { } |
|---|
| | | handleAgain() { |
|---|
| | | this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW) |
|---|
| | | }, |
|---|
| | | reset() { |
|---|
| | | // this.editor.enable() |
|---|
| | | this.polygon.setGeometries([]) |
|---|
| | | this.polygon.remove('polygon') |
|---|
| | | this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW) |
|---|
| | | }, |
|---|
| | | changeMode() { |
|---|
| | | this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT) |
|---|
| | | }, |
|---|
| | | deleteObj() { |
|---|
| | | this.editor.delete() |
|---|
| | | }, |
|---|
| | | close() { |
|---|
| | | editor = null |
|---|
| | | }, |
|---|
| | | confirm() { |
|---|
| | | this.changeMode() |
|---|
| | | const list = this.editor.getOverlayList()[0].overlay.geometries |
|---|
| | | console.log('list', list); |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .map_title { |
|---|
| | | font-size: 16px; |
|---|
| | | font-size: 14px; |
|---|
| | | font-weight: 500; |
|---|
| | | margin-bottom: 10px; |
|---|
| | | margin-bottom: 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #mapContainer { |
|---|
| | | .map_wrap { |
|---|
| | | width: 100%; |
|---|
| | | height: calc( 100% - 60px ); |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .btns { |
|---|
| | | position: absolute; |
|---|
| | | left: 50%; |
|---|
| | | top: 10px; |
|---|
| | | transform: translate(-50%, 0); |
|---|
| | | z-index: 99999999999; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
