地图API_卫星地图_离线地图_地图可视化_离线地图二次开发

运行重置
            <!--
 * @Author: 1286780926@qq.com
 * @Date: 2023-06-20 10:30:40
 * @LastEditors: 13307306924 1286780926@qq.com
 * @LastEditTime: 2023-06-20 11:00:30
 * @FilePath: \test\bmgl_点击弹窗\index.html
 * @Description: 
 * 
 * Copyright (c) 2023 by bigemap/${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html>

<head>
  <meta charset='UTF-8' />
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <link href='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
  <script src='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #container {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    #result {
      background: whitesmoke;
      border: 1px solid deepskyblue;
      padding: 5px;
      border-radius: 5px;
      /*是否阻止鼠标事件*/
      pointer-events: none;
    }

    .bmgl-widget-credits {
      display: none
    }
  </style>
  <title>part_test</title>
</head>

<body>
  <div id="result">当前选中 ：</div>
  <div id='container'></div>
  <script type="module">
    import divLabel from 'http://www.bigemap.com/Public/js/3d/div.min.js'
    // import divLabel from './div.js'
    bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
    var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.dc-tian-w-satellite', requestRenderMode: false });
    window.viewer = viewer;//避免影响示例页面的加载条隐藏
    //取消默认的点击事件
    viewer.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);
    //禁止默认的地形遮挡
    viewer.scene.globe.depthTestAgainstTerrain = false;
    var handler = new bmgl.ScreenSpaceEventHandler(viewer.canvas);
    var val = {
      viewer: viewer,
      position: [104, 30],
      height: 0,
      offset: [0, 20],
      dom: document.getElementById('result')
    }
    var layer = new divLabel(val);
    layer.toggleShow(false);
    handler.setInputAction(function (e) {
      var entity = viewer.scene.pick(e.position);
      if (entity) {
        document.getElementById('result').innerHTML = '当前选中 ：' + entity.id.id;
        layer.changePosition(entity.id.position.getValue())
        layer.toggleShow(true);
      } else {
        layer.toggleShow(false);
      }
    }, bmgl.ScreenSpaceEventType.LEFT_CLICK);
    var pinBuilder = new bmgl.PinBuilder();
    for (let i = 1; i <= 15; i++) {
      viewer.entities.add({
        id: i,//设置一个id,方便进行点击判断
        position: bmgl.Cartesian3.fromDegrees(Math.random() * 30 + 100, Math.random() * 60 + 10),
        billboard: {
          image: `http://www.bigemap.com/mapoffline/marker/${i}.png`,
          heightReference: bmgl.HeightReference.CLAMP_TO_GROUND,
        },
        label: {
          scale: 1,
          heightReference: bmgl.HeightReference.CLAMP_TO_GROUND,
          fillColor: bmgl.Color.CYAN.withAlpha(0.5),
          text: `Mark${i}`,
          // showBackground: true,
          // backgroundColor: bmgl.Color.AQUA,
          pixelOffset: new bmgl.Cartesian2(0, -40)
        },
      })
    }
    viewer.flyTo(viewer.entities)
    function transformCartesianToWGS84(cartesian) {
      let ellipsoid = bmgl.Ellipsoid.WGS84;
      let cartographic = ellipsoid.cartesianToCartographic(cartesian);
      // var height = viewer.scene.sampleHeight(cartographic);
      return {
        lng: bmgl.Math.toDegrees(cartographic.longitude),
        lat: bmgl.Math.toDegrees(cartographic.latitude),
        alt: cartographic.height
      }
    }
  </script>
</body>

</html>