From 4a5af28ba9fc254b81aae7345ae936cbaf0716be Mon Sep 17 00:00:00 2001
From: 少年 <1392120328@qq.com>
Date: 星期一, 04 三月 2024 15:33:56 +0800
Subject: [PATCH] youhua
---
src/components/viewer2.vue | 126 ++-------
src/assets/GLOBAL2.vue | 14 +
src/components/sideMenu/layerMenu/layerPanel2.vue | 200 +++++---------
src/components/poplayer/history2.vue | 139 ++--------
src/main.js | 2
src/utils/tool.js | 145 +++++++++++
src/utils/transform.js | 147 +++++++++++
src/components/sideMenu/layerTreePanel/layerTreePanel2.vue | 3
8 files changed, 439 insertions(+), 337 deletions(-)
diff --git a/src/assets/GLOBAL2.vue b/src/assets/GLOBAL2.vue
index 1baf20d..f19df4a 100644
--- a/src/assets/GLOBAL2.vue
+++ b/src/assets/GLOBAL2.vue
@@ -1,8 +1,22 @@
<script>
const layers = [];
const alpha = 1;
+const geoMap = null;
+const baseMap = null;
+const ImageLayer = null;
+const annotation = null;
+const hexin = null;
+const yzxcgh = null;
+const historyLayer = null;
export default {
layers, //鏀堕泦鍣�
alpha,
+ geoMap,
+ baseMap,
+ ImageLayer,
+ annotation,
+ hexin,
+ yzxcgh,
+ historyLayer
};
</script>
\ No newline at end of file
diff --git a/src/components/poplayer/history2.vue b/src/components/poplayer/history2.vue
index cd947d5..641ad0c 100644
--- a/src/components/poplayer/history2.vue
+++ b/src/components/poplayer/history2.vue
@@ -1,142 +1,54 @@
<template>
<div class="historyBox">
- <div class="leftBox">
- <div id="mapContainer" class="mapLeft"></div>
- <div class="colseBtn">
- <img class="searchBtn" @click="close" src="@/assets/closeinput1.png" />
- </div>
- <div class="listBox">
- <ul>
- <li v-for="(item, index) in arr" :key="index" @click="changeLeftMap(item, index)"
- :class="{ active: currentIndex1 == index }">
- {{ item }}
- </li>
- </ul>
- </div>
+ <div class="colseBtn">
+ <img class="searchBtn" @click="close" src="@/assets/closeinput1.png" />
+ </div>
+ <div class="listBox">
+ <ul>
+ <li
+ v-for="(item, index) in arr"
+ :key="index"
+ @click="changeLeftMap(item)"
+ :class="{ active: currentValue == item }"
+ >
+ {{ item }}
+ </li>
+ </ul>
</div>
</div>
</template>
<script>
-import mapType from "@/utils/maptype";
-import { Map, View } from "ol";
-import Tile from "ol/layer/Tile";
-import WMTS from "ol/source/WMTS";
-import WMTSTileGrid from "ol/tilegrid/WMTS";
-import * as olProj from "ol/proj";
-import XYZ from "ol/source/XYZ";
-import store from '@/utils/store2'
-let view = new View({
- center: olProj.fromLonLat([4.606512, 2.621472]),
- zoom: 12,
- enableRotation: false,
-});
-var topResolution = 896.0859375;
-var resolutions = [];
-let matrixIds = [];
-
-for (let zoom = 0; zoom < 13; zoom++) {
- resolutions.push(topResolution / Math.pow(2, zoom));
- matrixIds[zoom] = zoom;
-}
-let LwSource = new Tile({
- source: new WMTS({
- url: "https://skyzt.bda.gov.cn/service/ImageEngine/picdis/abc?user=jjjskfq&password=Jjjskfq@2022",
- layer: "Shiliang_Lw_2019",
- style: "",
- format: "image/png",
- // 鎶曞奖鍧愭爣绯�
- tileGrid: new WMTSTileGrid({
- extent: [371987.18334, 252920.58593, 624459.12036, 423400.07714],
- origin: [0, 688194],
- resolutions: resolutions,
- matrixIds: matrixIds,
- tileSize: 256,
- }),
- }),
-});
+import store from "@/utils/store2";
+import { addHistoryLayer } from "@/utils/tool";
export default {
name: "historyBox",
components: {},
data() {
return {
- openMap: null,
arr: [
2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012,
2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
],
- tileLayer1: null, // 鍦板浘灞�
- tileLayer2: null, // 鍦板浘灞�
- mapList: [], // 鍦板浘鍒楄〃
- locaMap1: "2021",
- // locaMap2: "2020",
- currentIndex1: 20,
- // currentIndex2: 19,
+ currentValue: 2021,
};
},
mounted() {
- this.mapList = mapType;
- this.tileLayer1 = new Tile({
- source: this.mapList.find((e) => e.id == this.locaMap1).value,
- });
- // this.tileLayer2 = new Tile({
- // source: this.mapList.find((e) => e.id == this.locaMap2).value,
- // });
- this.initMap();
+ window.mapapi.getView().setCenter([4.606512, 2.621472]);
+ addHistoryLayer(this.currentValue);
},
methods: {
- initMap() {
- new Map({
- target: "mapContainer",
- layers: [
- this.tileLayer1,
- LwSource,
- // new Tile({
- // source: new XYZ({
- // url: "https://skyzt.bda.gov.cn/yzAdapter/Vector/?request=1&year=2002&type=Sate&level={z}&x={x}&y={y}",
- // }),
- // }),
- ],
- view: view,
- controls: [],
- });
+ changeLeftMap(item) {
+ this.currentValue = item;
+ addHistoryLayer(this.currentValue);
},
- changeLeftMap(item, index) {
- this.tileLayer1.setSource(this.mapList.find((e) => e.id == item).value);
- this.currentIndex1 = index;
- },
- close(){
+ close() {
store.setHistoryShow(false);
-
- }
- // changeRightMap(item, index) {
- // this.tileLayer2.setSource(this.mapList.find((e) => e.id == item).value);
- // this.currentIndex2 = index;
- // },
+ },
},
- // watch: {
- // "state.show": {
- // handler: function (newVal, oldVal) {
- // debugger;
- // let that = this;
- // this.state.show =newVal
- // },
- // },
- // },
};
</script>
<style scoped>
-.historyBox {
- position: absolute;
- z-index: 2;
- width: 100vw;
- height: 100vh;
- /* background: rgba(0, 0, 0, 0.5); */
- background: #ffffff;
- top: 0;
- left: 0;
-}
-
.colseBtn {
position: absolute;
top: 5vh;
@@ -174,4 +86,5 @@
.active {
background-color: #4590d7;
-}</style>
+}
+</style>
diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue
index cf14e79..db3a36f 100644
--- a/src/components/sideMenu/layerMenu/layerPanel2.vue
+++ b/src/components/sideMenu/layerMenu/layerPanel2.vue
@@ -3,16 +3,30 @@
<div class="mapMode">
<div class="title" style="margin-top: 0px">鍦板浘妯″紡</div>
<div class="container">
- <div class="layerItem" :key="value.id" v-for="(value, index) in eMapModeList"
- @click.stop="handleEMapClick(value, index)">
- <img :src="value.src" :class="{ active: curEMapModelIndex == index }" />
+ <div
+ class="layerItem"
+ :key="value.id"
+ v-for="(value, index) in eMapModeList"
+ @click.stop="handleEMapClick(value, index)"
+ >
+ <img
+ :src="value.src"
+ :class="{ active: curEMapModelIndex == index }"
+ />
<span :class="{ spanActive: curEMapModelIndex == index }">{{
value.name
}}</span>
</div>
- <div class="layerItem" :key="value0.id" v-for="(value0, index0) in sMapModelList"
- @click.stop="handleSMapClick(value0, index0)">
- <img :src="value0.src" :class="{ active: curSMapModelIndex == index0 }" />
+ <div
+ class="layerItem"
+ :key="value0.id"
+ v-for="(value0, index0) in sMapModelList"
+ @click.stop="handleSMapClick(value0, index0)"
+ >
+ <img
+ :src="value0.src"
+ :class="{ active: curSMapModelIndex == index0 }"
+ />
<span :class="{ spanActive: curSMapModelIndex == index0 }">{{
value0.name
}}</span>
@@ -23,11 +37,17 @@
<div class="title">
涓撻搴旂敤
<!-- 涓嶆樉绀烘洿澶氬浘灞� -->
- <span class="more" v-show="false" @click.stop="showLayerTree">鏇村鍥惧眰<i class="el-icon-arrow-right"></i></span>
+ <span class="more" v-show="false" @click.stop="showLayerTree"
+ >鏇村鍥惧眰<i class="el-icon-arrow-right"></i
+ ></span>
</div>
<div class="container">
- <div class="layerItem" v-for="(ZTValue, ZTIndex) in zhuantiList" :key="ZTValue.id"
- @click.stop="handleZTlick(ZTValue, ZTIndex)">
+ <div
+ class="layerItem"
+ v-for="(ZTValue, ZTIndex) in zhuantiList"
+ :key="ZTValue.id"
+ @click.stop="handleZTlick(ZTValue, ZTIndex)"
+ >
<img :src="ZTValue.src" :class="{ active: curZTIndex == ZTIndex }" />
<span :class="{ spanActive: curZTIndex == ZTIndex }">{{
ZTValue.name
@@ -36,9 +56,16 @@
</div>
<div class="title2"></div>
<div class="container">
- <div class="layerItem" v-for="(funcValue, funcIndex) in FuncList" :key="funcValue.id"
- @click.stop="handleFuncClick(funcIndex)">
- <img :src="funcValue.src" :class="{ active: curFuncIndex == funcIndex }" />
+ <div
+ class="layerItem"
+ v-for="(funcValue, funcIndex) in FuncList"
+ :key="funcValue.id"
+ @click.stop="handleFuncClick(funcIndex)"
+ >
+ <img
+ :src="funcValue.src"
+ :class="{ active: curFuncIndex == funcIndex }"
+ />
<span :class="{ spanActive: curFuncIndex == funcIndex }">{{
funcValue.name
}}</span>
@@ -82,12 +109,15 @@
import store from "@/utils/store2.js";
import ZTTitem from "@/utils/ztt2.js";
import { layers } from "../../../../static/json/layer.js";
-
-// import Tile from "ol/layer/Tile";
-// import XYZ from "ol/source/XYZ";
-// import { get as getProjection, getTransform } from "ol/proj";
-// import { createXYZ } from "ol/tilegrid";
-
+import {
+ addImageLayer,
+ addAnnotationLayer,
+ addHxLayer,
+ addYzLayer,
+ loadBaseMap,
+ loadGeoMap,
+ clearAll,
+} from "@/utils/tool";
export default {
name: "LayerPanel",
data() {
@@ -226,104 +256,24 @@
},
// 浜岀淮搴曞浘閫夋嫨
handleEMapClick(result, index) {
- // 璁剧疆鐩告満
- // if (result.name == "浜岀淮鍦板浘") {
- // window.mapapi.getLayerByName("浜岀淮鍦板浘").setVisible(true);
- // window.mapapi.getLayerByName("褰卞儚鍦板浘").setVisible(false);
- // } else if (result.name == "褰卞儚鍦板浘") {
- // window.mapapi.getLayerByName("褰卞儚鍦板浘").setVisible(true);
- // window.mapapi.getLayerByName("浜岀淮鍦板浘").setVisible(false);
- // }
-
- // 鍒囨崲鍥惧眰
- const val = layers.filter((res) => {
- if (res.name == result.name) {
- return res;
- }
- });
- const children = val[0].children;
- // console.log(children, '111')
- if (result.name == '褰卞儚鍦板浘') {
- //鍔犺浇鑸媿褰卞儚
- window.ImageLayer = new ol.layer.Tile({
- id: 'C0698021',
- visible: true,
- source: new ol.source.XYZ({
- wrapX: true,
- url: `${'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}/tile/{z}/{y}/{x}`,
- }),
- projection: new ol.proj.get('EPSG:4326')
- });
- window.mapapi.addLayer(window.ImageLayer);
-
- //鍔犺浇楂樺痉鏍囨敞
- window.annotation = new ol.layer.Tile({
- id: '69EB42A8',
- visible: true,
- source: new ol.source.XYZ({
- wrapX: true,
- url: `https://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}`,
- }),
- projection: new ol.proj.get('EPSG:4326')
- });
- window.mapapi.addLayer(window.annotation);
-
-
- window.hexin = new ol.layer.Tile({
- source: new ol.source.TileWMS({
- ratio: 3,
- url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ60',//鍥惧眰鍦板潃
- params: {
- 'VERSION': '1.1.1',
- 'SRS': 'EPSG:4326',
- 'FORMAT': 'image/png',
- 'TILED': true,
- "LAYERS": ''
- }
- })
- })
- window.mapapi.addLayer(window.hexin)
-
-
- //浜﹀簞鏂板煄瑙勫垝鑼冨洿
- window.yizhuang = new ol.layer.Tile({
- source: new ol.source.TileWMS({
- ratio: 3,
- url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ',//鍥惧眰鍦板潃
- params: {
- 'VERSION': '1.1.1',
- 'SRS': 'EPSG:4326',
- 'FORMAT': 'image/png',
- 'TILED': true,
- "LAYERS": ''
- }
- })
- })
- window.mapapi.addLayer(window.yizhuang)
- } else {
- window.mapapi.removeLayer(window.ImageLayer);
- window.mapapi.removeLayer(window.annotation)
- window.mapapi.removeLayer(window.hexin);
- window.mapapi.removeLayer(window.yizhuang);
- }
-
-
-
- if (this.curEMapModelIndex == index) {
- // 鍐嶆鐐瑰嚮閫変腑鐨刬tem鏃跺彇娑堥�夋嫨
- // clearLayerByTypeId(result.id);
- // this.curEMapModelIndex = -1;
- } else {
- this.curSMapModelIndex = -1;
- this.curEMapModelIndex = index;
- // clearLayerByTypeIdArr(["ewdt", "yxdt"]);
- // clearLayerByTypeIdArr(["3Dcs", "swmx"]);
- // _GLOBAL.layers[result.id] = [];
- // children.forEach((item) => {
- // let itemLayer = loadLayer(item);
- // _GLOBAL.layers[result.id].push(itemLayer);
- // // console.log(_GLOBAL.layers[result.id]);
- // });
+ if (this.curEMapModelIndex == index) return;
+ this.curEMapModelIndex = index;
+ clearAll();
+ switch (result.name) {
+ case "浜岀淮鍦板浘":
+ loadGeoMap();
+ loadBaseMap();
+ addAnnotationLayer();
+ addHxLayer();
+ addYzLayer();
+ window.mapapi.getView().setZoom(14);
+ break;
+ case "褰卞儚鍦板浘":
+ addImageLayer();
+ addAnnotationLayer();
+ addHxLayer();
+ addYzLayer();
+ break;
}
},
// 涓夌淮妯″瀷閫夋嫨
@@ -476,16 +426,16 @@
window.tdgllayer = new ol.layer.Tile({
source: new ol.source.TileWMS({
ratio: 3,
- url: 'https://skyzt.bda.gov.cn//gisserver/wmsserver/chengshiguihua_dikuaibianhao',
+ url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao",
params: {
- 'VERSION': '1.1.1',
- 'SRS': 'EPSG:4326',
- 'FORMAT': 'image/png',
- 'TILED': true,
- "LAYERS": ''
- }
- })
- })
+ VERSION: "1.1.1",
+ SRS: "EPSG:4326",
+ FORMAT: "image/png",
+ TILED: true,
+ LAYERS: "",
+ },
+ }),
+ });
// window.tdgllayer = new ol.layer.Tile({
// source: new ol.source.XYZ({
diff --git a/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue b/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
index 5e423af..6dc7871 100644
--- a/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
+++ b/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
@@ -103,7 +103,7 @@
mounted() {
axios.get("./static/json/layers.json").then(
(res) => {
- console.log("layers.json", res);
+ // console.log("layers.json", res);
//鑾峰彇榛樿閫変腑鏁版嵁鐨刬d
this.parseJson(res.data.children);
@@ -2274,6 +2274,7 @@
// });
});
},
+ //浼佷笟淇℃伅鍔犺浇
qiyeCluster(treeNode) {
if (treeNode.checked == false) {
window.mapapi.removeLayer(window.qiyeclusterLayer);
diff --git a/src/components/viewer2.vue b/src/components/viewer2.vue
index f136701..dbd4d81 100644
--- a/src/components/viewer2.vue
+++ b/src/components/viewer2.vue
@@ -57,7 +57,7 @@
</template>
<script>
import store from "@/utils/store2.js";
-import { setClick, leftClick } from '@/utils/map2.js'
+import { setClick, leftClick } from "@/utils/map2.js";
import _GLOBAL from "@/assets/GLOBAL2";
// import { leftClick, loadLayer } from "@/utils/map.js";
import leftBottom from "@/components/leftMenu/bottom2.vue";
@@ -81,7 +81,14 @@
import mainPoplayer from "./poplayer/poplayer2.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main2.vue";
import Axios from "axios";
-
+import {
+ addImageLayer,
+ addAnnotationLayer,
+ addHxLayer,
+ addYzLayer,
+ loadBaseMap,
+ getCurrentPosition,
+} from "@/utils/tool";
// import Map from "ol/Map.js";
// import TileLayer from "ol/layer/Tile.js";
// import View from "ol/View.js";
@@ -114,7 +121,7 @@
"my-history": history,
"my-land-admin-info": landAdminInfo,
"my-slider": sliderAlpha,
- "my-poplayer": mainPoplayer
+ "my-poplayer": mainPoplayer,
},
data() {
return {
@@ -137,11 +144,9 @@
state: store.history,
};
},
- created() { },
+ created() {},
mounted() {
this.$nextTick(function () {
- console.log("openlayer init");
-
ol.Map.prototype.getLayerByName = function (name) {
var layer;
this.getLayers().array_.forEach(function (lyr) {
@@ -164,11 +169,15 @@
let projection = ol.proj.get(_proj);
let projectionExtent = projection.getExtent();
- let origin = projectionExtent ? ol.extent.getTopLeft(projectionExtent) : [-180, 90];
+ let origin = projectionExtent
+ ? ol.extent.getTopLeft(projectionExtent)
+ : [-180, 90];
let fromLonLat = ol.proj.getTransform("EPSG:4326", projection);
let width = projectionExtent
? ol.extent.getWidth(projectionExtent)
- : ol.extent.getWidth(ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat));
+ : ol.extent.getWidth(
+ ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat)
+ );
let resolutions = [];
let matrixIds = [];
@@ -236,10 +245,10 @@
source: wmtsSource2,
});
// wmtsLayer2.setVisible(false);
- ////鍗槦褰卞儚
- layers.push(wmtsLayer);
////浜岀淮鍦板浘
- layers.push(wmtsLayer2);
+ // layers.push(wmtsLayer2);
+ ////鍗槦褰卞儚
+ // layers.push(wmtsLayer);
////璺綉
// layers.push(wmtsLayer1);
@@ -250,98 +259,21 @@
center: [116.505348, 39.795592],
projection: "EPSG:4326",
zoom: 12,
- minZoom: 8.5
+ minZoom: 9.5,
}),
+ // events: ["singleclick", "pointermove"],
});
window.mapapi = map;
- //鍔犺浇鑸媿褰卞儚
- window.ImageLayer = new ol.layer.Tile({
- id: 'C0698021',
- visible: true,
- source: new ol.source.XYZ({
- wrapX: true,
- url: `${'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}/tile/{z}/{y}/{x}`,
- }),
- projection: new ol.proj.get('EPSG:4326')
- });
- window.mapapi.addLayer(window.ImageLayer);
+ addImageLayer();
+ addAnnotationLayer();
+ addHxLayer();
+ addYzLayer();
- //鍔犺浇楂樺痉鏍囨敞
- window.annotation = new ol.layer.Tile({
- id: '69EB42A8',
- visible: true,
- source: new ol.source.XYZ({
- wrapX: true,
- url: `https://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}`,
- }),
- projection: new ol.proj.get('EPSG:4326')
- });
- window.mapapi.addLayer(window.annotation);
-
-
- window.hexin = new ol.layer.Tile({
- source: new ol.source.TileWMS({
- ratio: 3,
- url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ60',//鍥惧眰鍦板潃
- params: {
- 'VERSION': '1.1.1',
- 'SRS': 'EPSG:4326',
- 'FORMAT': 'image/png',
- 'TILED': true,
- "LAYERS": ''
- }
- })
- })
- window.mapapi.addLayer(window.hexin)
-
-
- //浜﹀簞鏂板煄瑙勫垝鑼冨洿
- window.yizhuang = new ol.layer.Tile({
- source: new ol.source.TileWMS({
- ratio: 3,
- url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ',//鍥惧眰鍦板潃
- params: {
- 'VERSION': '1.1.1',
- 'SRS': 'EPSG:4326',
- 'FORMAT': 'image/png',
- 'TILED': true,
- "LAYERS": ''
- }
- })
- })
- window.mapapi.addLayer(window.yizhuang)
-
-
-
-
- setClick(true)
+ setClick(true);
+ getCurrentPosition();
// leftClick()
- // var url =
- // "https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/";
-
- // var tmslayer = new ol.layer.Tile({
- // source: new ol.source.XYZ({
- // projection: projection,
- // tileGrid: ol.tilegrid.createXYZ({
- // extent: [50.731, -90, 180, 70.0478],
- // }),
- // tileUrlFunction: function (tileCoord, pixelRatio, proj) {
- // // return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.jpeg';
- // return (
- // url +
- // (tileCoord[0] - 1) +
- // "/" +
- // tileCoord[1] +
- // "/" +
- // (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) +
- // ".jpeg"
- // );
- // },
- // }),
- // });
- // window.mapapi.addLayer(tmslayer);
window.layerOpen = function (name, options) {
layuiLayer.close(SmartEarthPopupData.layerProp);
@@ -459,7 +391,7 @@
console.log(window.gisBaseUrl);
Axios.get(
window.gisBaseUrl +
- "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=浼佷笟閾句紒涓�"
+ "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=浼佷笟閾句紒涓�"
).then((res) => {
console.log(res);
});
diff --git a/src/main.js b/src/main.js
index 36dd28b..f5ec70a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,7 +12,7 @@
import animated from "animate.css"
import "./js/rem"
import vcolorpicker from 'vcolorpicker'
-import _GLOBAL from '@/assets/GLOBAL';
+import _GLOBAL from '@/assets/GLOBAL2';
Vue.use(vcolorpicker);
Vue.use(animated);
window.sgworld = null;
diff --git a/src/utils/tool.js b/src/utils/tool.js
new file mode 100644
index 0000000..7cea36d
--- /dev/null
+++ b/src/utils/tool.js
@@ -0,0 +1,145 @@
+
+import _GLOBAL from '@/assets/GLOBAL2'
+import gcj02Mecator from '@/utils/transform'
+//娓呴櫎
+export function clearAll() {
+ if (_GLOBAL.ImageLayer) {
+ window.mapapi.removeLayer(_GLOBAL.ImageLayer);
+ }
+ if (_GLOBAL.annotation) {
+ window.mapapi.removeLayer(_GLOBAL.annotation);
+ }
+ if (_GLOBAL.hexin) {
+ window.mapapi.removeLayer(_GLOBAL.hexin);
+ }
+ if (_GLOBAL.yzxcgh) {
+ window.mapapi.removeLayer(_GLOBAL.yzxcgh);
+ }
+ if (_GLOBAL.baseMap) {
+ window.mapapi.removeLayer(_GLOBAL.baseMap);
+ }
+ if (_GLOBAL.geoMap) {
+ window.mapapi.removeLayer(_GLOBAL.geoMap);
+
+ }
+}
+
+//鍔犺浇鑸媿褰卞儚
+export function addImageLayer() {
+ _GLOBAL.ImageLayer = new ol.layer.Tile({
+ source: new ol.source.XYZ({
+ url: `${'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}/tile/{z}/{y}/{x}`,
+ }),
+ });
+ window.mapapi.addLayer(_GLOBAL.ImageLayer);
+}
+
+//鍔犺浇鐧借壊鍦板浘
+export function loadBaseMap() {
+ _GLOBAL.baseMap = new ol.layer.Tile({
+ source: new ol.source.TileWMS({
+ ratio: 3,
+ url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/shiliangditu_baisexi_wms", //鍥惧眰鍦板潃
+ params: {
+ VERSION: "1.1.1",
+ SRS: "EPSG:4326",
+ FORMAT: "image/png",
+ TILED: true,
+ LAYERS: "",
+ },
+ }),
+ });
+ window.mapapi.addLayer(_GLOBAL.baseMap)
+
+}
+
+//鍔犺浇楂樺痉鍦板浘
+export function loadGeoMap() {
+ _GLOBAL.geoMap = new ol.layer.Tile({
+ source: new ol.source.XYZ({
+ wrapX: false,
+ projection: gcj02Mecator,
+ url: ` https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}`,
+ }),
+ });
+ window.mapapi.addLayer(_GLOBAL.geoMap);
+
+}
+
+
+//鍔犺浇楂樺痉鏍囨敞
+export function addAnnotationLayer() {
+ _GLOBAL.annotation = new ol.layer.Tile({
+ source: new ol.source.XYZ({
+ wrapX: false,
+ projection: gcj02Mecator,
+ url: `https://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}`,
+ }),
+ });
+ window.mapapi.addLayer(_GLOBAL.annotation);
+}
+
+// 鏍稿績鍖鸿鍒掕寖鍥�
+export function addHxLayer() {
+ _GLOBAL.hexin = new ol.layer.Tile({
+ source: new ol.source.TileWMS({
+ ratio: 3,
+ url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ60',
+ params: {
+ 'VERSION': '1.1.1',
+ 'SRS': 'EPSG:4326',
+ 'FORMAT': 'image/png',
+ 'TILED': true,
+ "LAYERS": ''
+ }
+ })
+ })
+ window.mapapi.addLayer(_GLOBAL.hexin)
+}
+
+//浜﹀簞鏂板煄瑙勫垝鑼冨洿
+export function addYzLayer() {
+ _GLOBAL.yzxcgh = new ol.layer.Tile({
+ source: new ol.source.TileWMS({
+ ratio: 3,
+ url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ',//鍥惧眰鍦板潃
+ params: {
+ 'VERSION': '1.1.1',
+ 'SRS': 'EPSG:4326',
+ 'FORMAT': 'image/png',
+ 'TILED': true,
+ "LAYERS": ''
+ }
+ })
+ })
+ window.mapapi.addLayer(_GLOBAL.yzxcgh)
+}
+
+//鍔犺浇鍘嗗彶褰卞儚
+export function addHistoryLayer(name) {
+ const layerName = name;
+ _GLOBAL.historyLayer = new ol.layer.Tile({
+ source: new ol.source.XYZ({
+ url: `https://skyzt.bda.gov.cn/yzAdapter/Vector/?request=1&year=${layerName}&type=Sate&level={z}&x={x}&y={y}`,
+ })
+ });
+ window.mapapi.addLayer(_GLOBAL.historyLayer);
+}
+
+
+//鑾峰彇褰撳墠瀹氫綅
+
+
+export function getCurrentPosition() {
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition((res) => {
+ console.log(res);//杩欓噷浼氳繑鍥炵粡绾害锛岀劧鍚庤繕瑕侀�氳繃缁忕含搴﹁浆鎹㈠湴鍖哄悕绉�
+ });
+ }
+
+}
+
+
+
+
+
diff --git a/src/utils/transform.js b/src/utils/transform.js
new file mode 100644
index 0000000..471f66c
--- /dev/null
+++ b/src/utils/transform.js
@@ -0,0 +1,147 @@
+
+
+var forEachPoint = function (func) {
+ return function (input, opt_output, opt_dimension) {
+ var len = input.length;
+ var dimension = opt_dimension ? opt_dimension : 2;
+ var output;
+ if (opt_output) {
+ output = opt_output;
+ } else {
+ if (dimension !== 2) {
+ output = input.slice();
+ } else {
+ output = new Array(len);
+ }
+ }
+ for (var offset = 0; offset < len; offset += dimension) {
+ func(input, output, offset);
+ }
+ return output;
+ };
+};
+var gcj02 = {};
+var i = 0;
+var PI = Math.PI;
+var AXIS = 6378245.0;
+var OFFSET = 0.00669342162296594323; // (a^2 - b^2) / a^2
+
+function delta(wgLon, wgLat) {
+ var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
+ var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
+ var radLat = (wgLat / 180.0) * PI;
+ var magic = Math.sin(radLat);
+ magic = 1 - OFFSET * magic * magic;
+ var sqrtMagic = Math.sqrt(magic);
+ dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI);
+ dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI);
+ return [dLon, dLat];
+}
+
+function outOfChina(lon, lat) {
+ if (lon < 72.004 || lon > 137.8347) {
+ return true;
+ }
+ if (lat < 0.8293 || lat > 55.8271) {
+ return true;
+ }
+ return false;
+}
+
+function transformLat(x, y) {
+ var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
+ ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0;
+ ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0;
+ ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0;
+ return ret;
+}
+
+function transformLon(x, y) {
+ var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
+ ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0;
+ ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0;
+ ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0;
+ return ret;
+}
+
+gcj02.toWGS84 = forEachPoint(function (input, output, offset) {
+ var lng = input[offset];
+ var lat = input[offset + 1];
+ if (!outOfChina(lng, lat)) {
+ var deltaD = delta(lng, lat);
+ lng = lng - deltaD[0];
+ lat = lat - deltaD[1];
+ }
+ output[offset] = lng;
+ output[offset + 1] = lat;
+});
+
+gcj02.fromWGS84 = forEachPoint(function (input, output, offset) {
+ var lng = input[offset];
+ var lat = input[offset + 1];
+ if (!outOfChina(lng, lat)) {
+ var deltaD = delta(lng, lat);
+ lng = lng + deltaD[0];
+ lat = lat + deltaD[1];
+ }
+ output[offset] = lng;
+ output[offset + 1] = lat;
+});
+
+var sphericalMercator = {};
+
+var RADIUS = 6378137;
+var MAX_LATITUDE = 85.0511287798;
+var RAD_PER_DEG = Math.PI / 180;
+
+sphericalMercator.forward = forEachPoint(function (input, output, offset) {
+ var lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE);
+ var sin = Math.sin(lat * RAD_PER_DEG);
+
+ output[offset] = RADIUS * input[offset] * RAD_PER_DEG;
+ output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2;
+});
+
+sphericalMercator.inverse = forEachPoint(function (input, output, offset) {
+ output[offset] = input[offset] / RADIUS / RAD_PER_DEG;
+ output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG;
+});
+
+var projzh = {};
+projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
+ let output = gcj02.fromWGS84(input, opt_output, opt_dimension);
+ return projzh.ll2smerc(output, output, opt_dimension);
+};
+projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
+ let output = projzh.smerc2ll(input, input, opt_dimension);
+ return gcj02.toWGS84(output, opt_output, opt_dimension);
+};
+projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
+ let output = projzh.smerc2ll(input, input, opt_dimension);
+ output = gcj02.fromWGS84(output, output, opt_dimension);
+ return projzh.ll2smerc(output, output, opt_dimension);
+};
+projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
+ let output = projzh.smerc2ll(input, input, opt_dimension);
+ output = gcj02.toWGS84(output, output, opt_dimension);
+ return projzh.ll2smerc(output, output, opt_dimension);
+};
+
+projzh.ll2smerc = sphericalMercator.forward;
+projzh.smerc2ll = sphericalMercator.inverse;
+
+// 瀹氫箟GCJ02
+const gcj02Extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244];
+const gcj02Mecator = new ol.proj.Projection({
+ code: 'GCJ-02',
+ extent: gcj02Extent,
+ units: 'm',
+});
+ol.proj.addProjection(gcj02Mecator);
+// 灏�4326/3857杞负gcj02鍧愭爣鐨勬柟娉曞畾涔�
+ol.proj.addCoordinateTransforms('EPSG:3857', gcj02Mecator, projzh.smerc2gmerc, projzh.gmerc2smerc);
+ol.proj.addCoordinateTransforms('EPSG:4326', gcj02Mecator, projzh.ll2gmerc, projzh.gmerc2ll);
+
+// 鎴戜娇鐢ㄧ殑react锛屾墍浠ヨ繖閲岄渶瑕佸鍑哄畾涔夌殑gcj02Mecator锛屾彁渚涚粰澶栭儴浣跨敤
+export default gcj02Mecator;
+
--
Gitblit v1.9.3