From cc1c0a396698648256c350f6f0fe2cb2f0b02c7e Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Wed, 27 Mar 2024 15:44:10 +0800
Subject: [PATCH] 许可按钮放出，备案审批按钮放出
---
src/components/map/main.vue | 361 ++++++++++++++++++++++++++-------------------------
1 files changed, 185 insertions(+), 176 deletions(-)
diff --git a/src/components/map/main.vue b/src/components/map/main.vue
index 100dcd0..420ec71 100644
--- a/src/components/map/main.vue
+++ b/src/components/map/main.vue
@@ -11,11 +11,11 @@
style="height: 100%"></div>
</template>
<script>
-import 'ol/ol.css'
-import OlView from 'ol/View.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 OlLayerTile from "ol/layer/Tile.js";
+import OlMap from "ol/Map.js";
import {
// eslint-disable-next-line no-unused-vars
@@ -39,170 +39,176 @@
// 缩放到范围控件
// eslint-disable-next-line no-unused-vars
ZoomToExtent,
- Rotate
+ Rotate,
+} from "ol/control.js";
-} from 'ol/control.js'
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import WMTS from "ol/source/WMTS";
-import VectorLayer from 'ol/layer/Vector'
-import VectorSource from 'ol/source/Vector'
-import WMTS from 'ol/source/WMTS'
+import WMTSTileGrid from "ol/tilegrid/WMTS";
-import WMTSTileGrid from 'ol/tilegrid/WMTS'
+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 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 { getWidth, getTopLeft } from "ol/extent";
-import { getWidth, getTopLeft } from 'ol/extent'
-
-import { get as getProjection } from 'ol/proj'
+import { get as getProjection } from "ol/proj";
import XYZ from "ol/source/XYZ";
-import start from '@/assets/img/start.png'
+import start from "@/assets/img/start.png";
export default {
- name: 'Map',
+ name: "Map",
data () {
return {
- gunAddlayer: new VectorLayer({ // 图标图层
+ gunAddlayer: new VectorLayer({
+ // 图标图层
zIndex: 22,
- source: new VectorSource()
+ source: new VectorSource(),
}),
- peopleAddlayer: new VectorLayer({ // 图标图层
+ peopleAddlayer: new VectorLayer({
+ // 图标图层
zIndex: 22,
- source: new VectorSource()
+ source: new VectorSource(),
}),
- carAddlayer: new VectorLayer({ // 图标图层
+ carAddlayer: new VectorLayer({
+ // 图标图层
zIndex: 22,
- source: new VectorSource()
+ source: new VectorSource(),
}),
- peopleLineAddlayer: new VectorLayer({ // 图标图层
+ peopleLineAddlayer: new VectorLayer({
+ // 图标图层
zIndex: 22,
- source: new VectorSource()
+ source: new VectorSource(),
}),
- startPoint: new VectorLayer({ // 图标图层
+ startPoint: new VectorLayer({
+ // 图标图层
zIndex: 22,
- source: new VectorSource()
+ source: new VectorSource(),
}),
ol2d: null,
- }
+ };
},
mounted () {
- // 本地开发使用
- this.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=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
- // })
- // })
- ],
-
- // 注意地图控件的写法
- controls: defaults().extend([
- new FullScreen(),
- new ScaleLine(),
- new MousePosition(),
- new Rotate(),
- new Attribution()
- ]),
- target: 'track_map',
- view: new OlView({
- center: [0, 0],
- zoom: 2,
- projection: 'EPSG:4326'
- })
- })
-
- // var projection = getProjection("EPSG:4326");
- // var projectionExtent = projection.getExtent();
- // var size = getWidth(projectionExtent) / 256;
- // var resolutions = [];
- // for (var z = 2; z < 19; ++z) {//计算比例尺
- // resolutions[z] = size / Math.pow(2, z);
- // }
-
- // // 正式服务器上使用
- // this.ol2d = new OlMap({
- // layers: [
- // new OlLayerTile({//矢量地图
-
- // source: new WMTS({
- // url: "http://47.49.21.207:7001/PGIS_S_TileMapServer/Maps/YX",
- // layer: "JX14YGJCIMGL7_L14",
- // style: "default",
- // matrixSet: "JX14YGJCIMGL7_L14",
- // format: "image/png",
- // wrapX: true,
- // tileGrid: new WMTSTileGrid({
- // origin: getTopLeft(projectionExtent),
- // //resolutions: res.slice(0, 15),
- // resolutions: resolutions,
- // matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
- // })
- // }),
-
- // })
- // ],
-
- // // 注意地图控件的写法
- // controls: defaults().extend([
- // new FullScreen(),
- // new ScaleLine(),
- // // new MousePosition(),
- // new Rotate(),
- // new Attribution()
- // ]),
- // target: 'track_map',
- // view: new OlView({
- // center: [115.85883507433789, 28.708432053474827],
- // projection: projection,
- // zoom: 11,
- // maxZoom: 15,
- // minZoom: 1
-
- // })
- // })
+ //建立地图
+ this.createmap(2); //1为本地
this.parentParameter();
- window.ol2d = this.ol2d
+ window.ol2d = this.ol2d;
- var view = this.ol2d.getView()
+ var view = this.ol2d.getView();
- view.setCenter([115.85883507433789, 28.708432053474827])
+ view.setCenter([115.85883507433789, 28.708432053474827]);
- view.setZoom(13)
+ view.setZoom(13);
-
- this.ol2d.addLayer(this.gunAddlayer)
- this.ol2d.addLayer(this.peopleAddlayer)
- this.ol2d.addLayer(this.carAddlayer)
- this.ol2d.addLayer(this.peopleLineAddlayer)
- this.ol2d.addLayer(this.startPoint)
-
+ this.ol2d.addLayer(this.gunAddlayer);
+ this.ol2d.addLayer(this.peopleAddlayer);
+ this.ol2d.addLayer(this.carAddlayer);
+ this.ol2d.addLayer(this.peopleLineAddlayer);
+ this.ol2d.addLayer(this.startPoint);
},
methods: {
+ createmap (val) {
+ if (val == 1) {
+ // 本地开发使用;
+ this.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=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
+ // })
+ // })
+ ],
+ // 注意地图控件的写法
+ controls: defaults().extend([
+ new FullScreen(),
+ new ScaleLine(),
+ new MousePosition(),
+ new Rotate(),
+ new Attribution(),
+ ]),
+ target: "track_map",
+ view: new OlView({
+ center: [0, 0],
+ zoom: 2,
+ projection: "EPSG:4326",
+ }),
+ });
+ } else {
+ var projection = getProjection("EPSG:4326");
+ var projectionExtent = projection.getExtent();
+ var size = getWidth(projectionExtent) / 256;
+ var resolutions = [];
+ for (var z = 2; z < 19; ++z) {
+ //计算比例尺
+ resolutions[z] = size / Math.pow(2, z);
+ }
+ // 正式服务器上使用
+ this.ol2d = new OlMap({
+ layers: [
+ new OlLayerTile({
+ //矢量地图
+
+ source: new WMTS({
+ url: "http://47.49.21.207:7001/PGIS_S_TileMapServer/Maps/YX",
+ layer: "JX14YGJCIMGL7_L14",
+ style: "default",
+ matrixSet: "JX14YGJCIMGL7_L14",
+ format: "image/png",
+ wrapX: true,
+ tileGrid: new WMTSTileGrid({
+ origin: getTopLeft(projectionExtent),
+ //resolutions: res.slice(0, 15),
+ resolutions: resolutions,
+ matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
+ }),
+ }),
+ }),
+ ],
+
+ // 注意地图控件的写法
+ controls: defaults().extend([
+ new FullScreen(),
+ new ScaleLine(),
+ // new MousePosition(),
+ new Rotate(),
+ new Attribution(),
+ ]),
+ target: "track_map",
+ view: new OlView({
+ center: [115.85883507433789, 28.708432053474827],
+ projection: projection,
+ zoom: 11,
+ maxZoom: 15,
+ minZoom: 1,
+ }),
+ });
+ }
+ },
addEntitys (item, icon, scale, name, type) {
- this[type].getSource().clear()
+ this[type].getSource().clear();
const iconFeature = new Feature({
geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
name: name,
- attributes: item
- })
+ attributes: item,
+ });
const iconStyle = new Style({
// text: new Text({ // 字体, 未成功, 浪费许多时间
@@ -214,9 +220,9 @@
image: new Icon({
scale: scale,
opacity: 1,
- src: icon
+ src: icon,
// src: require('../../assets/Mark.png')
- })
+ }),
// new CircleStyle({ // 普通样式
// radius: 6,
@@ -228,53 +234,57 @@
// width: 0.3,
// })
// }),
- })
+ });
- iconFeature.setStyle(iconStyle)
+ iconFeature.setStyle(iconStyle);
- this[type].getSource().addFeature(iconFeature)
+ this[type].getSource().addFeature(iconFeature);
- this.flyTo(Number(item.LGTD), Number(item.LTTD), 18)
+ this.flyTo(Number(item.LGTD), Number(item.LTTD), 13);
},
addLines (arr) {
- this.addEntity(arr[0][0], arr[0][1])
- this.peopleLineAddlayer.getSource().clear()
+ this.addEntity(arr[0][0], arr[0][1]);
+ this.peopleLineAddlayer.getSource().clear();
// 点坐标
- var lineCoords = arr;// 线里点的集合
+ var lineCoords = arr; // 线里点的集合
// 要素
// var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
var feature_LineString = new Feature({
- geometry: new LineString(lineCoords)
+ geometry: new LineString(lineCoords),
});
-
- feature_LineString.setStyle(new Style({
- //填充色
- fill: new Fill({
- color: 'rgba(255, 255, 255, 0.2)'
- }),
- //边线颜色
- stroke: new Stroke({
- color: 'rgb(252, 94, 32)',
- width: 5
+ feature_LineString.setStyle(
+ new Style({
+ //填充色
+ fill: new Fill({
+ color: "rgba(255, 255, 255, 0.2)",
+ }),
+ //边线颜色
+ stroke: new Stroke({
+ color: "rgb(252, 94, 32)",
+ width: 5,
+ }),
})
- }))
+ );
+ this.peopleLineAddlayer.getSource().addFeature(feature_LineString);
- this.peopleLineAddlayer.getSource().addFeature(feature_LineString)
-
- this.flyTo(arr[Math.ceil(arr.length / 2)][0], arr[Math.ceil(arr.length / 2)][1], 15)
+ this.flyTo(
+ arr[Math.ceil(arr.length / 2)][0],
+ arr[Math.ceil(arr.length / 2)][1],
+ 13
+ );
},
addEntity (LGTD, LTTD) {
- this.startPoint.getSource().clear()
+ this.startPoint.getSource().clear();
const iconFeature = new Feature({
geometry: new Point([LGTD, LTTD]),
- name: '起始点',
- })
+ name: "起始点",
+ });
const iconStyle = new Style({
// text: new Text({ // 字体, 未成功, 浪费许多时间
@@ -284,16 +294,16 @@
// }),
image: new Icon({
- anchor: [0.5, 170], //锚点
- anchorOrigin: 'top-left', //锚点源
- anchorXUnits: 'fraction', //锚点X值单位
- anchorYUnits: 'pixels', //锚点Y值单位
- offsetOrigin: 'top-left',
+ anchor: [0.5, 170], //锚点
+ anchorOrigin: "top-left", //锚点源
+ anchorXUnits: "fraction", //锚点X值单位
+ anchorYUnits: "pixels", //锚点Y值单位
+ offsetOrigin: "top-left",
scale: 0.2,
opacity: 1,
- src: start
+ src: start,
// src: require('../../assets/Mark.png')
- })
+ }),
// new CircleStyle({ // 普通样式
// radius: 6,
@@ -305,30 +315,29 @@
// width: 0.3,
// })
// }),
- })
+ });
- iconFeature.setStyle(iconStyle)
+ iconFeature.setStyle(iconStyle);
- this.startPoint.getSource().addFeature(iconFeature)
-
+ this.startPoint.getSource().addFeature(iconFeature);
},
clearLine () {
- this.peopleLineAddlayer.getSource().clear()
- this.startPoint.getSource().clear()
+ this.peopleLineAddlayer.getSource().clear();
+ this.startPoint.getSource().clear();
},
flyTo (lgtd, lttd, size) {
- var view = this.ol2d.getView()
+ var view = this.ol2d.getView();
- view.setCenter([lgtd, lttd])
+ view.setCenter([lgtd, lttd]);
- view.setZoom(size)
+ view.setZoom(size);
},
parentParameter () {
- this.$emit('childParameter', this.ol2d)
- }
- }
-}
+ this.$emit("childParameter", this.ol2d);
+ },
+ },
+};
</script>
--
Gitblit v1.9.3