Question

import L from '@supermap/iclient-leaflet/node_modules/leaflet';
import {tiledMapLayer} from '@supermap/iclient-leaflet';
import $ from 'jquery'
import {useEffect} from "react";



function Heatmap(){
    useEffect(()=>{

      if (document.querySelector('#map').children.length > 0) return;
      var url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
      var map = L.map('map', {
          // crs: L.CRS.EPSG4326,
          center: [30.24, 120.15],
          maxZoom: 18,
          zoom: 10
      });
      var layer = new tiledMapLayer(url)
      layer.addTo(map);

      $.get('../assets/hangzhou-tracks.json', function (data) {
        var points = [].concat.apply([], data.map(function (track) {
            return track.map(function (seg) {
                return seg.coord.concat([1]);
            });
        }));
        var option=null;
        option = {

            visualMap: {
                show: false,
                top: 'top',
                min: 0,
                max: 5,
                seriesIndex: 0,
                calculable: true,
                inRange: {
                    color: ['blue', 'blue', 'green', 'yellow', 'red']
                }
            },
            series: [{
                type: 'heatmap',
                coordinateSystem: 'leaflet',
                data: points,
                pointSize: 5,
                blurSize: 6
            }]
        };
        new L.supermap.EchartsLayer(option).addTo(map);
    });


    },[])

    return (
        <>
          <div id="map"></div>
        </>
      );
}

Answer 1

您好，我们只能帮您支持超图系产品使用的问题，比如vue或react中如何引入iClient，

但是在React中引入jQuery这个我们就没法帮您支持到，希望可以理解。

比如React引入iClient for leaflet可以参考：

https://blog.csdn.net/supermapsupport/article/details/119875518

希望可以帮助到您。

Comments

这个就是iClient for leaflet里的示例代码，我写在react中就显示$未定义了，我想知道怎么解决这个问题

---

你如果使用 react的话，不是npm安装，而是本地下载包引用的话，

include-web.js或include-leaflet.js里面内含引用这种引法是不行的， react本身不支持。

您可以打开这两个js文件，把里面您需要的都js和css挑出来，直接在您代码里引。