| | |
|---|
| | | <div style="position: absolute;right:40%;top:-1%;z-index: 999999"> |
|---|
| | | <p style="margin-top: 10px" v-if="!isDetail"> |
|---|
| | | <el-button type="primary" size="small" @click="point()">绘制路线</el-button> |
|---|
| | | <el-button type="danger" size="small" @click="clearDraw()">重置</el-button> |
|---|
| | | <el-button size="small" @click="clearDraw()">重置</el-button> |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <!--画线后的提示--> |
|---|
| | |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'mapBox', |
|---|
| | | props:['routeRange','isDetail',"pointLonLat"], |
|---|
| | | props:['routeRange','isDetail'], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | map: null, |
|---|
| | |
|---|
| | | }) |
|---|
| | | _this.map.addLayer(_this.lineVector) |
|---|
| | | _this.map.addLayer(_this.pointVector) |
|---|
| | | _this.addLineDraw(_this.routeRange) |
|---|
| | | _this.addPoint(_this.pointLonLat) |
|---|
| | | //在地图上回显线或点 |
|---|
| | | _this.startAdd(_this.routeRange) |
|---|
| | | }, |
|---|
| | | // 绘画之后的样式 |
|---|
| | | styleFunction() { |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 添加点 |
|---|
| | | addPoint(pointLonLat){ |
|---|
| | | // pointLonLat = POINT(115.87531914674 28.8603307485585) |
|---|
| | | if (pointLonLat){ |
|---|
| | | let pointData = "" |
|---|
| | | let pointArray = [] |
|---|
| | | pointData = pointLonLat.match(/\(([^)]*)\)/); |
|---|
| | | pointArray = pointData[1].split(" ") |
|---|
| | | //设置点 |
|---|
| | | let feature_Point = new Feature({ |
|---|
| | | geometry: new Point([Number(pointLonLat.lon), Number(pointLonLat.lat)]) |
|---|
| | | geometry: new Point([Number(pointArray[0]), Number(pointArray[1])]) |
|---|
| | | }) |
|---|
| | | //点样式 |
|---|
| | | let style = new Style({ |
|---|
| | |
|---|
| | | }); |
|---|
| | | feature_Point.setStyle(style); |
|---|
| | | this.pointVector.getSource().addFeature(feature_Point); |
|---|
| | | let center = [Number(pointLonLat.lon), Number(pointLonLat.lat)]; |
|---|
| | | let center = [Number(pointArray[0]), Number(pointArray[1])]; |
|---|
| | | let view = this.map.getView(); |
|---|
| | | view.setZoom(16); |
|---|
| | | view.animate({ |
|---|
| | |
|---|
| | | _this.tipPosition.w = x + n; |
|---|
| | | _this.tipPosition.h = y + m; |
|---|
| | | }, |
|---|
| | | startAdd(routeRange){ |
|---|
| | | if (routeRange.startsWith("LINESTRING")){ |
|---|
| | | this.addLineDraw(routeRange) |
|---|
| | | }else { |
|---|
| | | this.addPoint(routeRange) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.createMap() |
|---|
