@ohuoy/easymap 1.0.16 → 1.0.18
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/dist/bundle.js +30 -8
- package/dist/example - /345/211/257/346/234/254/1.png +0 -0
- package/dist/example - /345/211/257/346/234/254/bundle.js" +30 -8
- package/dist/example - /345/211/257/346/234/254/index.html" +63 -2
- package/index.js +31 -0
- package/package.json +3 -2
- package/src/components/control/DrawBar.js +4 -1
- package/src/components/control/TilesBar.js +1 -1
- package/src/components/control/Toobars.js +2 -2
- package/src/components/layer/CustomIconLayer.js +8 -2
- package/src/components/layer/MarkerAreaLayer.js +39 -1
- package/src/components/layer/ThreeScanLayer.js +26 -3
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
|
6
|
+
<meta http-equiv="Pragma" content="no-cache">
|
|
7
|
+
<meta http-equiv="Expires" content="0">
|
|
5
8
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
9
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
7
10
|
<meta charset="utf-8" name="referrer" content="strict-origin-when-cross-origin" />
|
|
@@ -133,7 +136,7 @@
|
|
|
133
136
|
siteId:'testid',
|
|
134
137
|
// text:'2024-01-01', //展示图片时上方显示文本 一般是时间
|
|
135
138
|
center:[108.7198975,35.0446],
|
|
136
|
-
width:517, //图片实际公里数
|
|
139
|
+
width:517/500 * 600, //图片实际公里数
|
|
137
140
|
distance:6 //设置字体位置
|
|
138
141
|
}]
|
|
139
142
|
let scanLayer = emap.map.getLayer('threescan-layer');
|
|
@@ -266,7 +269,7 @@ const playAction = (status)=>{
|
|
|
266
269
|
return {
|
|
267
270
|
image:a,
|
|
268
271
|
center:[108.7198975,35.0446],
|
|
269
|
-
width:517, //图片实际公里数
|
|
272
|
+
width:517/500 * 600, //图片实际公里数
|
|
270
273
|
distance:6, //设置字体位置
|
|
271
274
|
text:''//同播放图片
|
|
272
275
|
}
|
|
@@ -532,6 +535,31 @@ function drawWallToMap(dataList,colorFun,opacity=0.8){
|
|
|
532
535
|
}
|
|
533
536
|
|
|
534
537
|
|
|
538
|
+
function intervalMap(){
|
|
539
|
+
setInterval(() => {
|
|
540
|
+
let list = [{
|
|
541
|
+
url:'http://127.0.0.1:8007/0.png',
|
|
542
|
+
siteId:'testid',
|
|
543
|
+
// text:'2024-01-01', //展示图片时上方显示文本 一般是时间
|
|
544
|
+
center:[108.7198975,35.0446],
|
|
545
|
+
width:517/500 * 600, //图片实际公里数
|
|
546
|
+
distance:6 //设置字体位置
|
|
547
|
+
}]
|
|
548
|
+
let scanLayer = emap.map.getLayer('threescan-layer');
|
|
549
|
+
if(!scanLayer){
|
|
550
|
+
scanLayer= new EmComponents.ThreeScanLayer('threescan-layer',{
|
|
551
|
+
opacity:0.8,
|
|
552
|
+
textClass:' map-time zmax ',
|
|
553
|
+
forceClear:true
|
|
554
|
+
})
|
|
555
|
+
emap.map.addLayer(scanLayer);
|
|
556
|
+
}
|
|
557
|
+
//绘制
|
|
558
|
+
scanLayer.drawImageList(list)
|
|
559
|
+
console.log('end')
|
|
560
|
+
}, 1000);
|
|
561
|
+
}
|
|
562
|
+
|
|
535
563
|
function resetToolBar(){
|
|
536
564
|
emap.addToorbars({
|
|
537
565
|
location:{
|
|
@@ -582,6 +610,35 @@ function resetToolBar(){
|
|
|
582
610
|
|
|
583
611
|
|
|
584
612
|
window.onload = ()=>init()
|
|
613
|
+
let currindex = 0
|
|
614
|
+
function setMapTile(){
|
|
615
|
+
let keys = ['satellite','standard','tiandi']
|
|
616
|
+
emap.setTile(keys[currindex])
|
|
617
|
+
let btn = document.getElementById('setTile')
|
|
618
|
+
btn.innerText = `设置图层【点击自动切换】【当前${currindex == 0 ? '卫星图':currindex == 1 ? '标准图层':"天地图"}】`
|
|
619
|
+
currindex = currindex +1 > 2 ? 0:currindex +1;
|
|
620
|
+
|
|
621
|
+
}
|
|
622
|
+
let siteMarker2
|
|
623
|
+
function markerTo(){
|
|
624
|
+
let input = document.getElementById('lnglat')
|
|
625
|
+
console.log(input.value)
|
|
626
|
+
let center = input.value.split(',')
|
|
627
|
+
emap.jumpTo({
|
|
628
|
+
center:center,
|
|
629
|
+
zoom: 12
|
|
630
|
+
});
|
|
631
|
+
if(!siteMarker2){
|
|
632
|
+
siteMarker2= new EmComponents.EasyMapMarker({
|
|
633
|
+
id:'siteMarker',
|
|
634
|
+
position: center,
|
|
635
|
+
map:emap.map,
|
|
636
|
+
})
|
|
637
|
+
}else{
|
|
638
|
+
siteMarker2.moveTo(center)
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
}
|
|
585
642
|
|
|
586
643
|
function getBoundsImage(center,distance){
|
|
587
644
|
// let bounds = EmUtils.getLayerMapPosition();
|
|
@@ -669,12 +726,16 @@ function resetToolBar(){
|
|
|
669
726
|
<button onclick="setHeatmap()">添加热力图</button>
|
|
670
727
|
<button onclick="setBoxList()">添加方框</button>
|
|
671
728
|
<button onclick="getBox()">获取地图方框</button>
|
|
729
|
+
<button onclick="intervalMap()">长时间刷新同一名称图片</button>
|
|
672
730
|
<!-- <button onclick="getBounds()">截图</button> -->
|
|
673
731
|
<!-- <button>设置地图中心点</button>
|
|
674
732
|
<button>设置地图倾斜角</button> -->
|
|
675
733
|
<button onclick="drawWallToMap()">添加走航图(随便画的)</button>
|
|
676
734
|
<button onclick="resetToolBar()">修改工具栏定位点位置</button>
|
|
677
735
|
<button onclick="getBoundsImage()">获取位置截图</button>
|
|
736
|
+
<button id="setTile" onclick="setMapTile()">设置图层【点击自动切换】【当前标准图层】</button>
|
|
737
|
+
<input id="lnglat" />
|
|
738
|
+
<button onclick="markerTo()">标记位置[经纬度用,隔开]</button>
|
|
678
739
|
</div>
|
|
679
740
|
<div id="test">
|
|
680
741
|
|
package/index.js
CHANGED
|
@@ -690,6 +690,37 @@ export class EasyMap {
|
|
|
690
690
|
throw new Error('The params 2 image list must be array ')
|
|
691
691
|
}
|
|
692
692
|
|
|
693
|
+
|
|
694
|
+
//设置底图图层
|
|
695
|
+
setTile(key){
|
|
696
|
+
let currentFillLayerIndex = this.map.style.stylesheet.layers.findIndex(a=>a.type!='fill' && a.type!='background')
|
|
697
|
+
let beforeId = this.map.style.stylesheet.layers[currentFillLayerIndex].id
|
|
698
|
+
if(key == 'standard'){
|
|
699
|
+
if (this.map.getLayer('yingxiang')) this.map.removeLayer('yingxiang');
|
|
700
|
+
if (this.map.getLayer('tiandi')) this.map.removeLayer('tiandi');
|
|
701
|
+
}
|
|
702
|
+
if(key == 'satellite'){
|
|
703
|
+
if (this.map.getLayer('tiandi')) this.map.removeLayer('tiandi');
|
|
704
|
+
if (!this.map.getLayer('yingxiang')){
|
|
705
|
+
this.map.addLayer({
|
|
706
|
+
"id": "yingxiang",
|
|
707
|
+
"source": "yingxiang",
|
|
708
|
+
"type": "raster"
|
|
709
|
+
},beforeId)
|
|
710
|
+
};
|
|
711
|
+
}
|
|
712
|
+
if(key == 'tiandi'){
|
|
713
|
+
if (this.map.getLayer('yingxiang')) this.map.removeLayer('yingxiang');
|
|
714
|
+
if (!this.map.getLayer('tiandi')){
|
|
715
|
+
this.map.addLayer({
|
|
716
|
+
"id": "tiandi",
|
|
717
|
+
"source": "tianditu",
|
|
718
|
+
"type": "raster"
|
|
719
|
+
},beforeId)
|
|
720
|
+
};
|
|
721
|
+
}
|
|
722
|
+
}
|
|
723
|
+
|
|
693
724
|
jumpTo({
|
|
694
725
|
center= transform(this.config.center),
|
|
695
726
|
zoom= this.config.zoom,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ohuoy/easymap",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.18",
|
|
4
4
|
"description": "self map easy use",
|
|
5
5
|
"main": "main.js",
|
|
6
6
|
"scripts": {
|
|
@@ -28,7 +28,8 @@
|
|
|
28
28
|
"d3-dsv": "^1.1.1",
|
|
29
29
|
"element-resize-detector": "^1.2.4",
|
|
30
30
|
"d3-hexbin": "^0.2.2",
|
|
31
|
-
"d3-scale": "^2"
|
|
31
|
+
"d3-scale": "^2",
|
|
32
|
+
"regl": "1.6.1"
|
|
32
33
|
},
|
|
33
34
|
"devDependencies": {
|
|
34
35
|
"@babel/core": "^7.24.7",
|
|
@@ -126,7 +126,10 @@ export default class DrawBar {
|
|
|
126
126
|
}
|
|
127
127
|
this.drawEntity.add(feature);
|
|
128
128
|
});
|
|
129
|
-
|
|
129
|
+
let selected = draw.getSelectedIds()
|
|
130
|
+
if(selected.length > 0){
|
|
131
|
+
draw.changeMode('simple_select_rect',{featureIds:selected});
|
|
132
|
+
}
|
|
130
133
|
}
|
|
131
134
|
}
|
|
132
135
|
}
|
|
@@ -21,7 +21,7 @@ export default class TilesBar {
|
|
|
21
21
|
</span>
|
|
22
22
|
|
|
23
23
|
</button>
|
|
24
|
-
<div class="mapboxgl-legend-list" style='position:absolute;width:80px;background:#fff;
|
|
24
|
+
<div class="mapboxgl-legend-list" style='position:absolute;width:80px;background:#fff;margin:0 28px;top:0px;color:#000;display:none;'>
|
|
25
25
|
<div class="mapboxgl-btn-standard" style='width:100%;display:flex;'>
|
|
26
26
|
<span style='display:flex;align-item:center;' class="mapboxgl-ctrl-icon" aria-hidden="true" title="图层">
|
|
27
27
|
<img style='margin:auto;' src='data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">%3Cpath d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>%3C/svg>'/>
|
|
@@ -54,7 +54,7 @@ export default class Toobars {
|
|
|
54
54
|
this._map = map;
|
|
55
55
|
this._container = document.createElement('div');
|
|
56
56
|
this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
|
|
57
|
-
this._container.innerHTML += `<div aria-label="infobox" class='mapboxgl-ctrl-infobox' style='display:flex;flex-direction:column;position:absolute;top:-100px;
|
|
57
|
+
this._container.innerHTML += `<div aria-label="infobox" class='mapboxgl-ctrl-infobox' style='display:flex;flex-direction:column;position:absolute;top:-100px;margin: 0 50px;width:140px' ></div>`
|
|
58
58
|
if(this.config.line?.show){
|
|
59
59
|
this._container.getElementsByClassName('mapboxgl-ctrl-infobox')[0].innerHTML+=`
|
|
60
60
|
<div class='linedis-message-show ${this.config.line.messageClass}' ></div>`
|
|
@@ -296,7 +296,7 @@ export default class Toobars {
|
|
|
296
296
|
addPosition(btn){
|
|
297
297
|
if(!this.mousemovePositionFun){
|
|
298
298
|
this.mousemovePositionFun = (e) => {
|
|
299
|
-
let lngLat = [e.lngLat.lng,e.lngLat.lat]
|
|
299
|
+
let lngLat = transform([e.lngLat.lng,e.lngLat.lat],true)
|
|
300
300
|
this._container.getElementsByClassName('position-message-show')[0].innerHTML =
|
|
301
301
|
this.config.position.pointShow ? `经度：${lngLat[0].toFixed(6)}<br/>纬度：${lngLat[1].toFixed(6)}<br/>x:${e.point.x},y:${e.point.y}`
|
|
302
302
|
: `经度：${lngLat[0].toFixed(6)}<br/>纬度：${lngLat[1].toFixed(6)}`
|
|
@@ -98,17 +98,23 @@ export default class CustomIconLayer{
|
|
|
98
98
|
if(this.legend[i].type == _item.type) {
|
|
99
99
|
if(_item.visible){
|
|
100
100
|
this.iconList.forEach(a=>{
|
|
101
|
-
if(a.type == _item.type){
|
|
101
|
+
if(a.type == _item.type && a.circle){
|
|
102
102
|
a.circle.label.element.children[0].style.display = 'none'
|
|
103
103
|
}
|
|
104
|
+
if(a.type == _item.type && a.marker){
|
|
105
|
+
a.marker.getElement().style.display = 'none'
|
|
106
|
+
}
|
|
104
107
|
})
|
|
105
108
|
//this.legend[i].obj.label.element.children[0].style.display = 'none'
|
|
106
109
|
this.legend[i].visible = false
|
|
107
110
|
}else{
|
|
108
111
|
this.iconList.forEach(a=>{
|
|
109
|
-
if(a.type == _item.type){
|
|
112
|
+
if(a.type == _item.type && a.circle){
|
|
110
113
|
a.circle.label.element.children[0].style.display = ''
|
|
111
114
|
}
|
|
115
|
+
if(a.type == _item.type && a.marker){
|
|
116
|
+
a.marker.getElement().style.display = ''
|
|
117
|
+
}
|
|
112
118
|
})
|
|
113
119
|
//this.legend[i].obj.label.element.children[0].style.display = ''
|
|
114
120
|
this.legend[i].visible = true
|
|
@@ -16,8 +16,46 @@ export default class MarkerAreaLayer{
|
|
|
16
16
|
this.renderingMode = '2d';
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
createMesh(item){
|
|
20
|
+
let geometry = new THREE.BoxGeometry( 1000 * item.size, 1000 * item.size, 600000 )
|
|
21
|
+
let material = new THREE.MeshBasicMaterial({
|
|
22
|
+
color: 0xffff00,
|
|
23
|
+
opacity:1,
|
|
24
|
+
transparent: true
|
|
25
|
+
});
|
|
26
|
+
let mesh = new THREE.Mesh( geometry, material) ;
|
|
27
|
+
mesh = tb.Object3D({ obj: mesh, units: 'meters' ,anchor:'center'});
|
|
28
|
+
mesh.setCoords(transform(item.coords))
|
|
29
|
+
let geometryB = new THREE.CylinderGeometry( 5000 * item.size,7000 * item.size, 4000 * item.size,32)
|
|
30
|
+
let materialB = new THREE.MeshBasicMaterial({
|
|
31
|
+
color: 0x377fb6,
|
|
32
|
+
opacity:1,
|
|
33
|
+
transparent: true
|
|
34
|
+
});
|
|
35
|
+
let meshB = new THREE.Mesh( geometryB, materialB) ;
|
|
36
|
+
|
|
37
|
+
//meshB.rotation.x = Math.PI / 4;
|
|
38
|
+
meshB.position.z -= 600000
|
|
39
|
+
meshB.rotation.set(-Math.PI / 2, 0, 0);
|
|
40
|
+
|
|
41
|
+
meshB = tb.Object3D({ obj: meshB, units: 'meters' ,anchor:'center',rotation: { x: 90, y: 0, z: 0 } });
|
|
42
|
+
meshB.setCoords(transform(item.coords))
|
|
43
|
+
//meshB.setRotation({x:0,y:Math.PI / 4,z:0})
|
|
44
|
+
markerGroup.add(mesh)
|
|
45
|
+
markerGroup.add(meshB)
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
19
50
|
addMarkerList(markerList){
|
|
20
|
-
|
|
51
|
+
for(let i in markerList){
|
|
52
|
+
let item = markerList[i]
|
|
53
|
+
|
|
54
|
+
if(!item.id){
|
|
55
|
+
throw new Error('marker no id')
|
|
56
|
+
}
|
|
57
|
+
this.createMesh(item)
|
|
58
|
+
}
|
|
21
59
|
}
|
|
22
60
|
|
|
23
61
|
onAdd(map, gl) {
|
|
@@ -8,12 +8,14 @@ export default class ThreeScanLayer{
|
|
|
8
8
|
drawArray = []
|
|
9
9
|
opacity = 0.8
|
|
10
10
|
textClass = ''
|
|
11
|
+
forceClear = false
|
|
11
12
|
constructor(id,config) {
|
|
12
13
|
this.id = id;
|
|
13
14
|
this.opacity = Number(config.opacity)
|
|
14
15
|
this.textClass = config.textClass ? config.textClass : ''
|
|
15
16
|
this.type = 'custom';
|
|
16
|
-
this.renderingMode = '2d';
|
|
17
|
+
this.renderingMode = '2d';
|
|
18
|
+
this.forceClear = config?.forceClear;
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
//同时渲染多个地点图片文本
|
|
@@ -41,6 +43,16 @@ export default class ThreeScanLayer{
|
|
|
41
43
|
tb.remove(point.mesh)
|
|
42
44
|
}
|
|
43
45
|
|
|
46
|
+
removeAll(){
|
|
47
|
+
for(let i in this.drawArray){
|
|
48
|
+
this.remove(this.drawArray[i])
|
|
49
|
+
this.drawArray[i] = null
|
|
50
|
+
}
|
|
51
|
+
this.drawArray = this.drawArray.filter(a=>a)
|
|
52
|
+
tb.update();
|
|
53
|
+
this.map.triggerRepaint();
|
|
54
|
+
}
|
|
55
|
+
|
|
44
56
|
setOpacity(opacity){
|
|
45
57
|
this.opacity = opacity
|
|
46
58
|
for(let i in this.drawArray){
|
|
@@ -51,6 +63,10 @@ export default class ThreeScanLayer{
|
|
|
51
63
|
async update(point){
|
|
52
64
|
let texture
|
|
53
65
|
point.text = point.text ? point.text:''
|
|
66
|
+
if(this.forceClear){
|
|
67
|
+
THREE.Cache.clear();
|
|
68
|
+
texture?.dispose();
|
|
69
|
+
}
|
|
54
70
|
if(point.image){
|
|
55
71
|
let _w = point.distance * point.rp * 2;
|
|
56
72
|
let dep = point.rp * 2
|
|
@@ -68,7 +84,10 @@ export default class ThreeScanLayer{
|
|
|
68
84
|
// 创建数据文理对象 RGB格式：THREE.RGBFormat
|
|
69
85
|
//texture = new THREE.DataTexture(data, width, height, THREE.RGBFormat);
|
|
70
86
|
texture.needsUpdate = true; //纹理更新
|
|
71
|
-
}else if(point.url){
|
|
87
|
+
}else if(point.url){
|
|
88
|
+
if(this.forceClear) {
|
|
89
|
+
point.url += `?tempid=${Math.random()}`
|
|
90
|
+
}
|
|
72
91
|
let p = ()=>new Promise(function(resolve,reject){
|
|
73
92
|
new THREE.TextureLoader().load(point.url,(_texture)=>{
|
|
74
93
|
resolve(_texture)
|
|
@@ -81,7 +100,11 @@ export default class ThreeScanLayer{
|
|
|
81
100
|
//texture.flipX = true;
|
|
82
101
|
let index = this.drawArray.findIndex(a=>a.center[0] == point.center[0] && a.center[1] == point.center[1])
|
|
83
102
|
if(index >= 0){
|
|
103
|
+
|
|
84
104
|
let _point = this.drawArray[index]
|
|
105
|
+
if(this.forceClear) {
|
|
106
|
+
_point.mesh.model.material.map.dispose();
|
|
107
|
+
}
|
|
85
108
|
_point.mesh.model.material.map = texture
|
|
86
109
|
_point.mesh.label.element.innerHTML = point.text
|
|
87
110
|
}else{
|
|
@@ -98,7 +121,7 @@ export default class ThreeScanLayer{
|
|
|
98
121
|
mesh = tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
|
|
99
122
|
mesh.setCoords( transform(point.center));
|
|
100
123
|
tb.renderer.outputEncoding = THREE.sRGBEncoding;
|
|
101
|
-
tb.add(mesh);
|
|
124
|
+
tb.add(mesh);
|
|
102
125
|
let dom =document.createElement('div')
|
|
103
126
|
mesh.addLabel(dom,true,{x:mesh.anchor.x,y:mesh.anchor.y+point.distance *1200,z:mesh.anchor.z},0)
|
|
104
127
|
mesh.label.element.className += ('' +this.textClass)
|