From eb6374fd3670ac6fec2725e5f3ccb708ea76f22c Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Tue, 20 Jul 2021 22:03:47 +0800
Subject: [PATCH] 位置选择
---
src/components/map/main.vue | 306 +++++++++++++++++++++++++++-----------------------
1 files changed, 166 insertions(+), 140 deletions(-)
diff --git a/src/components/map/main.vue b/src/components/map/main.vue
index 21bc0b0..ca8f3fb 100644
--- a/src/components/map/main.vue
+++ b/src/components/map/main.vue
@@ -7,18 +7,18 @@
* @LastEditTime: 2021-04-24 11:59:43
-->
<template>
- <div id="map"
- style="height: 100%"></div>
+ <div id="map"
+ style="height: 100%"></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 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 {
+ import {
// eslint-disable-next-line no-unused-vars
defaults as OlControlDefaults,
defaults,
@@ -42,167 +42,193 @@
ZoomToExtent,
Rotate
-} from 'ol/control.js'
+ } from 'ol/control.js'
-import VectorLayer from 'ol/layer/Vector'
-import VectorSource from 'ol/source/Vector'
+ import VectorLayer from 'ol/layer/Vector'
+ import VectorSource from 'ol/source/Vector'
-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'
-export default {
+ 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()
- }),
- }
+ 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()
+ }),
+ }
},
- mounted () {
- const ol2d = new OlMap({
- layers: [
- 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' // 行政区划
- })
- }),
- 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'
+ 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' // 注记
+ // })
+ // })
+ ],
+
+ // 注意地图控件的写法
+ 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
+ })
+ window.ol2d = ol2d
- var view = ol2d.getView()
+ var view = ol2d.getView()
- view.setCenter([115.85883507433789, 28.708432053474827])
+ // view.setCenter([115.85883507433789, 28.708432053474827])
+ //
+ // view.setZoom(13)
- view.setZoom(13)
+ const ol3d = new OLCesium({map: window.ol2d})
+ window.ol3d = ol3d
- 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)
- this.addLines()
+ ol2d.addLayer(this.gunAddlayer)
+ ol2d.addLayer(this.peopleAddlayer)
+ ol2d.addLayer(this.carAddlayer)
+ ol2d.addLayer(this.peopleLineAddlayer)
+ // this.addLines()
},
methods: {
- init3D (val) {
- window.ol3d.setEnabled(val)
- },
- addEntitys (item, icon, scale, name, type) {
- const iconFeature = new Feature({
- geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
- name: name,
- attributes: item
- })
+ init3D(val) {
+ window.ol3d.setEnabled(val)
+ },
+ addEntitys(item, icon, scale, name, type) {
+ 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" }),
- // }),
+ 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')
- })
+ 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,
- // })
- // }),
- })
+ // 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)
+ iconFeature.setStyle(iconStyle)
- this[type].getSource().addFeature(iconFeature)
- },
+ this[type].getSource().addFeature(iconFeature)
+ },
- addLines () {
+ addLines(ringId) {
+ var that = this;
+ if (ringId != null && ringId != "") {
+ $.ajax({
+ url: "api/routeIn/routein/selectList",
+ type: "post",
+ data: {
+ "id": ringId
+ },
+ dataType: 'JSON',
+ success: function (data) {
+ that.peopleLineAddlayer.getSource().clear()
+ var entityData = '';
+ var entityArr = [];
+ entityData = data.data[0].routeInfo.match(/\(([^)]*)\)/);
- // 点坐标
- var lineCoords = [
- [115.87471898408013, 28.720924466928977],
- [115.87471898408013, 28.724163802651635],
- [115.87401037939081, 28.72456871961697],
- [115.87147964835748, 28.7246699488583],
- [115.86925260504815, 28.7246699488583],
- [115.86621572780817, 28.7246699488583],
- [115.8635837675335, 28.72578347051296]
- ];// 线里点的集合
+ // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
+ if (entityData && entityData != '') {
+ entityData = entityData[1].split(',');
- // 要素
- // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
- var feature_LineString = new Feature({
+ 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 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({
+ feature_LineString.setStyle(new Style({
//填充色
fill: new Fill({
- color: 'rgba(255, 255, 255, 0.2)'
+ color: 'rgba(255, 255, 255, 0.2)'
}),
//边线颜色
stroke: new Stroke({
- color: 'rgb(252, 94, 32)',
- width: 5
+ color: 'rgb(252, 94, 32)',
+ width: 5
})
- }))
-
-
- this.peopleLineAddlayer.getSource().addFeature(feature_LineString)
-
+ }))
+ that.peopleLineAddlayer.getSource().addFeature(feature_LineString)
+ },
+ error: function (data) {
+ // 请求失败函数
+ console.log(data);
+ }
+ });
}
+
+
+ }
}
-}
+ }
</script>
--
Gitblit v1.9.3