01 ruoyi-vue-plus 中添加天地图

admin

01 ruoyi-vue-plus 中添加天地图

参考文章：
天地图官方文档   天地图官方api 文档   天地图代码示例
openlayers加载天地图
openlayers示例教程001：从0 到1 搭建开发环境



（1）在 菜单管理中追加新的路由菜单

（2）在ui 前端追加vue 文件


天地图核心导入核心代码

一、openlayers加载天地图

1. let that = this;
   
2.             //普通地图
   
3.             that.layer.tiandituVecLayer = new TileLayer({
   
4.                 title: 'generalMap',
   
5.                 source: new XYZ({
   
6.                     url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=daafafd5b7bb42922f10e3d1c06df824',
   
7.                     crossOrigin: 'anonymous'
   
8.                 }),
   
9.                 visible:false
   
10.             });
    
11.             // 卫星影像图层
    
12.             that.layer.tiandituImgLayer = new TileLayer({
    
13.                 title:'yx',
    
14.                 source: new XYZ({
    
15.                     url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=fea556436d51919f4a429933897be3c1',
    
16.                     crossOrigin: 'anonymous',
    
17.                 }),
    
18.                 visible:true
    
19.             });
    
20.             //普通地图标记
    
21.             that.layer.tiandituCvaLayer = new TileLayer({
    
22.                 title: 'generalMapZj',
    
23.                 source: new XYZ({
    
24.                     url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=daafafd5b7bb42922f10e3d1c06df824',
    
25.                     crossOrigin: 'anonymous'
    
26.                 }),
    
27.                 visible: true
    
28.             });
    
29.             let container = document.getElementById('popup');
    
30.             let  content = document.getElementById('popup-content');
    
31.             let  closer = document.getElementById('popup-closer');
    
32.             closer.onclick = function () {
    
33.                 that.overlay.setPosition(undefined);
    
34.                 closer.blur();
    
35.                 return false;
    
36.             };
    
37.             this.overlay = new Overlay({
    
38.                 element: container,
    
39.                 autoPan: true,
    
40.                 autoPanAnimation: {
    
41.                     duration: 250,
    
42.                 },
    
43.             });
    
44.             this.map = new Map({
    
45.                 target: 'map',
    
46.                 // interactions: defaultInteractions().extend([modify]),
    
47.                 overlays: [that.overlay],
    
48.                 layers: [
    
49.                     that.layer.tiandituImgLayer,
    
50.                     that.layer.tiandituVecLayer,
    
51.                     that.layer.tiandituCvaLayer
    
52.                 ],
    
53.                 view: new View({
    
54.                     // projection: 'EPSG:4326',
    
55.                     // center: [120.4750, 31.6337],
    
56.                     center:[13410926.774433982,3715530.4937355495],
    
57.                     zoom: 12,
    
58.                 }),
    
59.                 controls: defaults({
    
60.                     zoom:false,
    
61.                     attributionOptions: {
    
62.                         collapsible: false
    
63.                     }
    
64.                 })
    
65.             });
    
66.             this.$root._olMap = this.map;
    

复制代码

二、地图点击事件

1. let that = this;
   
2.             //地图点击事件
   
3.             this.map.on('singleclick', function (evt) {
   
4.                 //点击获取经纬度
   
5.                 console.log(evt.coordinate);
   
6.                 // console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
   
7.                 //判断当前单击处是否有要素，捕获到要素时弹出popup
   
8.                 let thisFeature = that.map.forEachFeatureAtPixel(evt.pixel, function (fea, layer) {
   
9.                     return fea;
   
10.                 });
    
11.                 let thisLayer = that.map.forEachLayerAtPixel(evt.pixel, function (layer) {
    
12.                     return layer;
    
13.                 });
    
14.                 if (that.pointSelect){
    
15.                     that.map.removeLayer(that.pointSelect);
    
16.                     that.pointSelect=null;
    
17.                     that.overlay.setPosition(undefined);
    
18.                     that.modalShow1=false;
    
19.                     that.modalShow=false;
    
20.                 }
    
21.                 that.pointSelect = new VectorLayer({
    
22.                     className:"pointSelect",
    
23.                     title: "pointSelect",
    
24.                     source: new VectorSource({
    
25.                         features: [thisFeature]
    
26.                     }),
    
27.                     style:new Style({
    
28.                         //填充色
    
29.                         fill: new Fill({
    
30.                             color: 'rgba(255,0,0,0.3)'
    
31.                         }),
    
32.                         //边线颜色
    
33.                         stroke: new Stroke({
    
34.                             color: 'rgba(255,0,0,0.8)',
    
35.                             width: 4
    
36.                         }),
    
37.                         //形状
    
38.                         image: new Circle({
    
39.                             radius: 7,
    
40.                             fill: new Fill({
    
41.                                 color: '#ffcc33'
    
42.                             })
    
43.                         })
    
44.                     }),
    
45.                     zIndex:1000
    
46.                 })
    

复制代码