diff --git a/index.html b/index.html index c0c17e2..6f7dde6 100644 --- a/index.html +++ b/index.html @@ -235,23 +235,6 @@ - + diff --git a/index.html b/index.html index c0c17e2..6f7dde6 100644 --- a/index.html +++ b/index.html @@ -235,23 +235,6 @@ - + diff --git a/public/static/libs/mapbox/extend/mapbox-extend.js b/public/static/libs/mapbox/extend/mapbox-extend.js new file mode 100644 index 0000000..3a64687 --- /dev/null +++ b/public/static/libs/mapbox/extend/mapbox-extend.js @@ -0,0 +1,120 @@ +// ����һ���µ�styleԪ�� +var style = document.createElement('style'); + +// ����ʽ����д��styleԪ�� +style.innerHTML = `.mapbox-gl-draw_ctrl-bottom-left, +.mapbox-gl-draw_ctrl-top-left { + margin-left:0; + border-radius:0 4px 4px 0; +} +.mapbox-gl-draw_ctrl-top-right, +.mapbox-gl-draw_ctrl-bottom-right { + margin-right:0; + border-radius:4px 0 0 4px; +} + +.mapbox-gl-draw_ctrl-draw-btn { + border-color:rgba(0,0,0,0.9); + color:rgba(255,255,255,0.5); + width:30px; + height:30px; +} + +.mapbox-gl-draw_ctrl-draw-btn.active, +.mapbox-gl-draw_ctrl-draw-btn.active:hover { + background-color:rgb(0 0 0/5%); +} +.mapbox-gl-draw_ctrl-draw-btn { + background-repeat: no-repeat; + background-position: center; +} + +.mapbox-gl-draw_point { + background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m10 2c-3.3 0-6 2.7-6 6s6 9 6 9 6-5.7 6-9-2.7-6-6-6zm0 2c2.1 0 3.8 1.7 3.8 3.8 0 1.5-1.8 3.9-2.9 5.2h-1.7c-1.1-1.4-2.9-3.8-2.9-5.2-.1-2.1 1.6-3.8 3.7-3.8z"/>%3C/svg>'); +} +.mapbox-gl-draw_polygon { + background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m15 12.3v-4.6c.6-.3 1-1 1-1.7 0-1.1-.9-2-2-2-.7 0-1.4.4-1.7 1h-4.6c-.3-.6-1-1-1.7-1-1.1 0-2 .9-2 2 0 .7.4 1.4 1 1.7v4.6c-.6.3-1 1-1 1.7 0 1.1.9 2 2 2 .7 0 1.4-.4 1.7-1h4.6c.3.6 1 1 1.7 1 1.1 0 2-.9 2-2 0-.7-.4-1.4-1-1.7zm-8-.3v-4l1-1h4l1 1v4l-1 1h-4z"/>%3C/svg>'); +} +.mapbox-gl-draw_line { + background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m13.5 3.5c-1.4 0-2.5 1.1-2.5 2.5 0 .3 0 .6.2.9l-3.8 3.8c-.3-.1-.6-.2-.9-.2-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5c0-.3 0-.6-.2-.9l3.8-3.8c.3.1.6.2.9.2 1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5z"/>%3C/svg>'); +} +.mapbox-gl-draw_trash { + background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M10,3.4 c-0.8,0-1.5,0.5-1.8,1.2H5l-1,1v1h12v-1l-1-1h-3.2C11.5,3.9,10.8,3.4,10,3.4z M5,8v7c0,1,1,2,2,2h6c1,0,2-1,2-2V8h-2v5.5h-1.5V8h-3 v5.5H7V8H5z"/>%3C/svg>'); +} +.mapbox-gl-draw_uncombine { + background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m12 2c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm4 4c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm-7 1c-1 0-1 1-.5 1.5.3.3 1 1 1 1l-1 1s-.5.5 0 1 1 0 1 0l1-1 1 1c.5.5 1.5.5 1.5-.5v-4zm-5 3c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l4.9 4.9c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-4.9-4.9c-.1-.2-.4-.3-.7-.3z"/>%3C/svg>'); +} +.mapbox-gl-draw_combine { + background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M12.1,2c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l4.9,4.9c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-4.9-4.9C12.6,2.1,12.3,2,12.1,2z M8,8C7,8,7,9,7.5,9.5c0.3,0.3,1,1,1,1l-1,1c0,0-0.5,0.5,0,1s1,0,1,0l1-1l1,1 C11,13,12,13,12,12V8H8z M4,10c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1c0.4-0.4,0.4-1,0-1.4 l-1-1C4.5,10.1,4.3,10,4,10z M8,14c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-1-1C8.5,14.1,8.3,14,8,14z"/>%3C/svg>'); +} + +.mapboxgl-map.mouse-pointer .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: pointer; +} +.mapboxgl-map.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: move; +} +.mapboxgl-map.mouse-add .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: crosshair; +} +.mapboxgl-map.mouse-move.mode-direct_select .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; +} +.mapboxgl-map.mode-direct_select.feature-vertex.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: move; +} +.mapboxgl-map.mode-direct_select.feature-midpoint.mouse-pointer .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: cell; +} +.mapboxgl-map.mode-direct_select.feature-feature.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: move; +} +.mapboxgl-map.mode-static.mouse-pointer .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; +} + +.mapbox-gl-draw_boxselect { + pointer-events: none; + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + background: rgba(0,0,0,.1); + border: 2px dotted #fff; + opacity: 0.5; +} + +.mapbox-gl-contextmenu { + background-color: white; + border: 1px solid #ccc; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); + padding: 5px; + font-size: 14px; + z-index: 9999; + display: none; + color:black; +} + +.mapbox-gl-contextmenu ul { + list-style: none; + margin: 0; + padding: 0; +} + +.mapbox-gl-contextmenu li { + padding: 8px; + cursor: pointer; +} + +.mapbox-gl-contextmenu li:hover { + background-color: #f0f0f0; +} +`; + +// ��styleԪ����ӵ��ĵ���head���� +document.head.appendChild(style); diff --git a/index.html b/index.html index c0c17e2..6f7dde6 100644 --- a/index.html +++ b/index.html @@ -235,23 +235,6 @@ - + diff --git a/public/static/libs/mapbox/extend/mapbox-extend.js b/public/static/libs/mapbox/extend/mapbox-extend.js new file mode 100644 index 0000000..3a64687 --- /dev/null +++ b/public/static/libs/mapbox/extend/mapbox-extend.js @@ -0,0 +1,120 @@ +// ����һ���µ�styleԪ�� +var style = document.createElement('style'); + +// ����ʽ����д��styleԪ�� +style.innerHTML = `.mapbox-gl-draw_ctrl-bottom-left, +.mapbox-gl-draw_ctrl-top-left { + margin-left:0; + border-radius:0 4px 4px 0; +} +.mapbox-gl-draw_ctrl-top-right, +.mapbox-gl-draw_ctrl-bottom-right { + margin-right:0; + border-radius:4px 0 0 4px; +} + +.mapbox-gl-draw_ctrl-draw-btn { + border-color:rgba(0,0,0,0.9); + color:rgba(255,255,255,0.5); + width:30px; + height:30px; +} + +.mapbox-gl-draw_ctrl-draw-btn.active, +.mapbox-gl-draw_ctrl-draw-btn.active:hover { + background-color:rgb(0 0 0/5%); +} +.mapbox-gl-draw_ctrl-draw-btn { + background-repeat: no-repeat; + background-position: center; +} + +.mapbox-gl-draw_point { + background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m10 2c-3.3 0-6 2.7-6 6s6 9 6 9 6-5.7 6-9-2.7-6-6-6zm0 2c2.1 0 3.8 1.7 3.8 3.8 0 1.5-1.8 3.9-2.9 5.2h-1.7c-1.1-1.4-2.9-3.8-2.9-5.2-.1-2.1 1.6-3.8 3.7-3.8z"/>%3C/svg>'); +} +.mapbox-gl-draw_polygon { + background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m15 12.3v-4.6c.6-.3 1-1 1-1.7 0-1.1-.9-2-2-2-.7 0-1.4.4-1.7 1h-4.6c-.3-.6-1-1-1.7-1-1.1 0-2 .9-2 2 0 .7.4 1.4 1 1.7v4.6c-.6.3-1 1-1 1.7 0 1.1.9 2 2 2 .7 0 1.4-.4 1.7-1h4.6c.3.6 1 1 1.7 1 1.1 0 2-.9 2-2 0-.7-.4-1.4-1-1.7zm-8-.3v-4l1-1h4l1 1v4l-1 1h-4z"/>%3C/svg>'); +} +.mapbox-gl-draw_line { + background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m13.5 3.5c-1.4 0-2.5 1.1-2.5 2.5 0 .3 0 .6.2.9l-3.8 3.8c-.3-.1-.6-.2-.9-.2-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5c0-.3 0-.6-.2-.9l3.8-3.8c.3.1.6.2.9.2 1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5z"/>%3C/svg>'); +} +.mapbox-gl-draw_trash { + background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M10,3.4 c-0.8,0-1.5,0.5-1.8,1.2H5l-1,1v1h12v-1l-1-1h-3.2C11.5,3.9,10.8,3.4,10,3.4z M5,8v7c0,1,1,2,2,2h6c1,0,2-1,2-2V8h-2v5.5h-1.5V8h-3 v5.5H7V8H5z"/>%3C/svg>'); +} +.mapbox-gl-draw_uncombine { + background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="m12 2c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm4 4c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l1 1c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-1-1c-.2-.2-.4-.3-.7-.3zm-7 1c-1 0-1 1-.5 1.5.3.3 1 1 1 1l-1 1s-.5.5 0 1 1 0 1 0l1-1 1 1c.5.5 1.5.5 1.5-.5v-4zm-5 3c-.3 0-.5.1-.7.3l-1 1c-.4.4-.4 1 0 1.4l4.9 4.9c.4.4 1 .4 1.4 0l1-1c.4-.4.4-1 0-1.4l-4.9-4.9c-.1-.2-.4-.3-.7-.3z"/>%3C/svg>'); +} +.mapbox-gl-draw_combine { + background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20">%3Cpath d="M12.1,2c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l4.9,4.9c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-4.9-4.9C12.6,2.1,12.3,2,12.1,2z M8,8C7,8,7,9,7.5,9.5c0.3,0.3,1,1,1,1l-1,1c0,0-0.5,0.5,0,1s1,0,1,0l1-1l1,1 C11,13,12,13,12,12V8H8z M4,10c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1c0.4-0.4,0.4-1,0-1.4 l-1-1C4.5,10.1,4.3,10,4,10z M8,14c-0.3,0-0.5,0.1-0.7,0.3l-1,1c-0.4,0.4-0.4,1,0,1.4l1,1c0.4,0.4,1,0.4,1.4,0l1-1 c0.4-0.4,0.4-1,0-1.4l-1-1C8.5,14.1,8.3,14,8,14z"/>%3C/svg>'); +} + +.mapboxgl-map.mouse-pointer .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: pointer; +} +.mapboxgl-map.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: move; +} +.mapboxgl-map.mouse-add .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: crosshair; +} +.mapboxgl-map.mouse-move.mode-direct_select .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; +} +.mapboxgl-map.mode-direct_select.feature-vertex.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: move; +} +.mapboxgl-map.mode-direct_select.feature-midpoint.mouse-pointer .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: cell; +} +.mapboxgl-map.mode-direct_select.feature-feature.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: move; +} +.mapboxgl-map.mode-static.mouse-pointer .mapboxgl-canvas-container.mapboxgl-interactive { + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; +} + +.mapbox-gl-draw_boxselect { + pointer-events: none; + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + background: rgba(0,0,0,.1); + border: 2px dotted #fff; + opacity: 0.5; +} + +.mapbox-gl-contextmenu { + background-color: white; + border: 1px solid #ccc; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); + padding: 5px; + font-size: 14px; + z-index: 9999; + display: none; + color:black; +} + +.mapbox-gl-contextmenu ul { + list-style: none; + margin: 0; + padding: 0; +} + +.mapbox-gl-contextmenu li { + padding: 8px; + cursor: pointer; +} + +.mapbox-gl-contextmenu li:hover { + background-color: #f0f0f0; +} +`; + +// ��styleԪ����ӵ��ĵ���head���� +document.head.appendChild(style); diff --git a/public/static/libs/mapbox/style/wh_dhgx.json b/public/static/libs/mapbox/style/wh_dhgx.json index 36d0179..c451a27 100644 --- a/public/static/libs/mapbox/style/wh_dhgx.json +++ b/public/static/libs/mapbox/style/wh_dhgx.json @@ -122,10 +122,10 @@ ] }, { - "id": "高清地图", + "id": "高清地图1", "type": "XYZLayer1", "params": { - "id": "高清地图", + "id": "高清地图1", "url": "https://supermap{s}.wh-nf.cn:8090/resource/tms/dhgx/{z}/{x}/{y}.png", "subdomains": ["0", "1", "2", "3","4","5","6","7","8","9","10","11","12","13","14","15"], "minZoom": 1, @@ -143,6 +143,29 @@ "params": [] } ] + }, + { + "id": "高清地图", + "type": "XYZLayer1", + "params": { + "id": "高清地图", + "url": "https://supermap{s}.wh-nf.cn:8090/resource/tms/xi_an_jichang/{z}/{x}/{y}.png", + "subdomains": ["0", "1", "2", "3","4","5","6","7","8","9","10","11","12","13","14","15"], + "minZoom": 1, + "maxZoom": 18 + }, + "methods": [ + { + "name": "addTo", + "params": [ + "''||map" + ] + }, + { + "name": "show", + "params": [] + } + ] } ], "l7": [