|
|
@@ -15,6 +15,14 @@ import * as proj from "ol/proj";
|
|
|
import proj4 from "proj4";
|
|
|
import { register } from "ol/proj/proj4";
|
|
|
import {DragPan, MouseWheelZoom} from "ol/interaction";
|
|
|
+let mapData = reactive({
|
|
|
+ isEdit: false,
|
|
|
+ isEditArea: false,
|
|
|
+ curPointData: {},
|
|
|
+ point: null,
|
|
|
+ selectPointArr: [],
|
|
|
+ isPointHide: false,
|
|
|
+});
|
|
|
proj4.defs(
|
|
|
"EPSG:38572",
|
|
|
"+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs"
|
|
|
@@ -29,6 +37,45 @@ class PdfMap {
|
|
|
let that = this;
|
|
|
let vectorStyle = new KMap.VectorStyle();
|
|
|
this.vectorStyle = vectorStyle;
|
|
|
+ // 位置图标
|
|
|
+ this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
|
|
|
+ style: (f) => {
|
|
|
+ const style1 = new Style({
|
|
|
+ image: new Icon({
|
|
|
+ src: require(`@/assets/images/map/${f.get("icon")}-icon.png`),
|
|
|
+ scale: 0.45,
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ const style2 = new Style({
|
|
|
+ text: new Text({
|
|
|
+ font: "16px sans-serif",
|
|
|
+ text: f.get("masterName"),
|
|
|
+ offsetY: -40,
|
|
|
+ padding: [4, 3, 2, 106],
|
|
|
+ fill: new Fill({ color: "#fff" }), // 字体颜色
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ const style3 = new Style({
|
|
|
+ image: new Icon({
|
|
|
+ src: require(`@/assets/images/map/${f.get("iconBg")}.png`),
|
|
|
+ scale: 0.45,
|
|
|
+ displacement: [0, 90],
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ return [style1, style2, style3];
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ this.locationLayer = new KMap.VectorLayer("locationLayer", 9999, {
|
|
|
+ style: () => {
|
|
|
+ return new Style({
|
|
|
+ image: new Icon({
|
|
|
+ src: require("@/assets/images/map/location.png"),
|
|
|
+ scale: 0.45,
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
initMap(data, target) {
|
|
|
@@ -43,36 +90,44 @@ class PdfMap {
|
|
|
6,
|
|
|
22
|
|
|
);
|
|
|
- this.kmap.setLayerWkt(data.geom,true)
|
|
|
- this.lock(false)
|
|
|
+ this.addPoint(data)
|
|
|
+ this.kmap.setLayerWkt(data.geom, data, true, [50, 50, 50, 50] )
|
|
|
+ this.kmap.addLayer(this.clickPointLayer.layer);
|
|
|
+ this.kmap.addLayer(this.locationLayer.layer);
|
|
|
+ this.getSelectPointArr(data.id)
|
|
|
}
|
|
|
- lock(lockval) {
|
|
|
- let pan;
|
|
|
- let mousezoom;
|
|
|
- this.kmap.map.getInteractions().forEach(function (element) {
|
|
|
- if (element instanceof DragPan)//获取 控制能否使用鼠标，手指拖动地图的对象
|
|
|
- pan = element;
|
|
|
- if(element instanceof MouseWheelZoom)//获取 控制能否使用滚轮滚动放大缩小地图的对象
|
|
|
- mousezoom = element;
|
|
|
- if (pan) {
|
|
|
- if (lockval) {
|
|
|
- pan.setActive(true);//此对象的setActive方法用来设置是否可以拖动滚动查看
|
|
|
- }
|
|
|
- else {
|
|
|
- pan.setActive(false);
|
|
|
- }
|
|
|
+
|
|
|
+ getSelectPointArr(id) {
|
|
|
+ const arr = [];
|
|
|
+ this.clickPointLayer.source.forEachFeature((feature) => {
|
|
|
+ if (feature.get("id") === id) {
|
|
|
+ // 修改当前点位高亮
|
|
|
+ feature.set("icon", "point");
|
|
|
+ feature.set("iconBg", "name-act-bg");
|
|
|
+ mapData.point = feature;
|
|
|
+ mapData.curPointData = feature.values_;
|
|
|
}
|
|
|
- if (mousezoom) {
|
|
|
- if (lockval) {
|
|
|
- mousezoom.setActive(true);
|
|
|
- }
|
|
|
- else {
|
|
|
- mousezoom.setActive(false);
|
|
|
- }
|
|
|
+ arr.push(feature);
|
|
|
+ });
|
|
|
+ const points = this.kmap.getLayerFeatures();
|
|
|
+ points.forEach((feature) => {
|
|
|
+ if (feature.get("id") === id) {
|
|
|
+ feature.set("icon", "point-act");
|
|
|
+ this.kmap.polygonStyle(feature);
|
|
|
+ mapData.isPointHide = feature;
|
|
|
}
|
|
|
});
|
|
|
+ mapData.selectPointArr = arr;
|
|
|
}
|
|
|
|
|
|
+ // 添加点位
|
|
|
+ addPoint(point) {
|
|
|
+ const arrPoints = [];
|
|
|
+ arrPoints.push(
|
|
|
+ newPoint({ ...point, icon: "point", iconBg: "name-bg" }, "point")
|
|
|
+ );
|
|
|
+ this.clickPointLayer.source.addFeatures(arrPoints);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
export default PdfMap;
|
wangsisi