Vue地图应用实践
本文介绍了一个基于Vue框架的地图应用程序的设计与实现过程，重点讲解如何利用OpenLayers进行地图数据的动态交互，包括路线规划与标记点的添加等功能。
便利贴--11{OpenLayers,vue项目2，添加地图的路径和标点数据---ok第二版}
动态验证，加动态地图显示，
视频
1642387412188
同样的，也是基于之前那个地图来的
—getMapDataInThere.vue页面
<template>
<div class="getMapData" :key="Refresh">
<MapInThere ref="getMapDataRefs" />
<div class="controlMapWindow">
<div class="controlMapWindowTitle">
<el-button-group>
<el-button
type="primary"
icon="el-icon-finished"
@click="openDrawLineMethod"
:disabled="fromView"
>新增路线</el-button
>
<el-button
type="primary"
@click="openDrawPointMethod"
icon="el-icon-coordinate"
:disabled="fromView"
>新增标点</el-button
>
</el-button-group>
</div>
<div class="controlMapWindowmain">
<transition-group
:name="animateName"
:enter-active-class="animateEnter"
:leave-active-class="animateLeave"
>
<div
class="getMapData__once"
v-for="(item, index) in ourDatas"
:key="index"
>
<div class="getMapData_once_label">
<el-tag> {{ item.label }}</el-tag>
</div>
<el-input
:class="[
'getMapData_once_name',
item.notPath == 2 ? 'notPath' : '',
]"
@blur="myRules(index)"
v-model="item.name"
placeholder="请输入路径名称"
:disabled="fromView"
></el-input>
<transition
:name="animateNames"
:enter-active-class="animateEnters"
:leave-active-class="animateLeaves"
>
<div class="notPathTitile" v-show="item.notPath == 2">
请输入名称或选择路径
</div>
</transition>
<el-button
class="getMapData_once_get"
:type="item.value ? 'success' : 'primary'"
:title="item.value ? '重新选择' : '点击选择'"
:icon="item.isLine ? 'el-icon-finished' : 'el-icon-add-location'"
@click="openMap(item.label, index, item.value)"
:disabled="MapDataShow || fromView"
></el-button>
<el-button
class="getMapData_once_endBut"
icon="el-icon-delete"
circle
@click="deleteRowOurs(index)"
:disabled="MapDataShow || fromView"
></el-button>
</div>
</transition-group>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import MapInThere from "@/components/map/mainInThere.vue";
export default {
name: "getMapData",
components: {
MapInThere,
},
computed: {
...mapGetters(["rotesData", "pointData"]),
},
watch: {
ourDatas: {
handler(val) {
// console.log("深度监听：", val);
this.checkDom("getMapDataRefs", (dom) => {
dom.onceOnlodad(val);
});
},
deep: true,
},
},
data() {
return {
Refresh: false,
// routers: [
// {
// label: "路径1",
// value: "",
// routerName: "",
// notPath: true,
// },
// ],
// potions: [
// {
// label: "标点1",
// value: "",
// potionName: "",
// notPath: true,
// },
// ],
//动画效果
animateName: "custom-classes-transition",
animateEnter: "animated fadeIn",
animateLeave: "animated fadeOut",
//未输入动画效果
animateName: "custom-classes-transition",
animateEnter: "animated fadeInDown",
animateLeave: "animated fadeOut",
openTitle: "路径1",
MapDataShow: false,
fromView: false,
ourDatas: [
// {
// label: "路径2",
// value:
// "LINESTRING(114.03870329193403 27.630853600622704,114.03979921475035 27.628518808535755,114.04046629820375 27.629042945534867,114.04041864938566 27.628971472307715);LINESTRING(114.0392325389847 27.631412806376527,114.03958275318838 27.630799931520087,114.0393492770526 27.630391348282462,114.03993296739206 27.629778473426025,114.04019562804483 27.629982765044836)",
// name: "xxx2",
// notPath: false,
// isLine: true,
// id: 2,
// },
// {
// label: "路径3",
// value:
// "LINESTRING(114.03902048124041 27.631126394329247,114.03985626036528 27.6309025249208,114.03997565738312 27.630215992068223,114.03887123496811 27.630111519677616,114.03903540586764 27.6294548360795,114.04046817008171 27.6294548360795,114.04078158725353 27.629022021889835,114.0396174663296 27.628574283072936,114.03996073275589 27.628245941273878,114.04105023054368 27.628589207700166,114.04105023054368 27.628589207700166)",
// name: "xxx3",
// notPath: false,
// isLine: true,
// id: 3,
// },
// {
// label: "标点4",
// value: [114.03887343706977, 27.63000553765213],
// name: "喜迎校庆选点1",
// notPath: false,
// isLine: false,
// id: 4,
// },
],
nowId: 0,
};
},
mounted() {
// this.$emit("setMapData", [this.routers, this.potions]);
let that = this;
if (that.ourDatas.length != 0) {
for (let k in that.ourDatas) {
that.ourDatas[k].id = +k + 1;
}
}
this.checkDom("getMapDataRefs", (dom) => {
dom.onceOnlodad(that.ourDatas);
});
this.nowId = +this.ourDatas.length + 1;
},
methods: {
openDrawLineMethod() {
let id = this.nowId++;
this.ourDatas.push({
label: "路径" + +id,
value: "",
name: "",
notPath: false,
isLine: true,
id: +id,
});
},
openDrawPointMethod() {
let id = this.nowId++;
this.ourDatas.push({
label: "标点" + +id,
value: "",
name: "",
notPath: false,
isLine: false,
id: +id,
});
},
deleteRowOurs(index) {
this.ourDatas.splice(index, 1);
},
backMapDataOurData(val, index) {
if (val == "line") {
this.ourDatas[index].value = this.rotesData;
} else if (val == "point") {
this.ourDatas[index].value = this.pointData;
} else if (val == "notData") {
this.ourDatas[index].value = "";
}
//单个验证
this.myRules(index);
},
//以上是添加数据集方法
//选择map数据
openMap(val, num, value) {
this.MapDataShow = true;
this.openTitle = val;
this.$refs.getMapDataRefs.init(val, num, value);
},
closeOpenedMap() {
this.MapDataShow = false;
// this.openTitle = "";
},
//下面是旧代码
editInit(val) {
//查看情况逆转String成为当页可使用数据,并做动作
this.reverseMapData(val);
},
viewInit(val) {
//查看情况逆转String成为当页可使用数据,并做动作
this.reverseMapData(val);
this.fromView = true; //查看数据不可改
},
reverseMapData(val, label) {
//解释数据
let rname = val[0][0].split(";"),
r = val[0][1].split(";"),
pname = val[1][0].split(";"),
p = val[1][1].split(";");
this.ourDatas = [];
for (let k in r) {
this.ourDatas.push({
label: "路径" + (+k + 1),
value: r[k],
name: rname[k],
notPath: false,
isLine: true,
id: this.ourDatas.length,
});
}
for (let k in p) {
let potion = p[k].split(",");
this.ourDatas.push({
label: "标点" + (+k + 1),
value: [+potion[0], +potion[1]],
name: pname[k],
notPath: false,
isLine: false,
id: this.ourDatas.length,
});
}
this.nowId = +this.ourDatas.length + 1;
},
myRules(index) {
//单个验证
if (this.ourDatas[index].name && this.ourDatas[index].value) {
this.ourDatas[index].notPath = false;
} else {
this.ourDatas[index].notPath = 2;
}
},
//自定义验证
myRulesUse() {
//把一个数组拆开两个来对应之前的数据
let ourData = this.ourDatas;
let lineBefor = [];
let pointBefor = [];
for (let o in ourData) {
if (ourData[o].isLine) {
lineBefor.push(ourData[o]);
} else {
pointBefor.push(ourData[o]);
}
}
let line = this.changeMapData(lineBefor, "name");
let point = this.changeMapData(pointBefor, "name");
console.log(line, point);
if (line[0] == "namenot" || point[0] == "namenot") {
//需要显示验证失败合集
let errorId = [];
if (line[0] == "namenot") {
errorId.push(...line[1]);
}
if (point[0] == "namenot") {
errorId.push(...point[1]);
}
console.log(errorId, "errorId");
for (let x in this.ourDatas) {
console.log(this.ourDatas[x], "x");
let flog = true;
for (let k in errorId) {
if (errorId[k] == this.ourDatas[x].id) {
flog = false;
}
}
if (flog) {
this.ourDatas[x].notPath = false;
} else {
this.ourDatas[x].notPath = 2;
}
}
return false;
} else {
// console.log("通过");
for (let i in this.ourDatas) {
this.ourDatas[i].notPath = false;
}
return [line, point];
}
},
//规则
changeMapData(item, names) {
let name = "",
value = "",
notData = [];
let itemLength = item.length - 1;
// console.log(item, names, 7777);
for (let k in item) {
let inItem = item[k];
for (let kin in inItem) {
if (
inItem[kin] == "" &&
kin != "notPath" &&
kin != "isLine" &&
kin != "id"
) {
console.log(kin);
notData.push(inItem.id);
break;
}
if (kin == names) {
name += inItem[kin];
if (k != itemLength) {
name += ";";
}
}
if (kin == "value") {
value += inItem[kin];
if (k != itemLength) {
value += ";";
}
}
}
}
return notData.length > 0 ? [names + "not", notData] : [name, value];
},
checkDom(name, fn) {
// 声明定时器
let that = this;
var timer = null;
// 检查dom是否执行完成
function checkDom() {
let dom = that.$refs[name];
if (dom) {
// 执行dom加载完成后的操作
// 清除定时器
if (!timer) {
clearTimeout(timer);
}
if (fn) {
//回调函数
fn(dom);
return;
} else {
return dom;
}
} else {
// 自我调用
timer = setTimeout(checkDom, 100);
}
}
// 首次执行
checkDom();
},
},
};
</script>
<style lang="scss">
.flexCenter {
display: flex;
align-items: center;
justify-content: center;
}
.getMapData {
width: 100%;
height: 100%;
position: relative;
.controlMapWindow {
width: 320px;
height: calc(100% - 20px);
// border: 1px solid red;
// box-shadow: 2px 0 15px 2px #acacac;
position: absolute;
left: 10px;
top: 10px;
background-color: #fff;
border-radius: 0 15px 15px 0;
padding: 10px 10px;
overflow: hidden;
.controlMapWindowTitle {
height: 40px;
width: 100%;
margin-bottom: 5px;
@extend .flexCenter;
}
.controlMapWindowmain {
width: 100%;
height: calc(100% - 45px);
overflow-x: hidden;
overflow-y: scroll;
.getMapData_left {
width: 50%;
height: 40px;
box-sizing: border-box;
}
.getMapData_right {
width: 50%;
height: 40px;
box-sizing: border-box;
}
.getMapData__once {
width: 100%;
height: 40px;
margin-bottom: 10px;
position: relative;
@extend .flexCenter;
flex-direction: row;
.getMapData_once_label {
padding-left: 15px;
width: 90px;
height: 100%;
@extend .flexCenter;
justify-content: space-around;
}
.getMapData_once_name {
width: calc(100% - 130px);
}
.getMapData_once_get {
padding: 6px 16px;
font-size: 20px;
}
.notPathTitile {
position: absolute;
left: 90px;
bottom: -20px;
color: red;
font-size: 1px;
}
}
}
}
// 验证
.notPath {
// border-bottom: 0.5px solid red;
}
}
//过度动画
.list-enter {
opacity: 0;
transform: translateY(10px);
}
.list-leave-to {
opacity: 0;
transform: translateY(-10px);
}
.list-enter-to,
.list-leave {
opacity: 1;
}
.list-enter-active,
.list-leave-active {
transition: all 0.3s;
}
</style>
上面的那个只是引用地图框架，（原谅我说这么简单的vue页面是框架），改的不多，主要是和地图数据的动态交互，wacth监听，
··mainInThere.vue页面
<template>
<div id="map">
<div class="controlMap">
<el-button-group v-if="false">
<el-button
type="primary"
icon="el-icon-finished"
@click="openDrawLineMethod"
:class="[
'openDrawsb',
openDrawChiose == 'openDrawLine' ? 'activeDraw' : '',
]"
>规划路线</el-button
>
<el-button
type="primary"
@click="openDrawPointMethod"
icon="el-icon-coordinate"
:class="[
'openDrawsb',
openDrawChiose == 'openDrawPoint' ? 'activeDraw' : '',
]"
>规划标点</el-button
>
</el-button-group>
<div id="openTitle" style="display: none">当前选择：{{ openTitle }}</div>
<el-button-group id="openDrawLine" style="display: none">
<el-button
type="primary"
icon="el-icon-edit"
@click="getTypeSelected"
:disabled="beginDraw"
>{{ butTitle }}</el-button
>
<el-button type="primary" @click="stopDrawOur" icon="el-icon-delete"
>取消</el-button
>
</el-button-group>
<el-button-group id="openDrawPoint" style="display: none">
<el-button
type="primary"
icon="el-icon-edit"
@click="getTypeSelectedPoint"
:disabled="beginDraw"
>{{ butTitlePoint }}</el-button
>
<el-button type="primary" @click="stopDrawOur" icon="el-icon-delete"
>取消</el-button
>
</el-button-group>
</div>
<el-button-group id="dataConfirm" style="display: none">
<el-button
type="success"
icon="el-icon-check"
@click="useMapData"
v-show="notNow"
>确定选择</el-button
>
<el-button
type="danger"
@click="clearUseMapData"
icon="el-icon-refresh-right"
>清空</el-button
>
</el-button-group>
<tip v-show="showTip" :title="tipTitle" :position="position"></tip>
</div>
</template>
<script>
import OLCesium from "olcs/OLCesium.js";
import "ol/ol.css";
import OlView from "ol/View.js";
import XYZ from "ol/source/XYZ";
import OlLayerTile from "ol/layer/Tile.js";
import OlMap from "ol/Map.js";
import tip from "./tip.vue";
import {
// eslint-disable-next-line no-unused-vars
defaults as OlControlDefaults,
defaults,
// 全屏控件
FullScreen,
// 比例尺控件
ScaleLine,
// 缩放滚动条控件
// eslint-disable-next-line no-unused-vars
ZoomSlider,
// 鼠标位置控件
// eslint-disable-next-line no-unused-vars
MousePosition,
// -地图属性控件
Attribution,
// 鹰眼控件
// eslint-disable-next-line no-unused-vars
OverviewMap,
// 缩放到范围控件
// eslint-disable-next-line no-unused-vars
ZoomToExtent,
Rotate,
} from "ol/control.js";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { OSM, TileWMS, Vector } from "ol/source";
// import Draw from "ol/interaction/Draw";
import Draw from "./Draw";
import Feature from "ol/Feature.js";
import Point from "ol/geom/Point.js";
import LineString from "ol/geom/LineString.js";
import { Icon, Style, Fill, Stroke } from "ol/style.js";
// import drawFence from "./drawFence";
import OlFeature from "ol/Feature";
import OlGeomPoint from "ol/geom/Point";
// import OlLayerVector from "ol/layer/Vector";
// import OlSourceVector from "ol/source/Vector";
import OlStyleStyle from "ol/style/Style";
import OlStyleIcon from "ol/style/Icon";
// // 用来添加相关文字描述的
import OlStyleText from "ol/style/Text";
import OlStyleFill from "ol/style/Fill";
// import Cesium from "libs/Cesium/Cesium.js";
export default {
name: "MapInThere",
components: {
tip,
},
data() {
return {
gunAddlayer: new VectorLayer({
// 图标图层
zIndex: 22,
source: new VectorSource(),
}),
peopleAddlayer: new VectorLayer({
// 图标图层
zIndex: 22,
source: new VectorSource(),
}),
carAddlayer: new VectorLayer({
// 图标图层
zIndex: 22,
source: new VectorSource(),
}),
// peopleLineAddlayer: new VectorLayer({
// // 图标图层
// zIndex: 22,
// source: new VectorSource(),
// }),
beginsPoint: new VectorLayer({
// 图标图层
zIndex: 22,
source: new VectorSource(),
}),
DrawLayer: new VectorLayer({
// 图标图层
// zIndex: 1000,
source: new VectorSource(),
}),
peopleLineAddlayer: null,
// 存储新增点，线，面，数据的地方
// polygonData: [],
// polygonFlag: false,
// editToolbar: null,
// addPolygonEntitys: null,
typeSelected: "LineString",
// drawLayer: null,
draw: null,
coordinates: [],
coordinatesStr: "",
beginDraw: false,
butTitle: "开始绘画",
view: "",
// map: null,
showTip: false,
tipTitle: "",
position: {
w: 200,
h: 10,
},
// openDrawChiose: "", //openDrawPoint openDrawLine
openDrawLine: false,
openDrawPoint: false,
butTitlePoint: "选择标点",
olLayer: null, //点图层
nowIndex: "", //返回第几个
fromView: false, //若是查看 不显示更改按钮
openTitle: "", //当前选择
ourDatas: [], //所有数据
ourLayer: {}, //图层合集
notNow: true, //如果修改，不显示确认按钮
};
},
computed: {
openDrawChiose() {
// console.log(
// "this.openDrawLine:",
// this.openDrawLine,
// "this.openDrawPoint:",
// this.openDrawPoint
// );
if (this.openDrawLine) {
return "openDrawLine";
} else if (this.openDrawPoint) {
return "openDrawPoint";
} else {
return "notBut---";
}
},
},
// watch: {
// openDrawChiose() {
// console.log(this.openDrawChiose, "openDrawChiose");
// },
// },
mounted() {
const ol2d = new OlMap({
layers: [
// new OlLayerTile({
// zIndex: 4,
// title: "影像",
// source: new XYZ({
// url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
// }),
// }),
// new OlLayerTile({
// zIndex: 5,
// title: "道路+中文注记",
// source: new XYZ({
// url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
// }),
// }),
new OlLayerTile({
zIndex: 4,
title: "矢量",
source: new XYZ({
url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
// url: "/localData/sl/{z}/{x}/{y}.png",
tileUrlFunction: function (tileCoord) {
var z = tileCoord[0];
var x = tileCoord[1];
var y = Math.pow(2, z) + tileCoord[2];
return "../assets/sl/" + z + "/" + x + "/" + y + ".png";
},
}),
}),
new OlLayerTile({
zIndex: 5,
title: "中文注记",
source: new XYZ({
url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
}),
}),
],
// 注意地图控件的写法
controls: defaults().extend([
// new FullScreen(),
// new ScaleLine(),
// new MousePosition(),
// new Rotate(),
// new Attribution()
]),
target: "map",
view: new OlView({
center: [0, 0],
zoom: 2,
projection: "EPSG:4326",
}),
});
window.ol2d = ol2d;
var view = ol2d.getView();
// let provider = new Cesium.UrlTemplateImageryProvider({
// url: "/wp/{z}/{x}/{y}.png",
// fileExtension: "png",
// });
// view.imageryLayers.addImageryProvider(provider);
// view.setCenter([115.85883507433789, 28.708432053474827])
view.setCenter([114.03858862, 27.63088262]);
//
view.setZoom(18);
this.view = view;
const ol3d = new OLCesium({ map: window.ol2d });
window.ol3d = ol3d;
// ol2d.addLayer(this.gunAddlayer);
// ol2d.addLayer(this.peopleAddlayer);
// ol2d.addLayer(this.carAddlayer);
// ol2d.addLayer(this.peopleLineAddlayer);
// ol2d.addLayer(this.beginsPoint);
},
methods: {
clearUseMapData() {
if (this.openDrawPoint) {
this.$store.commit("setPointData", ""); //用vuex清空最终数据
} else if (this.openDrawLine) {
this.$store.commit("setRotesData", ""); //用vuex清空最终数据
}
this.useMapData();
},
onceOnlodad(ourDatas) {
this.ourDatas = ourDatas;
this.Renders(ourDatas);
},
//加载底层路线和图标
Renders(ourDatas) {
// for (let i in ourDatas) {
// console.log(ourDatas[i].value, "------", i);
// }
this.deleteElement();
for (let k in ourDatas) {
if (ourDatas[k].isLine) {
if (!ourDatas[k].value) {
// this.deleteElement("line", ourDatas[k].id);
} else {
this.addLines(ourDatas[k], "line");
}
} else {
if (!ourDatas[k].value) {
// this.deleteElement("point", ourDatas[k].id);
} else {
this.addPoint(ourDatas[k], "point");
}
}
}
this.drawLayerRoom(); //重置绘画层
},
// 若没有value数据，删除地图上的元素
deleteElement(name, id) {
// console.log(name, id);
// this.ourLayer[name + id].getSource().clear();
for (let k in this.ourLayer) {
this.ourLayer[k].getSource().clear();
}
},
//加载点
addPoint(data, name) {
//创建图层
let layer = new VectorLayer({
zIndex: 22,
source: new VectorSource(),
}),
iconFeature = new OlFeature({
geometry: new OlGeomPoint(data.value), //绘制图形（点）
}),
iconFeatureTitle = new OlFeature({
geometry: new OlGeomPoint(data.value), //绘制图形（点）
}),
that = this;
iconFeature.setStyle(
new OlStyleStyle({
image: new OlStyleIcon({
scale: 0.5,
offset: [0, 5],
offsetOrigin: "bottom",
src: "img/dingwei/dingwei5.png",
}),
})
);
iconFeatureTitle.setStyle(
new OlStyleStyle({
text: new OlStyleText({
text: data.name,
font: "14px sans-serif", // CSS 字体设置
scale: 1, //比例
offsetY: -40,
fill: new OlStyleFill({
color: "#1296DB",
}),
}),
})
);
layer.getSource().addFeature(iconFeature);
layer.getSource().addFeature(iconFeatureTitle);
//保存图层
this.ourLayer[name + data.id] = layer;
ol2d.addLayer(that.ourLayer[name + data.id]);
// console.log(this.ourLayer, 77777);
},
addLines(data, name) {
//创建图层
let layer = new VectorLayer({
zIndex: 22,
source: new VectorSource(),
}),
that = this;
//绘画线路
var entityData = "";
var entityArr = [];
entityData = data.value.match(/\(([^)]*)\)/);
if (entityData && entityData != "") {
entityData = entityData[1].split(",");
for (var j = 0; j < entityData.length; j++) {
entityArr.push([
Number(entityData[j].split(" ")[0]),
Number(entityData[j].split(" ")[1]),
]);
}
}
var lineCoords = entityArr; // 线里点的集合
// console.log(lineCoords);
var feature_LineString = new Feature({
//线面板
geometry: new LineString(lineCoords),
});
feature_LineString.setStyle(
//线样式
new Style({
//填充色
fill: new Fill({
color: "rgba(255, 255, 255, 0.2)",
}),
//边线颜色
stroke: new Stroke({
color: "rgb(18,150,219)",
width: 5,
}),
})
);
//线名称
let lineFeatureTitle = new OlFeature({
geometry: new OlGeomPoint(lineCoords[0]), //绘制图形（点）
});
lineFeatureTitle.setStyle(
new OlStyleStyle({
text: new OlStyleText({
text: data.name,
font: "14px sans-serif", // CSS 字体设置
scale: 1, //比例
offsetY: -10,
fill: new OlStyleFill({
color: "#1296DB",
}),
}),
})
);
layer.getSource().addFeature(lineFeatureTitle);
layer.getSource().addFeature(feature_LineString);
//保存图层
this.ourLayer[name + data.id] = layer;
ol2d.addLayer(that.ourLayer[name + data.id]);
// console.log(this.ourLayer, 88888);
},
//上面是初始化·················
//下面是选择点或线路开始按钮
init(val, num, value) {
this.openTitle = val;
if (value) {
this.notNow = false;
} else {
this.notNow = true;
}
this.nowIndex = num;
if (val.indexOf("路径") != -1) {
// console.log("加载路径按钮");
this.controlBut("openDrawLine", this.notNow);
} else {
// console.log("加载标点按钮");
this.controlBut("openDrawPoint", this.notNow);
}
},
controlBut(openName, notNow) {
this.closeOurBut();
this[openName] = true;
$("#" + openName).show();
$("#openTitle").show();
if (!notNow) {
$("#dataConfirm").show(100);
}
},
closeOurBut(open) {
$("#dataConfirm").hide();
$("#openDrawPoint").hide();
$("#openDrawLine").hide();
$("#openTitle").hide();
this.openDrawLine = false;
this.openDrawPoint = false;
if (open) {
this.openTitle = "";
this.$parent.closeOpenedMap(); //开放按钮
}
},
//取消按钮
stopDrawOur() {
this.closeOurBut(true);
},
//确认数据
useMapData() {
//返回用数据
// console.log(this.openDrawChiose, this.nowIndex);
this.$parent.MapDataShow = false;
let val;
if (this.openDrawChiose == "openDrawLine") {
val = "line";
} else if (this.openDrawChiose == "openDrawPoint") {
val = "point";
} else {
val = "notData";
}
this.$parent.backMapDataOurData(val, this.nowIndex);
// 返回后关闭操作按钮
this.closeOurBut();
//清除绘画图层
this.drawLayerRoom();
},
//提示位置
setTipPosition(x, y, n, m) {
this.position.w = x + n;
this.position.h = y + m;
},
//实时添加最上图层，为了编辑或新建路径能在最上
drawLayerRoom() {
let that = this;
//添加绘画图层--为了在最上层--所以每次绘画要重新添加图层
if (that.peopleLineAddlayer) {
that.peopleLineAddlayer.getSource().clear();
that.peopleLineAddlayer = null;
that.peopleLineAddlayer = new VectorLayer({
zIndex: 22,
source: new VectorSource(),
});
} else {
that.peopleLineAddlayer = new VectorLayer({
zIndex: 22,
source: new VectorSource(),
});
}
ol2d.addLayer(this.peopleLineAddlayer);
},
//选择绘画路线------↓
getTypeSelected() {
let that = this;
this.beginDraw = true;
this.draw && ol2d.removeInteraction(this.draw);
//再根据typeSelect的值绘制新的Interaction
this.drawLayerRoom(); //重置绘画层
this.addInteraction();
},
addInteraction() {
let value = this.typeSelected,
that = this;
this.tipTitle = "单击左键或右键开始绘画";
$("#map") //提示器
.off("mousemove")
.mousemove(function (e) {
if (!that.showTip) {
that.showTip = true;
}
that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
});
this.coordinates = [];
if (value !== "None") {
this.draw = new Draw({
source: this.DrawLayer.getSource(),
type: this.typeSelected,
style: new Style({
stroke: new Stroke({
color: "red",
width: 3,
}),
}),
coordinate: function (res) {
//画线中的点
that.coordinates.push(res.coordinate_);
that.tipTitle = "可继续，或选择最终位置双击结束";
},
coordinateOver: function (res) {
// 结束绘画 处理数据
let d = that.doData(that.coordinates);
that.addLinesDraw(d);
that.$store.commit("setRotesData", d); //用vuex传最终数据
},
});
ol2d.addInteraction(this.draw);
}
},
//处理数据
doData(val) {
let str = "LINESTRING(";
for (let k = 0; k < val.length; k++) {
str += `${val[k][0]} ${val[k][1]}`;
if (k != val.length - 1) {
str += ",";
}
}
str += ")";
return str;
},
addLinesDraw(val) {
var that = this;
var entityData = "";
var entityArr = [];
entityData = val.match(/\(([^)]*)\)/);
// 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
if (entityData && entityData != "") {
entityData = entityData[1].split(",");
for (var j = 0; j < entityData.length; j++) {
entityArr.push([
Number(entityData[j].split(" ")[0]),
Number(entityData[j].split(" ")[1]),
]);
}
}
var lineCoords = entityArr; // 线里点的集合
//移动位置---暂不需要
// var view = ol2d.getView();
// view.setCenter([
// lineCoords[Math.ceil(entityArr.length / 2)][0],
// lineCoords[Math.ceil(entityArr.length / 2)][1],
// ]);
// view.setZoom(14.5);
// 要素
var feature_LineString = new Feature({
geometry: new LineString(lineCoords),
});
feature_LineString.setStyle(
new Style({
//填充色
fill: new Fill({
color: "rgba(255, 255, 255, 0.2)",
}),
//边线颜色
stroke: new Stroke({
color: "red",
width: 5,
}),
})
);
that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
that.butTitle = "重新绘画";
if (!this.fromView) {
$("#dataConfirm").show(100);
}
if (that.draw != null) {
that.beginDraw = false;
that.draw.controlDrawing(true);
that.tipTitle = "已结束绘画，点击重新绘画清除上次内容并开始绘画";
$("#map").unbind("mousemove");
// setTimeout(() => {
this.tipTitle = "";
this.showTip = false;
}
},
//绘画路线------↑
//绘画点-------↓
getTypeSelectedPoint() {
this.tipTitle = "单击左键选择位置";
let that = this;
let isHaveOne = false;
this.drawLayerRoom(); //重置绘画层
$("#map")
.off("mousemove")
.mousemove(function (e) {
if (!that.showTip) {
that.showTip = true;
}
that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
});
if (this.typeSelected !== "None") {
this.draw = new Draw({
source: this.DrawLayer.getSource(),
type: this.typeSelected,
style: new Style({
stroke: new Stroke({
color: "red",
width: 3,
}),
}),
isPoint: true,
coordinate: function (res) {},
coordinateOverPoint: function (res) {
if (isHaveOne) {
return;
}
that.$store.commit("setPointData", res.coordinate); //用vuex传最终数据
that.addIconMarker(res.coordinate);
isHaveOne = true;
},
});
ol2d.addInteraction(this.draw);
}
},
addIconMarker(intlat) {
let that = this;
let iconFeature = new OlFeature({
geometry: new OlGeomPoint(intlat), //绘制图形（点）
});
iconFeature.setStyle(
new OlStyleStyle({
image: new OlStyleIcon({
scale: 0.5,
offset: [0, 5],
offsetOrigin: "bottom",
//透明度
opacity: 1,
//图片路径
src: "img/dingwei/dingwei6.png",
}),
})
);
that.peopleLineAddlayer.getSource().addFeature(iconFeature);
this.butTitlePoint = "重新标点";
if (!this.fromView) {
$("#dataConfirm").show(100);
}
if (this.draw != null) {
this.draw.controlDrawing(true);
$("#map").unbind("mousemove");
this.tipTitle = "";
this.showTip = false;
}
},
//绘制点------↑
},
};
</script>
<style scoped lang="scss">
#map {
position: relative;
width: 100%;
height: 100%;
.controlMap {
position: absolute;
top: 10px;
// left: calc(50% - 97px);
left: 390px;
z-index: 2 !important;
#openTitle {
background-color: #fff;
border-radius: 5px;
}
#openDrawLine,
#openDrawPoiton {
width: 174px;
// position: relative;
// top: 43px;
// top: 10px;
// left: calc(50% - 96px);
// left: 20px;
}
.openDrawsb {
background-color: #fff;
color: black;
}
.activeDraw {
background-color: #409eff;
color: #fff;
}
}
#dataConfirm {
position: absolute;
top: 43px;
// left: calc(50% + 82px);
left: 564px;
z-index: 3 !important;
}
}
</style>
扫一扫
3964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
