From 08554c4ac3550ba0a4402e0cfbce0136e9274eef Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Tue, 08 Mar 2022 14:26:23 +0800
Subject: [PATCH] map 相关无用删除
---
src/components/map/main.vue | 547 +++++++++++++++++++++++-------------------------------
1 files changed, 235 insertions(+), 312 deletions(-)
diff --git a/src/components/map/main.vue b/src/components/map/main.vue
index f85eb1c..0786631 100644
--- a/src/components/map/main.vue
+++ b/src/components/map/main.vue
@@ -1,338 +1,261 @@
<!--
- * @Descripttion:
- * @version:
- * @Author: song
- * @Date: 2021-04-08 15:14:57
- * @LastEditors: song
- * @LastEditTime: 2021-04-24 11:59:43
+ * @Description: 绘制图形统计圈内点数
+ * @Author: Dragon
+ * @Date: 2020-12-21 13:19:47
+ * @LastEditTime: 2020-12-21 15:03:27
+ * @LastEditors: Dragon
-->
+
<template>
- <div id="track_map" style="height: 100%"></div>
+ <div>
+ <div class="query-wrap">
+ <el-button type="primary" @click="drawStart('Polygon')">
+ {{ isDraw ? "绘制区域查询人数" : "重新绘制" }}
+ </el-button>
+ </div>
+ <div id="map"></div>
+ </div>
</template>
+
<script>
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 {
- // 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 WMTS from "ol/source/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 { getWidth, getTopLeft } from "ol/extent";
-
-import { get as getProjection } from "ol/proj";
-import XYZ from "ol/source/XYZ";
-
-import start from "@/assets/img/start.png";
-
+import { Map, View, Feature } from "ol";
+import { Image as ImageLayer, Vector as VectorLayer } from "ol/layer";
+import { ImageStatic, Vector as VectorSource } from "ol/source";
+import { getCenter } from "ol/extent";
+import { Projection } from "ol/proj";
+import Draw from "ol/interaction/Draw";
+import { Point } from "ol/geom";
+import { Icon, Style, Text, Fill, Stroke } from "ol/style";
+
+import staticMap from "@/assets/img/car.png";
+import img from "@/assets/img/car.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,
+ map: null, // 地图
+ imgx: 0, // 当前地图宽
+ imgy: 0, // 当前地图高
+ isDraw: true, // 是否绘制
+ draw: null,
+ source: null,
+ vector: null,
+ styles: [
+ new Style({
+ stroke: new Stroke({
+ color: "rgba(255,0,0,0.6)",
+ width: 2,
+ }),
+ fill: new Fill({
+ color: "rgba(255,0,0,0.3)",
+ }),
+ }),
+ ],
+ persons: [],
+ polygon: [],
+ polygonPersons: [],
+ features: [],
+ feature: null,
+ vectorSource: new VectorSource(),
+ timer: 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.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);
+ watch: {
+ persons(val) {
+ if (val) {
+ this.setFeature();
+ }
+ },
},
methods: {
- addEntitys(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,
+ // 初始化地图
+ initMap() {
+ let extent = [0, 0, this.imgx, this.imgy];
+ let projection = new Projection({
+ extent: extent,
});
-
- 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')
+ let $this = this;
+ // 默认地图
+ let mapLayer = new ImageLayer({
+ source: new ImageStatic({
+ url: staticMap,
+ projection: projection,
+ imageExtent: extent,
}),
-
- // 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), 13);
- },
-
- 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),
+
+ // 绘制点
+ let featureLayer = new VectorLayer({
+ source: this.vectorSource,
});
-
- 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],
- 13
- );
- },
-
- 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')
+
+ this.map = new Map({
+ target: "map",
+ layers: [
+ mapLayer, // 展示地图层
+ featureLayer, // 点
+ ],
+ view: new View({
+ projection: projection,
+ center: getCenter(extent),
+ zoom: 2,
+ maxZoom: 18,
}),
-
- // 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);
+
+ this.source = new VectorSource({ wrapX: false });
+ this.vector = new VectorLayer({
+ source: this.source,
+ style: this.styles,
+ });
+ this.map.addLayer(this.vector);
},
-
- clearLine() {
- this.peopleLineAddlayer.getSource().clear();
- this.startPoint.getSource().clear();
+
+ // 点
+ setFeature() {
+ let that = this;
+ that.features = [];
+ that.vectorSource.clear();
+ that.persons.map((item) => {
+ that.feature = new Feature({
+ geometry: new Point([item.x, item.y]),
+ name: item.name,
+ });
+ // 设置Feature的样式，使用小旗子图标
+ that.feature.setStyle(
+ new Style({
+ image: new Icon({
+ anchor: [0, 1],
+ src: img,
+ }),
+ text: new Text({
+ // 位置
+ textAlign: "center",
+ // 基准线
+ textBaseline: "middle",
+ // 文字样式
+ font: "normal 20px 微软雅黑",
+ // 文本内容
+ text: item.name,
+ // 文本填充样式（即文字颜色）
+ fill: new Fill({ color: "#aa3300" }),
+ stroke: new Stroke({ color: "#ffcc33", width: 2 }),
+ }),
+ })
+ );
+ that.features.push(that.feature);
+ });
+ that.vectorSource.addFeatures(that.features);
},
-
- flyTo(lgtd, lttd, size) {
- var view = this.ol2d.getView();
-
- view.setCenter([lgtd, lttd]);
-
- view.setZoom(size);
+
+ // 开始绘制多边形
+ drawStart(type) {
+ let that = this;
+ if (this.isDraw) {
+ this.isDraw = false;
+ this.draw = new Draw({
+ source: this.source,
+ type: type,
+ });
+ this.map.addInteraction(this.draw);
+ this.draw.on("drawend", function (evt) {
+ that.drawingEnd(evt);
+ });
+ } else {
+ this.source.clear();
+ this.map.removeInteraction(this.draw);
+ this.isDraw = true;
+ this.polygon = [];
+ this.polygonPersons = [];
+ }
},
-
- parentParameter() {
- this.$emit("childParameter", this.ol2d);
+
+ // 构建多边形结束
+ drawingEnd(evt) {
+ let that = this;
+ const geo = evt.feature.getGeometry();
+ const t = geo.getType();
+ if (t === "Polygon") {
+ // 获取坐标点
+ const points = geo.getCoordinates();
+ points[0].map((item) => {
+ that.polygon.push({ lng: item[0], lat: item[1] });
+ });
+ for (let i = 0; i < this.persons.length; i++) {
+ let boxFlag = this.isRegion(this.persons[i].x, this.persons[i].y, this.polygon);
+ if (boxFlag) {
+ this.polygonPersons.push(this.persons[i]);
+ }
+ }
+ this.$message({
+ type: "success",
+ message: `区域内有${this.polygonPersons.length}人`,
+ });
+ console.warn(this.polygonPersons, `区域内有${this.polygonPersons.length}人`);
+ this.map.removeInteraction(this.draw);
+ }
},
+
+ // 验证点是否在区域内
+ isRegion(lon, lat, aPoints) {
+ let num = 0,
+ iCount;
+ let dLon1, dLon2, dLat1, dLat2, dLon;
+ if (aPoints.length < 3) return false;
+ iCount = aPoints.length;
+ for (let i = 0; i < iCount; i++) {
+ if (i == iCount - 1) {
+ dLon1 = aPoints[i].lng;
+ dLat1 = aPoints[i].lat;
+ dLon2 = aPoints[0].lng;
+ dLat2 = aPoints[0].lat;
+ } else {
+ dLon1 = aPoints[i].lng;
+ dLat1 = aPoints[i].lat;
+ dLon2 = aPoints[i + 1].lng;
+ dLat2 = aPoints[i + 1].lat;
+ }
+ if ((lat >= dLat1 && lat < dLat2) || (lat >= dLat2 && lat < dLat1)) {
+ if (Math.abs(dLat1 - dLat2) > 0) {
+ dLon = dLon1 - ((dLon1 - dLon2) * (dLat1 - lat)) / (dLat1 - dLat2);
+ if (dLon < lon) num++;
+ }
+ }
+ }
+ if (num % 2 != 0) return true;
+ return false;
+ },
+ },
+ mounted() {
+ let img = new Image();
+ img.src = staticMap;
+ let that = this;
+ img.onload = function (res) {
+ that.imgx = res.target.width;
+ that.imgy = res.target.height;
+ that.initMap();
+ };
+ },
+ created() {
+ let that = this;
+ that.timer = setInterval(function () {
+ that.persons = [
+ { id: 1, name: "点-1", x: 497.08, y: 187.88, z: 0 },
+ { id: 2, name: "点-2", x: 725.32, y: 565.88, z: 0 },
+ { id: 3, name: "点-3", x: 643.24, y: 503.96, z: 0 },
+ ];
+ }, 2000);
+ },
+ beforeDestroy() {
+ clearInterval(this.timer);
},
};
</script>
+
+<style>
+#map {
+ width: 100%;
+ height: calc(100vh - 50px);
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3