Skip to content

Commit 4d4dd48

Browse files
author
潘卓然ParnDeedlit
committed
【站点】【新增】【新增Vue-Mapboxgl-事件示例】
1 parent 0648abc commit 4d4dd48

File tree

3 files changed

+176
-0
lines changed

3 files changed

+176
-0
lines changed

‎website/public/static/demo/config/config-vue-mapboxgl.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,22 @@
290290
"update": "最后更新时间：2021-01-07"
291291
}
292292
]
293+
},
294+
{
295+
"name": "Vue-事件",
296+
"iconfont": "icon_ogc",
297+
"folder": "vue-event",
298+
"leaffolder": true,
299+
"childs": [
300+
{
301+
"name": "图层事件",
302+
"file": "event-layer",
303+
"diffcult": "2",
304+
"detail": "",
305+
"icon": "event-layer.png",
306+
"update": "最后更新时间：2021-03-08"
307+
}
308+
]
293309
}
294310
]
295311
}

‎website/public/static/demo/vue-mapboxgl/example/vue-event/event-layer.htm‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
6+
<title>Vue-测量</title>
7+
<!--引入第三方的jquery脚本库-->
8+
<script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
9+
<style type="text/css">
10+
#main {
11+
margin: 0 0;
12+
width: 100%;
13+
height: 100vh;
14+
}
15+
#toolbar-wrapper {
16+
position: absolute;
17+
z-index: 9999;
18+
display: inline-flex;
19+
overflow-x: hidden;
20+
overflow-y: visible;
21+
top: 20px;
22+
left: 20px;
23+
}
24+
.toolbar-item {
25+
background: #ffffff;
26+
border: 1px dashed #666666;
27+
text-align: center;
28+
font-size: 20px;
29+
line-height: 20px;
30+
height: fit-content;
31+
padding: 6px 16px;
32+
cursor: pointer;
33+
}
34+
#map {
35+
height: 100vh;
36+
width: 100%;
37+
}
38+
.label {
39+
color: #3bb2d0;
40+
font-size: 16px;
41+
font-weight: bold;
42+
}
43+
</style>
44+
</head>
45+
46+
<body>
47+
<div id="app">
48+
<mapbox-map
49+
id="map"
50+
:access-token="accessToken"
51+
:map-style="mapStyle"
52+
:zoom="mapZoom"
53+
:center="outerCenter"
54+
:crs="mapCrs"
55+
v-on:load="handleMapLoad"
56+
>
57+
<mapbox-ogc-wmts-layer
58+
:layer="layerWmts"
59+
:layer-id="layerWmtsId"
60+
:source-id="sourceWmtsId"
61+
:url="wmtsurl"
62+
>
63+
</mapbox-ogc-wmts-layer>
64+
<mapbox-raster-layer
65+
:layer="layerRaster"
66+
:layer-id="layerRasterId"
67+
:source="sourceRaster"
68+
:source-id="sourceRasterId"
69+
>
70+
</mapbox-raster-layer>
71+
<mapbox-geojson-layer
72+
:source="geojsonSource"
73+
:source-id="geojsonSourceId"
74+
:layer="fillLayer"
75+
:layer-id="fillLayerId">
76+
</mapbox-geojson-layer>
77+
</mapbox-map>
78+
</div>
79+
<script>
80+
var geojson = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[114.28939819335936,30.594183452544694]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[114.34776306152344,30.623436511269382],[114.32510375976562,30.63909360759635],[114.30673599243164,30.634958017061198],[114.29180145263672,30.629640569460406],[114.28339004516601,30.627424880048103],[114.26467895507812,30.620777507443577],[114.24613952636719,30.616050209185243],[114.23566818237304,30.61073172273802]]}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[114.33454513549805,30.479893814659587],[114.38587188720703,30.479893814659587],[114.38587188720703,30.504596494227247],[114.33454513549805,30.504596494227247],[114.33454513549805,30.479893814659587]]]}}]};
81+
82+
new Vue({
83+
el: '#app',
84+
data() {
85+
return {
86+
mapStyle: {
87+
//设置版本号，一定要设置
88+
version: 8,
89+
//添加来源
90+
sources: {},
91+
//设置加载并显示来源的图层信息
92+
layers: [],
93+
}, // 地图样式
94+
mapZoom: 11,
95+
outerCenter: [114.3, 30.5],
96+
mapCrs: 'EPSG:4326',
97+
98+
layerWmts: {},
99+
layerWmtsId: 'ogcwmts_layerId',
100+
sourceWmtsId: 'ogcwmts_sourceId',
101+
wmtsurl: 'http://t0.tianditu.com/DataServer?T=img_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752',
102+
103+
layerRaster: {},
104+
sourceRaster: {
105+
type: 'raster',
106+
tiles: ['http://t0.tianditu.com/DataServer?T=cia_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752']
107+
},
108+
layerRasterId: 'raster_layerId',
109+
sourceRasterId: 'raster_sourceId',
110+
111+
geojsonSourceId: "geojsonCollections",
112+
geojsonSource: {
113+
type: 'geojson',
114+
data: geojson
115+
},
116+
fillLayerId: 'fillid',
117+
fillLayer: {
118+
"type": "fill",
119+
"source": "geojsonCollections", //必须和上面的geojsonCollections一致
120+
"filter": ["==", "$type", "Polygon"], //关键点：$type是固定语法，类型是Point、LineString、Polygon
121+
"layout": {
122+
"visibility": "visible" //是否可见 visible / none
123+
},
124+
"paint": {
125+
"fill-antialias": true, //抗锯齿，true表示针对边界缝隙进行填充
126+
"fill-color": "#FFFFFF", //颜色
127+
"fill-opacity": 0.8, //透明度
128+
"fill-outline-color": "#52B883", //边线颜色，没错,确实没有边线宽度这个选项
129+
//"fill-pattern":"picture_name", //线的拉伸图片类型，一定要与对应的样式库的图片名字一一对应
130+
//"fill-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
131+
}
132+
}
133+
};
134+
},
135+
methods: {
136+
enableMeasure() {
137+
const component = this.$refs.measureref;
138+
if (component) {
139+
component.enableMeasure();
140+
}
141+
},
142+
handleMapLoad(payload) {
143+
this.map = payload.map;
144+
console.log("地图对象", this.map);
145+
this.map.on('click', function(event){
146+
console.log('地图被点击了', event);
147+
})
148+
this.map.on('click', "raster_layerId", function(event){
149+
console.log('栅格图层无法获取点击事件', event);
150+
});
151+
this.map.on('click', "fillid", function(event){
152+
console.log('矢量图层被点击了', event);
153+
alert('矢量图层被点击了', event);
154+
});
155+
}
156+
}
157+
});
158+
</script>
159+
</body>
160+
</html>

‎website/public/static/demo/vue-mapboxgl/gallery/vue-event/event-layer.png‎

146 KB
Loading

0 commit comments

Comments
 (0)