From 2716502f2a9bd81f2e8f2de2165b8d3ad284de24 Mon Sep 17 00:00:00 2001
From: zhengpz <1838927346@qq.com>
Date: Sat, 04 Dec 2021 20:11:55 +0800
Subject: [PATCH] Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/zhba_regulatory_ys
---
src/components/map/main.vue | 621 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 337 insertions(+), 284 deletions(-)
diff --git a/src/components/map/main.vue b/src/components/map/main.vue
index 575c141..53a3510 100644
--- a/src/components/map/main.vue
+++ b/src/components/map/main.vue
@@ -7,7 +7,8 @@
* @LastEditTime: 2021-04-24 11:59:43
-->
<template>
- <div id="track_map" style="height: 100%"></div>
+ <div id="track_map"
+ style="height: 100%"></div>
</template>
<script>
import "ol/ol.css";
@@ -17,28 +18,28 @@
import OlMap from "ol/Map.js";
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,
+ // 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";
@@ -50,7 +51,7 @@
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 { Icon, Style, Fill, Stroke, Text } from "ol/style.js";
import { getWidth, getTopLeft } from "ol/extent";
@@ -60,280 +61,332 @@
import start from "@/assets/img/start.png";
export default {
- name: "Map",
- 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(),
- }),
- startPoint: new VectorLayer({
- // 图标图层
- zIndex: 22,
- 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' // 注记
+ name: "Map",
+ 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(),
+ }),
+ startPoint: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ 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
+
// })
// })
- ],
- // 注意地图控件的写法
- 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",
- }),
- });
+ this.parentParameter();
- // 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);
- // }
+ window.ol2d = this.ol2d;
- // // 正式服务器上使用
- // this.ol2d = new OlMap({
- // layers: [
- // new OlLayerTile({//矢量地图
+ var view = this.ol2d.getView();
- // 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]
- // })
- // }),
+ view.setCenter([115.85883507433789, 28.708432053474827]);
- // })
- // ],
+ view.setZoom(13);
- // // 注意地图控件的写法
- // 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.parentParameter();
-
- window.ol2d = this.ol2d;
-
- var view = this.ol2d.getView();
-
- view.setCenter([115.85883507433789, 28.708432053474827]);
-
- 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);
- },
- methods: {
- addEntitys(item, icon, scale, name, type) {
-
- console.log(item, 565)
- this[type].getSource().clear();
-
- const iconFeature = new Feature({
- geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
- name: name,
- attributes: item,
- });
-
- const iconStyle = new Style({
- // text: new Text({ // 字体, 未成功, 浪费许多时间
- // font: 'Normal ' + 12 + 'px ' + 'iconfont',
- // text: "\e645",
- // fill: new Fill({ color: "green" }),
- // }),
-
- image: new Icon({
- scale: scale,
- opacity: 1,
- src: icon,
- // src: require('../../assets/Mark.png')
- }),
-
- // new CircleStyle({ // 普通样式
- // radius: 6,
- // fill: new Fill({
- // color: 'rgba(200, 155, 155, 0.8)'
- // }),
- // stroke: new Stroke({
- // color: 'black',
- // width: 0.3,
- // })
- // }),
- });
-
- iconFeature.setStyle(iconStyle);
-
- this[type].getSource().addFeature(iconFeature);
-
- this.flyTo(Number(item.LGTD), Number(item.LTTD), 18);
+ 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: {
+ addEntitys (item, icon, scale, name, type) {
- addLines(arr) {
- this.addEntity(arr[0][0], arr[0][1]);
- this.peopleLineAddlayer.getSource().clear();
- // 点坐标
- var lineCoords = arr; // 线里点的集合
+ console.log(item, 565)
+ this[type].getSource().clear();
- // 要素
- // 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),
- });
+ const iconFeature = new Feature({
+ geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
+ name: name,
+ attributes: item,
+ });
- 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,
- }),
- })
- );
+ const iconStyle = new Style({
+ // text: new Text({ // 字体, 未成功, 浪费许多时间
+ // font: 'Normal ' + 12 + 'px ' + 'iconfont',
+ // text: "\e645",
+ // fill: new Fill({ color: "green" }),
+ // }),
- this.peopleLineAddlayer.getSource().addFeature(feature_LineString);
+ image: new Icon({
+ scale: scale,
+ opacity: 1,
+ src: icon,
+ // src: require('../../assets/Mark.png')
+ }),
- this.flyTo(
- arr[Math.ceil(arr.length / 2)][0],
- arr[Math.ceil(arr.length / 2)][1],
- 15
- );
+ // new CircleStyle({ // 普通样式
+ // radius: 6,
+ // fill: new Fill({
+ // color: 'rgba(200, 155, 155, 0.8)'
+ // }),
+ // stroke: new Stroke({
+ // color: 'black',
+ // width: 0.3,
+ // })
+ // }),
+ });
+
+ iconFeature.setStyle(iconStyle);
+
+ this[type].getSource().addFeature(iconFeature);
+
+ this.flyTo(Number(item.LGTD), Number(item.LTTD), 18);
+ },
+
+ addTextEntitys (item, icon, scale, name, type) {
+
+ this[type].getSource().clear();
+
+ const iconFeature = new Feature({
+ geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
+ name: name,
+ attributes: item,
+ });
+
+ const iconStyle = new Style({
+ // text: new Text({ // 字体, 未成功, 浪费许多时间
+ // font: 'Normal ' + 12 + 'px ' + 'iconfont',
+ // text: "\e645",
+ // fill: new Fill({ color: "green" }),
+ // }),
+
+ text: new Text({
+ textAlign: 'top',
+ text: item.phone + '\r\n' + item.rname + '\r\n' + item.deptname,
+ font: 'bold 20px SimHei',
+ fill: new Fill({ color: '#000' }),
+ offsetX: 20,
+ offsetY: -16
+ }),
+
+ image: new Icon({
+ scale: scale,
+ opacity: 1,
+ src: icon,
+ // src: require('../../assets/Mark.png')
+ }),
+
+ // new CircleStyle({ // 普通样式
+ // radius: 6,
+ // fill: new Fill({
+ // color: 'rgba(200, 155, 155, 0.8)'
+ // }),
+ // stroke: new Stroke({
+ // color: 'black',
+ // width: 0.3,
+ // })
+ // }),
+ });
+
+ iconFeature.setStyle(iconStyle);
+
+ this[type].getSource().addFeature(iconFeature);
+
+ this.flyTo(Number(item.LGTD), Number(item.LTTD), 18);
+ },
+
+ addLines (arr) {
+ this.addEntity(arr[0][0], arr[0][1]);
+ this.peopleLineAddlayer.getSource().clear();
+ // 点坐标
+ 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),
+ });
+
+ 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.flyTo(
+ arr[Math.ceil(arr.length / 2)][0],
+ arr[Math.ceil(arr.length / 2)][1],
+ 15
+ );
+ },
+
+ addEntity (LGTD, LTTD) {
+ this.startPoint.getSource().clear();
+
+ const iconFeature = new Feature({
+ geometry: new Point([LGTD, LTTD]),
+ name: "起始点",
+ });
+
+ const iconStyle = new Style({
+ // text: new Text({ // 字体, 未成功, 浪费许多时间
+ // font: 'Normal ' + 12 + 'px ' + 'iconfont',
+ // text: "\e645",
+ // fill: new Fill({ color: "green" }),
+ // }),
+
+ image: new Icon({
+ anchor: [0.5, 170], //锚点
+ anchorOrigin: "top-left", //锚点源
+ anchorXUnits: "fraction", //锚点X值单位
+ anchorYUnits: "pixels", //锚点Y值单位
+ offsetOrigin: "top-left",
+ scale: 0.2,
+ opacity: 1,
+ src: start,
+ // src: require('../../assets/Mark.png')
+ }),
+
+ // new CircleStyle({ // 普通样式
+ // radius: 6,
+ // fill: new Fill({
+ // color: 'rgba(200, 155, 155, 0.8)'
+ // }),
+ // stroke: new Stroke({
+ // color: 'black',
+ // width: 0.3,
+ // })
+ // }),
+ });
+
+ iconFeature.setStyle(iconStyle);
+
+ this.startPoint.getSource().addFeature(iconFeature);
+ },
+
+ clearLine () {
+ this.peopleLineAddlayer.getSource().clear();
+ this.startPoint.getSource().clear();
+ },
+
+ flyTo (lgtd, lttd, size) {
+ var view = this.ol2d.getView();
+
+ view.setCenter([lgtd, lttd]);
+
+ view.setZoom(size);
+ },
+
+ parentParameter () {
+ this.$emit("childParameter", this.ol2d);
+ },
},
-
- addEntity(LGTD, LTTD) {
- this.startPoint.getSource().clear();
-
- const iconFeature = new Feature({
- geometry: new Point([LGTD, LTTD]),
- name: "起始点",
- });
-
- const iconStyle = new Style({
- // text: new Text({ // 字体, 未成功, 浪费许多时间
- // font: 'Normal ' + 12 + 'px ' + 'iconfont',
- // text: "\e645",
- // fill: new Fill({ color: "green" }),
- // }),
-
- image: new Icon({
- anchor: [0.5, 170], //锚点
- anchorOrigin: "top-left", //锚点源
- anchorXUnits: "fraction", //锚点X值单位
- anchorYUnits: "pixels", //锚点Y值单位
- offsetOrigin: "top-left",
- scale: 0.2,
- opacity: 1,
- src: start,
- // src: require('../../assets/Mark.png')
- }),
-
- // new CircleStyle({ // 普通样式
- // radius: 6,
- // fill: new Fill({
- // color: 'rgba(200, 155, 155, 0.8)'
- // }),
- // stroke: new Stroke({
- // color: 'black',
- // width: 0.3,
- // })
- // }),
- });
-
- iconFeature.setStyle(iconStyle);
-
- this.startPoint.getSource().addFeature(iconFeature);
- },
-
- clearLine() {
- this.peopleLineAddlayer.getSource().clear();
- this.startPoint.getSource().clear();
- },
-
- flyTo(lgtd, lttd, size) {
- var view = this.ol2d.getView();
-
- view.setCenter([lgtd, lttd]);
-
- view.setZoom(size);
- },
-
- parentParameter() {
- this.$emit("childParameter", this.ol2d);
- },
- },
};
</script>
--
Gitblit v1.9.3