tdt-map-vue2 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -7
- package/index.js +0 -1
- package/lib/BaseMap.vue +21 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -40,7 +40,7 @@ Vue.use(TdtMap, {
|
|
|
40
40
|
| positionControl | boolean | 否 | true | 是否显示缩放平移控件 |
|
|
41
41
|
| zoomControl | boolean | 否 | true | 是否显示地图缩放控件 |
|
|
42
42
|
| tk | string | 否 | - | 天地图 tk |
|
|
43
|
-
| center | number[] | 否 |
|
|
43
|
+
| center | number[] | 否 | 天安门经纬度 | 地图 center |
|
|
44
44
|
| zoom | number | 否 | 15 | 地图 zoom |
|
|
45
45
|
| mapOptions | object | 否 | - | 百度地图初始化参数 minZoom/maxZoom/mapType |
|
|
46
46
|
| denyRefresh | boolean | 否 | false | 拒绝地图刷新，即地图移动或 zoom 改变不会触发 changeView 事件 |
|
|
@@ -56,14 +56,17 @@ Vue.use(TdtMap, {
|
|
|
56
56
|
| lat | string | 是 | - | 点纬度 |
|
|
57
57
|
| img | image | 否 | - | 展示图片 |
|
|
58
58
|
| infos | 二维数组/string | 否 | - | 展示的文字 |
|
|
59
|
-
|
|
|
59
|
+
| infoWindowFn | function | 否 | - | 自定义信息窗口，返回{content,infoWindowOptions} |
|
|
60
|
+
| icon | string | 否 | - | 图标路径，默认使用天地图默认图标 |
|
|
61
|
+
| iconSize | array | 否 | - | 图标大小，默认[30, 30] |
|
|
62
|
+
| iconAnchor | array | 否 | - | 图标偏移量，默认[0, 0] |
|
|
60
63
|
| noClick | boolean | 否 | - | 不触发点击 marker 事件 |
|
|
61
64
|
| titleKeys | string | 否 | - | 指定 infos 中哪个数据有悬浮 title |
|
|
62
|
-
|
|
|
63
|
-
| labelFn | function | 否 | - | 自定义 Label，返回{content,style,anchor}，高优先级 |
|
|
65
|
+
| labelFn | function | 否 | - | 自定义 Label，返回{content,anchor}，高优先级 |
|
|
64
66
|
| isCustomMarker | boolean | 否 | - | 是否自定义 marker，默认 false，为 true 时，会使用 initTianDiMapMarker 方法渲染 marker |
|
|
65
67
|
|
|
66
|
-
- labelFn 回调接受两个参数(data, point)。需要返回包含 content(渲染内容)、
|
|
68
|
+
- labelFn 回调接受两个参数(data, point)。需要返回包含 content(渲染内容)、anchor(label 偏移量)的对象
|
|
69
|
+
- infoWindowFn 回调接受两个参数(data, point)。需要返回包含 content(渲染内容)、infoWindowOptions(信息窗口属性,参见[天地图信息窗口](http://lbs.tianditu.gov.cn/api/js4.0/class.html))的对象
|
|
67
70
|
|
|
68
71
|
例如：
|
|
69
72
|
|
|
@@ -73,14 +76,21 @@ Vue.use(TdtMap, {
|
|
|
73
76
|
id: "4968-a081",
|
|
74
77
|
lat: "31.792512",
|
|
75
78
|
lng: "116.829919",
|
|
76
|
-
|
|
79
|
+
icon: "http://192.168.0.222:10010/static/media/default.jpg",
|
|
80
|
+
iconSize: [30, 30],
|
|
81
|
+
iconAnchor: [0, 0],
|
|
77
82
|
infos: [
|
|
78
83
|
["名称", "#次高压4#"],
|
|
79
84
|
["压力", "六安次高压"],
|
|
80
85
|
["标号", "站至合肥新奥啊啊啊啊啊啊啊门站"],
|
|
81
86
|
["标号222", "站至合肥新奥啊啊啊啊啊啊啊门站"],
|
|
82
87
|
],
|
|
83
|
-
|
|
88
|
+
infoWindowFn: (data,point) => {
|
|
89
|
+
return {
|
|
90
|
+
content:{/*string or dom*/},
|
|
91
|
+
infoWindowOptions:{/*天地图信息窗口options*/},
|
|
92
|
+
}
|
|
93
|
+
}
|
|
84
94
|
},
|
|
85
95
|
{
|
|
86
96
|
id: 2,
|
package/index.js
CHANGED
package/lib/BaseMap.vue
CHANGED
|
@@ -22,7 +22,7 @@ export default {
|
|
|
22
22
|
},
|
|
23
23
|
center: {
|
|
24
24
|
type: Array,
|
|
25
|
-
default: () => [
|
|
25
|
+
default: () => ['116.404','39.915'],
|
|
26
26
|
},
|
|
27
27
|
zoom: {
|
|
28
28
|
type: Number,
|
|
@@ -112,7 +112,7 @@ export default {
|
|
|
112
112
|
},
|
|
113
113
|
|
|
114
114
|
mounted() {
|
|
115
|
-
console.log("----------initMap----------");
|
|
115
|
+
// console.log("----------initMap----------");
|
|
116
116
|
// 使用 props.tk，如果为空则使用全局配置的 tk
|
|
117
117
|
installTMap(this.initMap, this.tk);
|
|
118
118
|
},
|
|
@@ -142,7 +142,7 @@ export default {
|
|
|
142
142
|
},
|
|
143
143
|
lines: {
|
|
144
144
|
handler() {
|
|
145
|
-
console.log("----------props.lines------------");
|
|
145
|
+
// console.log("----------props.lines------------");
|
|
146
146
|
|
|
147
147
|
this.removeAllPipelines();
|
|
148
148
|
this.initAllLines(this.lines);
|
|
@@ -271,7 +271,7 @@ export default {
|
|
|
271
271
|
|
|
272
272
|
// 分批次渲染管线
|
|
273
273
|
renderPipelinesInBatches(lines) {
|
|
274
|
-
console.log("----------renderPipelinesInBatches--------",lines);
|
|
274
|
+
// console.log("----------renderPipelinesInBatches--------",lines);
|
|
275
275
|
if (!lines || lines.length === 0) return;
|
|
276
276
|
let pipelines = JSON.parse(JSON.stringify(lines));
|
|
277
277
|
this.removeAllPipelines();
|
|
@@ -295,7 +295,7 @@ export default {
|
|
|
295
295
|
// 异步渲染下一批，避免阻塞主线程
|
|
296
296
|
requestAnimationFrame(renderBatch);
|
|
297
297
|
} else {
|
|
298
|
-
console.log("所有管线渲染完成，总数：", pipelines.length,pipelines);
|
|
298
|
+
// console.log("所有管线渲染完成，总数：", pipelines.length,pipelines);
|
|
299
299
|
this.$emit("renderLine",this.pipelineLayers);
|
|
300
300
|
}
|
|
301
301
|
};
|
|
@@ -308,7 +308,7 @@ export default {
|
|
|
308
308
|
return new this.TMapGL.LngLat(...coord)
|
|
309
309
|
}
|
|
310
310
|
);
|
|
311
|
-
console.log('--------getLine------',pipe,lngLatArr);
|
|
311
|
+
// console.log('--------getLine------',pipe,lngLatArr);
|
|
312
312
|
|
|
313
313
|
const polyline = new this.TMapGL.Polyline(lngLatArr, pipe.lineOptions);
|
|
314
314
|
polyline.addEventListener("mouseover", (e) => {
|
|
@@ -339,7 +339,7 @@ export default {
|
|
|
339
339
|
|
|
340
340
|
// 线段管理
|
|
341
341
|
initAllLines(lines) {
|
|
342
|
-
console.log("----------渲染管线initAllLines--------");
|
|
342
|
+
// console.log("----------渲染管线initAllLines--------");
|
|
343
343
|
|
|
344
344
|
this.renderPipelinesInBatches(lines);
|
|
345
345
|
},
|
|
@@ -396,8 +396,9 @@ export default {
|
|
|
396
396
|
marker = label;}
|
|
397
397
|
} else {
|
|
398
398
|
const icon = new this.TMapGL.Icon({
|
|
399
|
-
iconUrl: data.
|
|
400
|
-
iconSize: new this.TMapGL.Point(
|
|
399
|
+
iconUrl: data.icon || markerIcon,
|
|
400
|
+
iconSize: new this.TMapGL.Point(...(data.iconSize || [30, 30])),
|
|
401
|
+
iconAnchor: new this.TMapGL.Point(...(data.iconAnchor || [0, 0])),
|
|
401
402
|
});
|
|
402
403
|
marker = new this.TMapGL.Marker(point, { icon });
|
|
403
404
|
}
|
|
@@ -406,8 +407,19 @@ export default {
|
|
|
406
407
|
marker.addEventListener("click", (e) => {
|
|
407
408
|
setTimeout(() => {
|
|
408
409
|
this.$emit("markerClick", { marker, data, e });
|
|
410
|
+
if(data.infoWindowFn) { // 信息窗口
|
|
411
|
+
const {content, infoWindowOptions={}} = data.infoWindowFn(data, point);
|
|
412
|
+
const markerInfoWin = new this.TMapGL.InfoWindow(content, infoWindowOptions);
|
|
413
|
+
this.map.openInfoWindow(markerInfoWin,point)
|
|
414
|
+
}
|
|
409
415
|
}, 0);
|
|
410
416
|
});
|
|
417
|
+
marker.addEventListener("mouseover", (e) => {
|
|
418
|
+
this.$emit("markerMouseover", { marker, data, e });
|
|
419
|
+
});
|
|
420
|
+
marker.addEventListener('mouseout',e => {
|
|
421
|
+
this.$emit("markerMouseout", { marker, data, e })
|
|
422
|
+
})
|
|
411
423
|
|
|
412
424
|
return { marker };
|
|
413
425
|
},
|