From 98ee2c764ac5324398e26d1562b75ab27a1040db Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 07 Aug 2021 18:49:41 +0800
Subject: [PATCH] 部分修改，及服务器上使用修改
---
src/components/map/main.vue | 161 +++++++++++++++++++++++++++++++++++------------------
1 files changed, 107 insertions(+), 54 deletions(-)
diff --git a/src/components/map/main.vue b/src/components/map/main.vue
index b541496..a9a1f33 100644
--- a/src/components/map/main.vue
+++ b/src/components/map/main.vue
@@ -11,10 +11,9 @@
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 XYZ from 'ol/source/XYZ'
import OlLayerTile from 'ol/layer/Tile.js'
import OlMap from 'ol/Map.js'
@@ -46,15 +45,21 @@
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 start from '@/assets/img/start.png'
+import { getWidth, getTopLeft } from 'ol/extent'
-import axios from 'axios'
+import { get as getProjection } from 'ol/proj'
+import XYZ from "ol/source/XYZ";
+
+import start from '@/assets/img/start.png'
export default {
name: 'Map',
@@ -84,64 +89,112 @@
}
},
mounted () {
- axios.get('/json/map.json').then(res => {
- this.ol2d = new OlMap({
- layers: [
- new OlLayerTile({
- zIndex: 4,
- title: '影像',
- source: new XYZ({
- url: res.data.data // 行政区划
+ // 本地开发使用
+ // 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]
})
- })
- // ,
- // 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'
})
+ ],
+
+ // 注意地图控件的写法
+ 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
+
})
- window.ol2d = this.ol2d
-
- var view = this.ol2d.getView()
-
- view.setCenter([115.85883507433789, 28.708432053474827])
-
- view.setZoom(13)
-
- const ol3d = new OLCesium({ map: window.ol2d })
- window.ol3d = ol3d
-
- 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)
})
+
+
+
+ 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: {
- init3D (val) {
- window.ol3d.setEnabled(val)
- },
+
addEntitys (item, icon, scale, name, type) {
this[type].getSource().clear()
--
Gitblit v1.9.3