From 1ec8bc5c749c36e2c845ee55740472ca4125193d Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Mon, 21 Mar 2022 10:26:03 +0800
Subject: [PATCH] +
---
src/components/map/main.vue | 84 ++++++++++++++++++++++++++++++++++-------
1 files changed, 69 insertions(+), 15 deletions(-)
diff --git a/src/components/map/main.vue b/src/components/map/main.vue
index 54afb5d..6915f02 100644
--- a/src/components/map/main.vue
+++ b/src/components/map/main.vue
@@ -143,6 +143,7 @@
// // 用来添加相关文字描述的
// import Text from "ol/style/Text";
// // import Fill from "ol/style/Fill";
+// import Cesium from "libs/Cesium/Cesium.js";
export default {
name: "Map",
@@ -167,6 +168,11 @@
source: new VectorSource(),
}),
peopleLineAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ beginsPoint: new VectorLayer({
// 图标图层
zIndex: 22,
source: new VectorSource(),
@@ -220,20 +226,41 @@
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: 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: '道路+中文注记',
+ // title: "道路+中文注记",
// source: new XYZ({
- // url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
- // })
- // })
+ // url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
+ // }),
+ // }),
+ 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", // 行政区划
+ // url: "/localData/sl/{z}/{x}/{y}.png",
+ tileUrlFunction: function (tileCoord) {
+ var z = tileCoord[0];
+ var x = tileCoord[1];
+ var y = Math.pow(2, z) + tileCoord[2];
+ return "../assets/sl/" + z + "/" + x + "/" + y + ".png";
+ },
+ }),
+ }),
+ 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", // 注记
+ }),
+ }),
],
// 注意地图控件的写法
@@ -255,11 +282,17 @@
var view = ol2d.getView();
+ // let provider = new Cesium.UrlTemplateImageryProvider({
+ // url: "/wp/{z}/{x}/{y}.png",
+ // fileExtension: "png",
+ // });
+ // view.imageryLayers.addImageryProvider(provider);
+
// view.setCenter([115.85883507433789, 28.708432053474827])
- view.setCenter([114.03841654, 27.62919726]);
+ view.setCenter([114.03858862, 27.63088262]);
//
- view.setZoom(13);
+ view.setZoom(18);
this.view = view;
const ol3d = new OLCesium({ map: window.ol2d });
window.ol3d = ol3d;
@@ -268,12 +301,33 @@
ol2d.addLayer(this.peopleAddlayer);
ol2d.addLayer(this.carAddlayer);
ol2d.addLayer(this.peopleLineAddlayer);
+ ol2d.addLayer(this.beginsPoint);
// this.addLines()
+ let that = this;
+ that.addNewLine();
+
+ return;
+ that.beginsPoint.getSource().clear();
+ let iconFeature = new OlFeature({
+ geometry: new OlGeomPoint([114.03928791, 27.62954732]), //绘制图形（点）
+ });
+ iconFeature.setStyle(
+ new OlStyleStyle({
+ image: new OlStyleIcon({
+ scale: 0.5,
+ offset: [0, 5],
+ offsetOrigin: "bottom",
+ //透明度
+ opacity: 1,
+ //图片路径
+ src: "img/dingwei/dingwei4.png",
+ }),
+ })
+ );
+ that.beginsPoint.getSource().addFeature(iconFeature);
//监听鼠标位置
- var that = this;
//
- that.addNewLine();
},
methods: {
init(val, num, value, fromView) {
--
Gitblit v1.9.3