CAD如今在各个领域均得到了普遍的应用并大大提高了工程技术人员的工作效率。在桌面端，AutoCAD测量工具已经非常强大；然后在Web端，如何准确、快速的对CAD图在Web进行测量呢?
能Web在线打开AutoCAD图形
测量距离
测量面积
测量角度
坐标标注
测量时能捕捉Web端CAD图形上面的坐标，提高准确度
测量时能对捕捉进行开关启用
测量时能启用正交模式
测量时能自定义右键菜单功能
能进行连续测量
测量结束后，能删除已测量的结果
如果在Web网页端展示CAD图形(唯杰地图云端图纸管理平台 https://vjmap.com/app/cloud),这个在前面的博文中已讲过，这里不再重复，有需要的朋友可下载工程源代码研究下。
在测量过程中，按Alt键可开启关闭捕捉；按Ctrl键可启用正交模式；按退格键可删除上一个点；按ESC键取消测量；按Enter键结束测量; 按右键弹出上下文菜单
1 import vjmap, { Map } from 'vjmap' 2 import { sleep } from '~/utils/ui'; 3 import { getMapSnapPoints } from './snap'; 4 let snapObj: any; // 设置的捕捉的实体 5 let curMeasureCmd: string; // 当前测量命令 6 export async function runMeasureCmd(map: Map, cmd: string) { 7 curMeasureCmd = cmd; 8 if (cmd != "measureCancel") { 9 // 先结束当前测量 10 await measureCancel(map); 11 if (!snapObj) { 12 // 获取地图上的捕捉点 13 snapObj = {}; 14 getMapSnapPoints(map, snapObj); 15 } 16 } 17 switch (cmd) { 18 case "measureDist": 19 measureDistLoop(map, snapObj); 20 break; 21 case "measureArea": 22 measureAreaLoop(map, snapObj); 23 break; 24 case "measureAngle": 25 measureAngleLoop(map, snapObj); 26 break; 27 case "measureCoordinate": 28 measureCoordinateLoop(map, snapObj); 29 break; 30 case "measureCancel": 31 await measureCancel(map); 32 break; 33 } 34 } 35 ? 36 // 结束绘制 37 const measureCancel = async (map: Map)=> { 38 // 连续发送取消键，第一次取消当前绘制，第二次退出测量 39 map.fire("keyup", {keyCode:27}); 40 await sleep(100); 41 map.fire("keyup", {keyCode:27}); 42 await sleep(100); 43 map.setIsInteracting(false); // 没有进行交互操作了 44 } 45 ? 46 let popup: vjmap.Popup | null; 47 const setPopupText = (text: string, map: Map) => { 48 if (text) { 49 if (!popup) { 50 popup = new vjmap.Popup({ 51 className: "my-custom-popup", 52 closeOnClick: false, 53 closeButton: false 54 }) 55 .setHTML(text) 56 .setMaxWidth("500px") 57 .trackPointer() 58 .addTo(map) 59 } 60 else { 61 popup.setHTML(text); 62 } 63 } else { 64 // 如果为空时，则删除popup 65 if (popup) { 66 popup.setLngLat([0,0]); // 取消trackPointer 67 popup.remove(); 68 popup = null; 69 } 70 } 71 ? 72 } 73 // 测量距离循环，直至按ESC键取消，否则测量完一条后，继续测量下一条 74 const measureDistLoop = async (map: Map, snapObj: any)=> { 75 while(true) { 76 let res = await measureDist(map, snapObj); 77 if (res.exit === true) break; 78 if (curMeasureCmd != "measureDist") break; 79 } 80 } 81 ? 82 // 测量距离 83 const measureDist = async (map: Map, snapObj: any)=> { 84 let isDrawing = false; 85 let line = await vjmap.Draw.actionDrawLineSting(map, { 86 api: { 87 getSnapFeatures: snapObj //要捕捉的数据项在后面，通过属性features赋值 88 }, 89 updatecoordinate: (e: any) => { 90 if (!e.lnglat) return; 91 isDrawing = true; 92 const co = map.fromLngLat(e.feature.coordinates[e.feature.coordinates.length - 1]); 93 let html = `【测量距离】当前坐标:<span > ${co.x.toFixed(2)}, ${co.y.toFixed(2)}</span>`; 94 if (e.feature.coordinates.length == 1) { 95 html += "<br/>请指定要测量的第一点的坐标位置" 96 } else { 97 let len = e.feature.coordinates.length; 98 html += `<br/>按Alt键取捕捉; Ctrl键启用正交; 退格键删除上一个点` 99 html += `<br/>距上一点距离: <span >${getDist(map, [e.feature.coordinates[len - 2], e.feature.coordinates[len -1]])}</span>`100 html += `; 当前总的距离: <span >${getDist(map, e.feature.coordinates)}</span>`101 }102 setPopupText(html, map)103 },104 contextMenu: (e: any) => {105 new vjmap.ContextMenu({106 event: e.event.originalEvent,107 theme: "dark", //light108 width: "250px",109 items: [110 {111 label: '确认',112 onClick: () => {113 // 给地图发送Enter键消息即可取消，模拟按Enter键114 map.fire("keyup", {keyCode:13})115 setPopupText("", map);116 }117 },118 {119 label: '取消',120 onClick: () => {121 // 给地图发送ESC键消息即可取消，模拟按ESC键122 map.fire("keyup", {keyCode:27})123 setPopupText("", map);124 }125 },{126 label: '删除上一个点',127 onClick: () => {128 // 给地图发送退格键Backspace消息即可删除上一个点，模拟按Backspace键129 map.fire("keyup", {keyCode:8})130 }131 },{132 label: '结束测距',133 onClick: () => {134 // 给地图发送ESC键消息即可取消，模拟按ESC键135 map.fire("keyup", {keyCode:27})136 isDrawing = false;137 setPopupText("", map);138 }139 }140 ]141 });142 ?143 }144 });145 if (line.cancel) {146 setPopupText("", map);147 return {148 cancel: true,149 exit: isDrawing === false // 如果还没有绘制，就取消的话，就结束测距150 };// 取消操作151 }152 ?153 let color = vjmap.randomColor();154 let polyline = new vjmap.Polyline({155 data: line.features[0].geometry.coordinates,156 lineColor: color,157 lineWidth: 2158 });159 polyline.addTo(map);160 addMarkersToLine(map, line.features[0].geometry.coordinates, color, polyline.sourceId || "", snapObj);161 return {162 polyline163 };164 }165 ?166 ?167 // 给线的加个点加个测量的结果值168 const addMarkersToLine = (map: Map, coordinates: Array<[number, number]>, color: string, sourceId: string, snapObj: any) => {169 let markerTexts: any = [];170 for(let i = 1; i < coordinates.length; i++) {171 let text = new vjmap.Text({172 text: getDist(map, coordinates.slice(0, i + 1)),173 anchor: "left",174 offset: [3, 0], // x,y 方向像素偏移量175 style:{ // 自定义样式176 'cursor': 'pointer',177 'opacity': 0.8,178 'padding': '6px',179 'border-radius': '12px',180 'background-color': color,181 'border-width': 0,182 'box-shadow': '0px 2px 6px 0px rgba(97,113,166,0.2)',183 'text-align': 'center',184 'font-size': '14px',185 'color': `#${color.substring(1).split("").map(c => (15 - parseInt(c,16)).toString(16)).join("")}`,186 }187 });188 text.setLngLat(coordinates[i]).addTo(map);189 markerTexts.push(text);190 }191 // 给第一个点加一个marker用来删除192 const deletePng = "delete.png";193 let el = document.createElement('div');194 el.className = 'marker';195 el.style.backgroundImage =196 `url(${deletePng})`;197 el.style.width = '20px';198 el.style.height = '20px';199 el.style.backgroundSize = '100%';200 el.style.cursor = "pointer";201 ?202 el.addEventListener('click', function (e) {203 map.removeSourceEx(sourceId); // 删除绘制的线204 markerTexts.forEach((m: any) => m.remove());205 markerTexts = [];206 ?207 // 多点了下，给地图发送退格键Backspace消息即可删除上一个点，模拟按Backspace键208 map.fire("keyup", {keyCode:8})209 });210 // Add markers to the map.211 let deleteMarker = new vjmap.Marker({212 element: el,213 anchor: 'right'214 });215 deleteMarker.setLngLat(coordinates[0])216 .setOffset([-5, 0])217 .addTo(map);218 markerTexts.push(deleteMarker)219 ?220 // 把坐标加进捕捉数组中。221 addSnapCoordinates(snapObj, coordinates);222 }223 // 得到距离值224 const getDist = (map: Map, coordinates: Array<[number, number]>) => {225 let result = vjmap.Math2D.lineDist(map.fromLngLat(coordinates));226 let unit = "m";227 if (result >= 1000) {228 result /= 1000;229 unit = "km";230 } else if (result < 0.01) {231 result *= 100;232 unit = "cm";233 }234 return result.toFixed(2) + " " + unit;235 }236 // 增加捕捉点237 const addSnapCoordinates = (snapObj: any, coordinates: Array<[number, number]>) => {238 snapObj.features.push({239 type: "Feature",240 geometry: {241 type: "LineString",242 coordinates: [...coordinates]243 }244 })245 }246 ?247 ?248 ?249 // 测量面积250 const measureArea = async (map: Map, snapObj: any)=> {251 let isDrawing = false;252 let poly = await vjmap.Draw.actionDrawPolygon(map, {253 api: {254 getSnapFeatures: snapObj //要捕捉的数据项在后面，通过属性features赋值255 },256 updatecoordinate: (e: any) => {257 if (!e.lnglat) return;258 isDrawing = true;259 const co = map.fromLngLat(e.feature.coordinates[0][e.feature.coordinates.length - 1]);260 let html = `【测量面积】当前坐标:<span > ${co.x.toFixed(2)}, ${co.y.toFixed(2)}</span>`;261 if (e.feature.coordinates[0].length == 1) {262 html += "<br/>请指定要测量的第一点的坐标位置"263 } else {264 html += `<br/>按Alt键取捕捉; Ctrl键启用正交; 退格键删除上一个点`265 html += `<br/>当前面积: <span >${getArea(map, e.feature.coordinates[0])}</span>`266 }267 setPopupText(html, map)268 },269 contextMenu: (e: any) => {270 new vjmap.ContextMenu({271 event: e.event.originalEvent,272 theme: "dark", //light273 width: "250px",274 items: [275 {276 label: '确认',277 onClick: () => {278 // 给地图发送Enter键消息即可取消，模拟按Enter键279 map.fire("keyup", {keyCode:13})280 setPopupText("", map);281 }282 },283 {284 label: '取消',285 onClick: () => {286 // 给地图发送ESC键消息即可取消，模拟按ESC键287 map.fire("keyup", {keyCode:27})288 setPopupText("", map);289 }290 },{291 label: '删除上一个点',292 onClick: () => {293 // 给地图发送退格键Backspace消息即可删除上一个点，模拟按Backspace键294 map.fire("keyup", {keyCode:8})295 }296 },{297 label: '结束测面积',298 onClick: () => {299 // 给地图发送ESC键消息即可取消，模拟按ESC键300 map.fire("keyup", {keyCode:27})301 isDrawing = false;302 setPopupText("", map);303 }304 }305 ]306 });307 ?308 }309 });310 if (poly.cancel) {311 debugger312 setPopupText("", map);313 return {314 cancel: true,315 exit: isDrawing === false // 如果还没有绘制，就取消的话，就结束测距316 };// 取消操作317 }318 ?319 let color = vjmap.randomColor();320 let polygon = new vjmap.Polygon({321 data: poly.features[0].geometry.coordinates[0],322 fillColor: color,323 fillOpacity: 0.4,324 fillOutlineColor: color,325 });326 polygon.addTo(map);327 addMarkersToPolygon(map, poly.features[0].geometry.coordinates[0], color, polygon.sourceId || "", snapObj);328 return {329 polygon330 };331 }332 ?333 // 测量面积循环，直至按ESC键取消，否则测量完一条后，继续测量下一条334 const measureAreaLoop = async (map: Map, snapObj: any)=> {335 while(true) {336 let res = await measureArea(map, snapObj);337 if (res.exit === true) break;338 if (curMeasureCmd != "measureArea") break;339 }340 }341 ?342 // 给加个测量的结果值343 const addMarkersToPolygon = (map: Map, coordinates: Array<[number, number]>, color: string, sourceId: string, snapObj: any) => {344 let markerTexts: any = [];345 const center = vjmap.polygonCentroid(map.fromLngLat(coordinates));346 let text = new vjmap.Text({347 text: getArea(map, coordinates),348 anchor: "center",349 offset: [0, 0], // x,y 方向像素偏移量350 style:{ // 自定义样式351 'cursor': 'pointer',352 'opacity': 0.8,353 'padding': '6px',354 'border-radius': '12px',355 'background-color': `#${color.substring(1).split("").map(c => (15 - parseInt(c,16)).toString(16)).join("")}`,356 'border-width': 0,357 'box-shadow': '0px 2px 6px 0px rgba(97,113,166,0.2)',358 'text-align': 'center',359 'font-size': '14px',360 'color': color,361 }362 });363 text.setLngLat(map.toLngLat(center)).addTo(map);364 markerTexts.push(text);365 // 给第一个点加一个marker用来删除366 const deletePng = = "delete.png";367 let el = document.createElement('div');368 el.className = 'marker';369 el.style.backgroundImage =370 `url(${deletePng})`;371 el.style.width = '20px';372 el.style.height = '20px';373 el.style.backgroundSize = '100%';374 el.style.cursor = "pointer";375 ?376 el.addEventListener('click', function (e) {377 map.removeSourceEx(sourceId); // 删除绘制的线378 markerTexts.forEach((m: any) => m.remove());379 markerTexts = [];380 });381 // Add markers to the map.382 let deleteMarker = new vjmap.Marker({383 element: el,384 anchor: 'right'385 });386 deleteMarker.setLngLat(coordinates[0])387 .setOffset([-5, 0])388 .addTo(map);389 markerTexts.push(deleteMarker)390 ?391 // 把坐标加进捕捉数组中。392 addSnapCoordinates(snapObj, coordinates);393 }394 // 得到面积值395 const getArea = (map: Map, coordinates: Array<[number, number]>) => {396 let result = vjmap.calcPolygonArea(map.fromLngLat(coordinates));397 let unit = "m2";398 if (result >= 1e6) {399 result /= 1e6;400 unit = "km2";401 } else if (result < 1.0/1e4) {402 result *= 1e4;403 unit = "cm2";404 }405 return result.toFixed(2) + " " + unit;406 }407 ?408 ?409 ?410 // 测量角度411 const measureAngle = async (map: Map, snapObj: any)=> {412 let isDrawing = false;413 let line = await vjmap.Draw.actionDrawLineSting(map, {414 pointCount: 3,// 只需三个点，绘制完三个点后，自动结束415 api: {416 getSnapFeatures: snapObj //要捕捉的数据项在后面，通过属性features赋值417 },418 updatecoordinate: (e: any) => {419 if (!e.lnglat) return;420 isDrawing = true;421 const co = map.fromLngLat(e.feature.coordinates[e.feature.coordinates.length - 1]);422 let html = `【测量角度】当前坐标:<span > ${co.x.toFixed(2)}, ${co.y.toFixed(2)}</span>`;423 if (e.feature.coordinates.length == 1) {424 html += "<br/>请指定要测量的第一点的坐标位置"425 } else {426 let len = e.feature.coordinates.length;427 html += `<br/>按Alt键取捕捉; Ctrl键启用正交; 退格键删除上一个点`428 html += `<br/>当前角度: <span >${getAngle(map, e.feature.coordinates).angle}</span>`429 }430 setPopupText(html, map)431 },432 contextMenu: (e: any) => {433 new vjmap.ContextMenu({434 event: e.event.originalEvent,435 theme: "dark", //light436 width: "250px",437 items: [438 {439 label: '确认',440 onClick: () => {441 // 给地图发送Enter键消息即可取消，模拟按Enter键442 map.fire("keyup", {keyCode:13})443 setPopupText("", map);444 }445 },446 {447 label: '取消',448 onClick: () => {449 // 给地图发送ESC键消息即可取消，模拟按ESC键450 map.fire("keyup", {keyCode:27})451 setPopupText("", map);452 }453 },{454 label: '删除上一个点',455 onClick: () => {456 // 给地图发送退格键Backspace消息即可删除上一个点，模拟按Backspace键457 map.fire("keyup", {keyCode:8})458 }459 },{460 label: '结束测角度',461 onClick: () => {462 // 给地图发送ESC键消息即可取消，模拟按ESC键463 map.fire("keyup", {keyCode:27})464 isDrawing = false;465 setPopupText("", map);466 }467 }468 ]469 });470 ?471 }472 });473 if (line.cancel) {474 setPopupText("", map);475 return {476 cancel: true,477 exit: isDrawing === false // 如果还没有绘制，就取消的话，就结束测距478 };// 取消操作479 }480 ?481 let color = vjmap.randomColor();482 let polyline = new vjmap.Polyline({483 data: line.features[0].geometry.coordinates,484 lineColor: color,485 lineWidth: 2486 });487 polyline.addTo(map);488 addMarkersToAngle(map, line.features[0].geometry.coordinates, color, polyline.sourceId || "", snapObj);489 return {490 polyline491 };492 }493 ?494 // 测量角度循环，直至按ESC键取消，否则测量完一条后，继续测量下一条495 const measureAngleLoop = async (map: Map, snapObj: any)=> {496 while(true) {497 let res = await measureAngle(map, snapObj);498 if (res.exit === true) break;499 if (curMeasureCmd != "measureAngle") break;500 }501 }502 ?503 ?504 ?505 // 给加个测量的结果值506 const addMarkersToAngle = (map: Map, coordinates: Array<[number, number]>, color: string, sourceId: string, snapObj: any) => {507 if (coordinates.length < 3) return;508 let markerTexts: any = [];509 let points = map.fromLngLat(coordinates);510 let textPoint = coordinates[1];511 let ang = getAngle(map, coordinates);512 // 绘制注记圆弧513 const cirleArcPath = vjmap.getCirclePolygonCoordinates(514 points[1],515 points[1].distanceTo(points[0]) / 4.0, 36,516 ang.startAngle, ang.endAngle, false);517 let path = new vjmap.Polyline({518 data: map.toLngLat(cirleArcPath),519 lineColor: color,520 lineWidth: 2521 });522 path.addTo(map);523 markerTexts.push(path)524 ?525 // @ts-ignore526 let arcPoints = path.getData().features[0].geometry.coordinates;527 let arcMid = arcPoints[Math.ceil(arcPoints.length / 2)];// 取中点528 let textAngle = vjmap.radiansToDegrees(-map.fromLngLat(arcMid).angleTo(points[1])) + 90;529 if (textAngle > 90) textAngle += 180;530 else if (textAngle > 270) textAngle -= 180;531 let text = new vjmap.Text({532 text: ang.angle as string,533 anchor: "center",534 rotation: textAngle,535 offset: [0, 0], // x,y 方向像素偏移量536 style:{ // 自定义样式537 'cursor': 'pointer',538 'opacity': 0.8,539 'padding': '6px',540 'border-radius': '12px',541 'background-color': color,542 'border-width': 0,543 'box-shadow': '0px 2px 6px 0px rgba(97,113,166,0.2)',544 'text-align': 'center',545 'font-size': '14px',546 'color': `#${color.substring(1).split("").map(c => (15 - parseInt(c,16)).toString(16)).join("")}`,547 }548 });549 text.setLngLat(arcMid).addTo(map);550 markerTexts.push(text);551 // 给第一个点加一个marker用来删除552 const deletePng = = "delete.png";553 let el = document.createElement('div');554 el.className = 'marker';555 el.style.backgroundImage =556 `url(${deletePng})`;557 el.style.width = '20px';558 el.style.height = '20px';559 el.style.backgroundSize = '100%';560 el.style.cursor = "pointer";561 ?562 el.addEventListener('click', function (e) {563 map.removeSourceEx(sourceId); // 删除绘制的线564 markerTexts.forEach((m: any) => m.remove());565 markerTexts = [];566 });567 // Add markers to the map.568 let deleteMarker = new vjmap.Marker({569 element: el,570 anchor: 'right'571 });572 deleteMarker.setLngLat(coordinates[1])573 .setOffset([-5, 0])574 .addTo(map);575 markerTexts.push(deleteMarker)576 ?577 // 把坐标加进捕捉数组中。578 addSnapCoordinates(snapObj, coordinates);579 }580 // 得到角度值581 const getAngle = (map: Map, coordinates: Array<[number, number]>) => {582 let points = map.fromLngLat(coordinates);583 if (points.length < 3) return { angle: 0.0 }584 let angle1 = points[0].angleTo(points[1]);585 let angle2 = points[2].angleTo(points[1]);586 let angle = angle1 - angle2;587 let deg = vjmap.radiansToDegrees(angle);//弧度转角度588 let dir = true;589 if (deg < 0) {590 deg = -deg;591 dir = !dir;592 }593 if (deg > 180) {594 deg = 360 - deg;595 dir = !dir;596 }597 let startAngle = !dir ? vjmap.radiansToDegrees(angle1) : vjmap.radiansToDegrees(angle2);598 let endAngle = dir ? vjmap.radiansToDegrees(angle1) : vjmap.radiansToDegrees(angle2);599 startAngle = startAngle < 0 ? 360 + startAngle : startAngle;600 endAngle = endAngle < 0 ? 360 + endAngle : endAngle;601 if (endAngle < startAngle) {602 endAngle += 360;603 }604 return {605 angle: deg.toFixed(2) + "°",606 dir,607 startAngle,608 endAngle609 }610 }611 ?612 ?613 // 测量坐标614 const measureCoordinate = async (map: Map, snapObj: any)=> {615 let isDrawing = false;616 let point = await vjmap.Draw.actionDrawPoint(map, {617 api: {618 getSnapFeatures: snapObj //要捕捉的数据项在后面，通过属性features赋值619 },620 updatecoordinate: (e: any) => {621 if (!e.lnglat) return;622 isDrawing = true;623 const co = map.fromLngLat(e.lnglat);624 let html = `【测量坐标】当前坐标:<span > ${co.x.toFixed(2)}, ${co.y.toFixed(2)}</span>`;625 setPopupText(html, map)626 },627 contextMenu: (e: any) => {628 new vjmap.ContextMenu({629 event: e.event.originalEvent,630 theme: "dark", //light631 width: "250px",632 items: [633 {634 label: '确认',635 onClick: () => {636 // 给地图发送Enter键消息即可取消，模拟按Enter键637 map.fire("keyup", {keyCode:13})638 setPopupText("", map);639 }640 },641 {642 label: '取消',643 onClick: () => {644 // 给地图发送ESC键消息即可取消，模拟按ESC键645 map.fire("keyup", {keyCode:27})646 setPopupText("", map);647 }648 },649 {650 label: '结束测坐标',651 onClick: () => {652 // 给地图发送ESC键消息即可取消，模拟按ESC键653 map.fire("keyup", {keyCode:27})654 isDrawing = false;655 setPopupText("", map);656 }657 }658 ]659 });660 ?661 }662 });663 if (point.cancel) {664 setPopupText("", map);665 return {666 cancel: true,667 exit: isDrawing === false668 };// 取消操作669 }670 ?671 addMarkersToCoord(map, point.features[0].geometry.coordinates);672 return {673 point674 };675 }676 ?677 // 测量坐标循环，直至按ESC键取消678 const measureCoordinateLoop = async (map: Map, snapObj: any)=> {679 while(true) {680 let res = await measureCoordinate(map, snapObj);681 if (res.exit === true) break;682 if (curMeasureCmd != "measureCoordinate") break;683 }684 }685 ?686 ?687 ?688 // 给加个点加个测量的结果值689 const addMarkersToCoord = (map: Map, coordinates: [number, number]) => {690 let markerTexts: any = [];691 let co = map.fromLngLat(coordinates);692 let content = `X: ${co.x.toFixed(2)}, Y: ${co.y.toFixed(2)}`693 let marker = createLeaderMarker(map, coordinates, content);694 markerTexts.push(marker);695 ?696 // 给第一个点加一个marker用来删除697 const deletePng = "delete.png";698 let el = document.createElement('div');699 el.className = 'marker';700 el.style.backgroundImage =701 `url(${deletePng})`;702 el.style.width = '20px';703 el.style.height = '20px';704 el.style.backgroundSize = '100%';705 el.style.cursor = "pointer";706 ?707 el.addEventListener('click', function (e) {708 markerTexts.forEach((m: any) => m.remove());709 markerTexts = [];710 ?711 });712 // Add markers to the map.713 let deleteMarker = new vjmap.Marker({714 element: el,715 anchor: 'right'716 });717 deleteMarker.setLngLat(coordinates)718 .setOffset([-5, 0])719 .addTo(map);720 markerTexts.push(deleteMarker)721 ?722 }723 ?724 // 引线标记725 const createLeaderMarker = (map: Map, lnglat: [number, number], content: string) => {726 let el = document.createElement('div');727 el.className = 'marker';728 el.style.position = 'absolute'729 ?730 let img = document.createElement("div");731 img.style.backgroundImage = 'bk.png';732 img.style.backgroundRepeat = "no-repeat"733 img.style.height = '37px';734 img.style.width = '100px';735 img.style.position = 'absolute';736 img.style.left = '-3px';737 img.style.bottom = '-3px';738 img.style.right = "0px"739 el.appendChild(img);740 ?741 let panel = document.createElement("div");742 panel.style.height = '50px';743 panel.style.width = '350px';744 panel.style.position = 'absolute';745 panel.style.left = '97px';746 panel.style.top = '-60px';747 panel.style.border = "solid 1px #8E0EFF";748 panel.style.background = 'linear-gradient(#00ffff, #00ffff) left top, linear-gradient(#00ffff, #00ffff) left top, linear-gradient(#00ffff, #00ffff) right bottom, linear-gradient(#00ffff, #00ffff) right bottom';749 panel.style.backgroundRepeat = 'no-repeat';750 panel.style.backgroundColor ='rgba(87,255,255, 0.3)'751 panel.style.backgroundSize = '1px 6px, 6px 1px';752 panel.style.fontSize = '18px';753 panel.style.color = '#ffffff';754 panel.innerHTML = `<div style='margin: 15px 5px 15px 5px'>${content}</div>`;755 el.appendChild(panel);756 ?757 // Add markers to the map.758 let marker = new vjmap.Marker({759 element: el,760 anchor: "bottom-left"761 })762 marker.setLngLat(lnglat)763 .addTo(map);764 return marker765 }766 ?
