乐趣区

关于leaflet:leaflet底图样式修改及热力图加载地图打点


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_heatMap"></title>
<!-- <script type="text/javascript" include="randomcolor" src="./js/include-web.js"></script> -->
    <style>
    #heatNumbers, #heatRadius {
        width: 50px;
        display: inline-block;
    }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
    <link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" />
    <link rel="stylesheet" href="./css/MarkerCluster.Default.css" />
    <link rel="stylesheet" href="./css/MarkerCluster.css" />

    
    <script type="text/javascript" src="./js/jquery.min.js"> </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
    <script type="text/javascript" src="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/heatmap.js/2.0.2/heatmap.js"></script>
    <!-- 应用 new HeatmapOverlay -->
    <script src="./js/leaflet-heatmap.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.heat/0.2.0/leaflet-heat.js"></script>

     <!-- 引入 proj4,百度地图用 -->
     <script src="./proj4/proj4.js"></script>
     <script src="./proj4/proj4leaflet.min.js"></script>
    <!-- 加载高德地图 -->
    <script src="./js/leaflet.ChineseTmsProviders.js"></script>

    <!-- 
        互联网地图纠偏插件
        需配合 leaflet.ChineseTmsProviders.js 插件应用
        无需 js 代码,援用后主动纠偏
        纠偏后的坐标为 WGS84
    -->
    <script src="./js/leaflet.mapCorrection.min.js"></script>
    <!-- 点聚合 -->
   <script src="./js/leaflet.markercluster-src.js"></script>
<script src="./js/data.js"></script>
<!-- 批改地图款式 -->
<script src="./js/leaflet-tilelayer-colorizr.js"></script>
<style>
   .leaflet-zoom-animated img {-webkit-filter: invert(50%) grayscale(0.5) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
   -ms-filter: invert(1) grayscale(0.5) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
   -moz-filter: invert(1) grayscale(0.5) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
   filter: invert(1) grayscale(0.5) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(1%) !important;
  }
</style>
</head>
<body style="margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript">
    var map, resultLayer,normal,image,baseLayers;
    var mapMarkers = [];
    var markers;
    addGaodeLayer()

    map = L.map('map', {
        preferCanvas: true,
        center: [34.342329669, 109.000431666],
        layers: [normal],
        maxZoom: 20,
        zoom: 12
    });
    // http://192.168.0.105:9090/img/{z}/{x}/{y}.png // 这个是瓦片地图的地址
    L.tileLayer.colorizr("http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
    maxZoom: 18,
    minZoom: 3,
    colorize: function (pixel) {
    // 这个办法用来调整所有的图片上的 rgb 值,pixel 是图片原有的 rgb 值
    pixel.r += 13;
    pixel.g += 97;
    pixel.b += 190;
    return pixel;
    }
    }).addTo(map);
    
    // L.control.layers(baseLayers, null).addTo(map);

    loadHeatMap();
    function getIcon(type){
        var defaultIcon = L.icon({
            iconUrl: '../src/assets/IC/maker1_gif.webp',
            iconSize: [40, 40],    //  图标的大小【值 1,值 2】为具体你自定义图标的尺寸,比方我图标尺寸是 32×52,示意该图标:宽度 32 像素,高度:52 像素,那么值 1: 就是 32,值 2:就是 52
            iconAnchor: [20, 20],  //  图标将对应标记点的地位 这个是重点,【值 1,值 2】,值 1:为图标坐标第一个值 (即 32) 的一半,值 2:为图标坐标第二个值(即 52)
        });
        return defaultIcon
    }
    function loadHeatMap() {
        var cfg = {
            max: 50,
            radius: 14,
            // scaleRadius: true, // 设置热力点是否平滑过渡
            // useLocalExtrema: true, // 应用部分极值
            blur: 0.95, // 系数越高,突变越平滑,默认是 0.85
            latField: 'lat', 
            lngField: 'lng', // 经度
            valueField: 'count', // 热力点的值
            minOpacity: 0.5,
            gradient: {0.5: 'blue', // [0,0.9)
            0.925: 'skyblue', // [0.9,0.93)
            0.99: 'green',
            0.9950: '#ffea00',
            0.995551: 'orange',
            1.0: 'red'
          }
        }
        var heatPoints = makerData
        resultLayer = new HeatmapOverlay(cfg);
        console.log('heatPoints==', heatPoints)
        // resultLayer = L.heatLayer(heatPoints, cfg).addTo(map);
        resultLayer.setData({max:50, data: heatPoints});
        map.addLayer(resultLayer);

        // 打点测试
        setMakers(makerData)
    }
    function addGaodeLayer(){
      var normalm = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
          maxZoom: 18,
          minZoom: 5
      });
      var imgm = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
          maxZoom: 18,
          minZoom: 5
      });
      var imga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
          maxZoom: 18,
          minZoom: 5
      });

      normal = L.layerGroup([normalm]),
      image = L.layerGroup([imgm, imga]);

      baseLayers = {
          "地图": normal,
          "影像": image,
      }
    }
    function setMakers(list){markers = L.markerClusterGroup(); // 标记点位组
        for (var i = 0; i < list.length; i++) {var currentItem = list[i];
            var title = currentItem.count;
            var marker = L.marker(new L.LatLng(currentItem.lat, currentItem.lng), {title: '详情', icon :getIcon() });
            let showItem = [
                {
                    key: '经度',
                    val: currentItem.lng
                },
                {
                    key: '纬度',
                    val: currentItem.lat
                }
            ]
            let basicInfo = ''
            for (let i = 0; i < showItem.length; i++) {
              basicInfo +=
              '<div class="info_row"><span class="info_lable">' +
                showItem[i].key +
                ':</span>' +
                showItem[i].val +
                '</div>'
            }
            let myTitle = '<div class="info_title"> 点位详情 </div>'
            window.basicDom =
              '<div class="beauty-scroll">' +
              myTitle +
              basicInfo +
              '<div id="map_video_box"class="video_play_block">' +
              `<div id="play_video_block" style="width:100%;height:99%;"></div>` +
              '</div>' +
            '</div>'
            marker.bindPopup(basicDom);
            markers.addLayer(marker);
        }

        // map.addLayer(markers);
        // for (var i = 0; i < list.length; i++) {//     var a = list[i];
        //     var data = a
        //     var marker = L.marker(new L.LatLng(a.lat, a.lng), {title: '' , icon :getIcon(a.index)});
        //    window.currentData = data
        //     marker.bindPopup(basicDom); // 放弃所有弹出窗口关上
        //     markers.addLayer(marker); //
        //     mapMarkers.push(marker)
        // }
        
        map.addLayer(markers);
    }

</script>
</body>
</html>
退出移动版