Mapbox添加行政区矢量图层，Mapbox添加分级设色图层，Mapbox添加文本标记图层，Mapbox给行政区矢量数据添加名称，Mapbox自定义鼠标悬浮框，Mapbox添加天地图底图

id="article_content" class="article_content clearfix"> id="content_views" class="htmledit_views">

目录

一、Mapbox简介

二、Mapbox添加地图、各数据图层和功能的思路

2.1、添加天地图底图

2.2、Mapbox添加行政区矢量图层

2.3、Mapbox添加分级设色图层

2.4、Mapbox添加文本标记图层

2.5、Mapbox自定义鼠标悬浮框

三、最终效果及代码展示

3.1、最终效果

3.2、完整代码展示：

3.2.1、map.vue（map所在的组件）：

3.2.2、mapbox.js：

四、总结

一、Mapbox简介

        Mapbox 是一家提供定制地图服务的公司，它允许开发者和设计师通过其平台创建和部署个性化的地图。Mapbox 提供了一整套地图工具和API，使得用户可以轻松地在网站、移动应用和各种设备上集成地图服务。

        以下是Mapbox的一些主要特点：

  1. 定制化：Mapbox 允许用户根据自己的品牌和设计需求定制地图样式，包括颜色、图标、字体等。

  2. 数据驱动：Mapbox 支持使用各种数据源，包括开放街道地图（OpenStreetMap）数据，以及其他商业和私有数据。

  3. 实时更新：Mapbox 提供的地图服务可以实时更新，确保地图信息的准确性和最新性。

  4. 多平台支持：Mapbox 的API和服务支持多种平台和语言，包括Web、iOS、Android等。

  5. 交互式地图：Mapbox 支持创建交互式地图，用户可以添加图层、标记、路径、热力图等。

  6. 位置服务：Mapbox 提供了一套完整的位置服务，包括地理编码、逆地理编码、方向和路由规划等。

  7. 地图分析：Mapbox 提供地图分析工具，帮助用户理解用户行为和地图数据。

  8. 社区和生态系统：Mapbox 拥有一个活跃的开发者社区，提供了大量的教程、文档和论坛支持。

  9. 安全性：Mapbox 提供了安全措施，如访问控制和数据加密，以保护用户数据的安全。

  10. 可扩展性：Mapbox 的服务设计为可扩展的，可以支持从小规模到大规模的地图应用。

  11. 企业解决方案：Mapbox 为企业提供定制化的解决方案，满足特定业务需求。

  12. 集成第三方服务：Mapbox 可以与许多第三方服务和API集成，如天气、交通、社交网络等。

  13. 地图编辑工具：Mapbox 提供了地图编辑工具，允许用户直接在地图上添加或修改数据。

  14. 地图SDK：Mapbox 提供了软件开发工具包（SDK），使得开发者可以快速地在自己的应用中集成地图功能。

        Mapbox 的服务通常是基于订阅模式的，用户根据自己的使用量和需求选择合适的订阅计划。Mapbox 的服务广泛应用于交通、物流、房地产、旅游、城市规划等多个领域。通过Mapbox，用户可以创建出既美观又功能强大的地图应用。

二、Mapbox添加地图、各数据图层和功能的思路

2.1、添加天地图底图

         mapbox导入天地图比较复杂，如下代码所示，配置一个配置项，然后在初始化的时候放到设置底图的位置即可。

  1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1">
class="hljs-ln-code"> class="hljs-ln-line">// 将天地图作为底图
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2">
    • class="hljs-ln-code"> class="hljs-ln-line">const vecUrl =
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line"> // "http://t0.tianditu.gov.cn/vec_w/wmts?tk=yourtoken";
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line"> "http://t0.tianditu.gov.cn/vec_w/wmts?tk=yourtoken";
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">const cvaUrl =
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line"> // "http://t0.tianditu.gov.cn/cva_w/wmts?tk=yourtoken";
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line"> "http://t0.tianditu.gov.cn/cva_w/wmts?tk=yourtoken";
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">//实例化source对象
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line">var tdtVec = {
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line"> //类型为栅格瓦片
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line"> type: "raster",
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line"> tiles: [
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line"> //请求地址
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line"> vecUrl +
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line"> "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line"> ],
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line"> crossOrigin: "anonymous",
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line"> //分辨率
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line"> tileSize: 256,
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line">};
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"> class="hljs-ln-code"> class="hljs-ln-line">var tdtCva = {
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"> class="hljs-ln-code"> class="hljs-ln-line"> type: "raster",
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"> class="hljs-ln-code"> class="hljs-ln-line"> tiles: [
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"> class="hljs-ln-code"> class="hljs-ln-line"> cvaUrl +
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"> class="hljs-ln-code"> class="hljs-ln-line"> "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="26"> class="hljs-ln-code"> class="hljs-ln-line"> ],
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="27"> class="hljs-ln-code"> class="hljs-ln-line"> tileSize: 256,
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="28"> class="hljs-ln-code"> class="hljs-ln-line">};
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="29"> class="hljs-ln-code"> class="hljs-ln-line">var style = {
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="30"> class="hljs-ln-code"> class="hljs-ln-line"> //设置版本号，一定要设置
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="31"> class="hljs-ln-code"> class="hljs-ln-line"> version: 8,
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="32"> class="hljs-ln-code"> class="hljs-ln-line"> //添加来源
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="33"> class="hljs-ln-code"> class="hljs-ln-line"> sources: {
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="34"> class="hljs-ln-code"> class="hljs-ln-line"> tdtVec: tdtVec,
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="35"> class="hljs-ln-code"> class="hljs-ln-line"> tdtCva: tdtCva,
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="36"> class="hljs-ln-code"> class="hljs-ln-line"> },
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="37"> class="hljs-ln-code"> class="hljs-ln-line"> layers: [
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="38"> class="hljs-ln-code"> class="hljs-ln-line"> {
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="39"> class="hljs-ln-code"> class="hljs-ln-line"> //图层id，要保证唯一性
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="40"> class="hljs-ln-code"> class="hljs-ln-line"> id: "tdtVec",
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="41"> class="hljs-ln-code"> class="hljs-ln-line"> //图层类型
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="42"> class="hljs-ln-code"> class="hljs-ln-line"> type: "raster",
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="43"> class="hljs-ln-code"> class="hljs-ln-line"> //数据源
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="44"> class="hljs-ln-code"> class="hljs-ln-line"> source: "tdtVec",
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="45"> class="hljs-ln-code"> class="hljs-ln-line"> //图层最小缩放级数
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="46"> class="hljs-ln-code"> class="hljs-ln-line"> minzoom: 0,
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="47"> class="hljs-ln-code"> class="hljs-ln-line"> //图层最大缩放级数
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="48"> class="hljs-ln-code"> class="hljs-ln-line"> maxzoom: 17,
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="49"> class="hljs-ln-code"> class="hljs-ln-line"> },
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="50"> class="hljs-ln-code"> class="hljs-ln-line"> {
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="51"> class="hljs-ln-code"> class="hljs-ln-line"> id: "tdtCva",
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="52"> class="hljs-ln-code"> class="hljs-ln-line"> type: "raster",
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="53"> class="hljs-ln-code"> class="hljs-ln-line"> source: "tdtCva",
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="54"> class="hljs-ln-code"> class="hljs-ln-line"> minzoom: 0,
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="55"> class="hljs-ln-code"> class="hljs-ln-line"> maxzoom: 17,
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="56"> class="hljs-ln-code"> class="hljs-ln-line"> },
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="57"> class="hljs-ln-code"> class="hljs-ln-line"> ],
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="58"> class="hljs-ln-code"> class="hljs-ln-line"> glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="59"> class="hljs-ln-code"> class="hljs-ln-line">};
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="60"> class="hljs-ln-code"> class="hljs-ln-line">
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="61"> class="hljs-ln-code"> class="hljs-ln-line">export function loadMap(box) {
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="62"> class="hljs-ln-code"> class="hljs-ln-line"> map = new mapboxgl.Map({
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="63"> class="hljs-ln-code"> class="hljs-ln-line"> container: box,
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="64"> class="hljs-ln-code"> class="hljs-ln-line"> // 导入设置好的天地图配置
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="65"> class="hljs-ln-code"> class="hljs-ln-line"> style: style,
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="66"> class="hljs-ln-code"> class="hljs-ln-line"> preserveDrawingBuffer: true,
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="67"> class="hljs-ln-code"> class="hljs-ln-line"> center: [114, 30],
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="68"> class="hljs-ln-code"> class="hljs-ln-line"> zoom: 4,
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="69"> class="hljs-ln-code"> class="hljs-ln-line"> });
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="70"> class="hljs-ln-code"> class="hljs-ln-line">}
    •  class="hide-preCode-box"> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    2.2、Mapbox添加行政区矢量图层

            这个很简单，主要是需要行政区边界的geojson，这个一般是用shpfile文件转化为geojson，可以通过这个在线网站实现：mapshaper

            代码实现，先完成geojson数据源添加，然后添加一个矢量边界图层就可以了。

    1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">export function loadMap(box) {
    2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">  map = new mapboxgl.Map({
    3.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">    container: box,
    4.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">    // style: 'mapbox://styles/mapbox/streets-v11',
    5.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">    // style: 'mapbox://styles/examples/cjgioozof002u2sr5k7t14dim',
    6.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">    style: style,
    7.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">    preserveDrawingBuffer: true,
    8.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">    center: [114, 30],
    9.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line">    zoom: 4,
    10.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line">  });
    11.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line">}
    12.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line"> 
    13.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line">export function addGeoJson() {
    14.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line">  map.on("style.load", () => {
    15.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line">    // 加载 GeoJSON 数据源
    16.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line">    map.addSource("geojsonSource", {
    17.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line">      type: "geojson",
    18.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line">      data: CityData,
    19.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line">    });
    20.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line"> 
    21.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"> class="hljs-ln-code"> class="hljs-ln-line">    // 添加图层来显示行政区划的边界
    22.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"> class="hljs-ln-code"> class="hljs-ln-line">    map.addLayer({
    23.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"> class="hljs-ln-code"> class="hljs-ln-line">      id: "lineLayer",
    24.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"> class="hljs-ln-code"> class="hljs-ln-line">      type: "line",
    25.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"> class="hljs-ln-code"> class="hljs-ln-line">      source: "geojsonSource",
    26.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="26"> class="hljs-ln-code"> class="hljs-ln-line">      paint: {
    27.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="27"> class="hljs-ln-code"> class="hljs-ln-line">        "line-color": "#FFF",
    28.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="28"> class="hljs-ln-code"> class="hljs-ln-line">        "line-width": 1.5,
    29.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="29"> class="hljs-ln-code"> class="hljs-ln-line">      },
    30.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="30"> class="hljs-ln-code"> class="hljs-ln-line">    });
    31.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="31"> class="hljs-ln-code"> class="hljs-ln-line">  });
    32.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="32"> class="hljs-ln-code"> class="hljs-ln-line">}
     class="hide-preCode-box"> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    2.3、Mapbox添加分级设色图层

            分级设色本质是为了直观的体现不同的等级或者不同的数值：

            这里展示的是体现不同的数值的写法：

    1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">export function loadMap(box) {
    2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">  map = new mapboxgl.Map({
    3.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">    container: box,
    4.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">    // style: 'mapbox://styles/mapbox/streets-v11',
    5.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">    // style: 'mapbox://styles/examples/cjgioozof002u2sr5k7t14dim',
    6.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">    style: style,
    7.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">    preserveDrawingBuffer: true,
    8.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">    center: [114, 30],
    9.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line">    zoom: 4,
    10.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line">  });
    11.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line">}
    12.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line"> 
    13.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line">// 根据value值上色
    14.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line">export function paintMap() {
    15.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line">  // 添加图层来上色
    16.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line">  map.addLayer({
    17.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line">    id: "geojsonLayer",
    18.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line">    type: "fill", // 根据你的数据类型设置合适的图层类型，比如 'fill'、'circle'、'line' 等
    19.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line">    source: "geojsonSource",
    20.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line">    paint: {
    21.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"> class="hljs-ln-code"> class="hljs-ln-line">      "fill-color": [
    22.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"> class="hljs-ln-code"> class="hljs-ln-line">        "match",
    23.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"> class="hljs-ln-code"> class="hljs-ln-line">        //在geojson中获取name属性
    24.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"> class="hljs-ln-code"> class="hljs-ln-line">        ["get", "name"],
    25.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"> class="hljs-ln-code"> class="hljs-ln-line">        //将geojson中的name属性与cityValueData进行匹配，得到正确的综合得分，并根据colorRanges的情况上色
    26.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="26"> class="hljs-ln-code"> class="hljs-ln-line">        ...rankingFormatted.reduce((acc, data) => {
    27.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="27"> class="hljs-ln-code"> class="hljs-ln-line">          return [...acc, data.cityName, getColor2(data.score)];
    28.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="28"> class="hljs-ln-code"> class="hljs-ln-line">        }, []),
    29.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="29"> class="hljs-ln-code"> class="hljs-ln-line">        "#000000", // 默认颜色
    30.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="30"> class="hljs-ln-code"> class="hljs-ln-line">      ],
    31.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="31"> class="hljs-ln-code"> class="hljs-ln-line">      "fill-opacity": 1, // 填充透明度
    32.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="32"> class="hljs-ln-code"> class="hljs-ln-line">    },
    33.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="33"> class="hljs-ln-code"> class="hljs-ln-line">  });
    34.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="34"> class="hljs-ln-code"> class="hljs-ln-line">}
    35.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="35"> class="hljs-ln-code"> class="hljs-ln-line"> 
    36.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="36"> class="hljs-ln-code"> class="hljs-ln-line">// 设置颜色范围
    37.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="37"> class="hljs-ln-code"> class="hljs-ln-line">// const colorRange = ['#ADD8E6','#00008B'];
    38.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="38"> class="hljs-ln-code"> class="hljs-ln-line">const colorRange = ["#DBEEF6", "#36869A"];
    39.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="39"> class="hljs-ln-code"> class="hljs-ln-line">const colorRangeMin = ["#E2F0D9", "#385723"];
    40.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="40"> class="hljs-ln-code"> class="hljs-ln-line"> 
    41.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="41"> class="hljs-ln-code"> class="hljs-ln-line">const innovation = ["#fff4f8", "#dc7d61"];
    42.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="42"> class="hljs-ln-code"> class="hljs-ln-line">const operation = ["#e0e5e9", "#73a9d7"];
    43.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="43"> class="hljs-ln-code"> class="hljs-ln-line">const green = ["#e9f0e8", "#80c67d"];
    44.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="44"> class="hljs-ln-code"> class="hljs-ln-line">const share = ["#fff8eb", "#f6bb81"];
    45.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="45"> class="hljs-ln-code"> class="hljs-ln-line">const open = ["#eaebff", "#b67ebd"];
    46.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="46"> class="hljs-ln-code"> class="hljs-ln-line"> 
    47.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="47"> class="hljs-ln-code"> class="hljs-ln-line">// 创建颜色插值函数(综合得分)
    48.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="48"> class="hljs-ln-code"> class="hljs-ln-line">const colorInterpolate = chroma.scale(colorRange).domain([37, 90]);
    49.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="49"> class="hljs-ln-code"> class="hljs-ln-line">// 创建颜色插值函数(单指标得分)
    50.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="50"> class="hljs-ln-code"> class="hljs-ln-line">const colorInterpolateMin = chroma.scale(colorRangeMin).domain([1.5, 20]);
    51.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="51"> class="hljs-ln-code"> class="hljs-ln-line"> 
    52.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="52"> class="hljs-ln-code"> class="hljs-ln-line">const colorInnovation = chroma.scale(innovation).domain([4.1, 17.4]);
    53.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="53"> class="hljs-ln-code"> class="hljs-ln-line">const colorOperation = chroma.scale(operation).domain([9.4, 18.7]);
    54.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="54"> class="hljs-ln-code"> class="hljs-ln-line">const colorGreen = chroma.scale(green).domain([9.2, 18]);
    55.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="55"> class="hljs-ln-code"> class="hljs-ln-line">const colorOpen = chroma.scale(open).domain([1.6, 20]);
    56.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="56"> class="hljs-ln-code"> class="hljs-ln-line">const colorShare = chroma.scale(share).domain([7.5, 20]);
    57.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="57"> class="hljs-ln-code"> class="hljs-ln-line"> 
    58.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="58"> class="hljs-ln-code"> class="hljs-ln-line">// 根据城市值获取对应颜色
    59.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="59"> class="hljs-ln-code"> class="hljs-ln-line">function getColor2(value, type) {
    60.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="60"> class="hljs-ln-code"> class="hljs-ln-line">  if (value > 20) {
    61.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="61"> class="hljs-ln-code"> class="hljs-ln-line">    return colorInterpolate(value).hex();
    62.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="62"> class="hljs-ln-code"> class="hljs-ln-line">  } else {
    63.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="63"> class="hljs-ln-code"> class="hljs-ln-line">    switch (type) {
    64.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="64"> class="hljs-ln-code"> class="hljs-ln-line">      case 0:
    65.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="65"> class="hljs-ln-code"> class="hljs-ln-line">        return colorInnovation(value).hex();
    66.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="66"> class="hljs-ln-code"> class="hljs-ln-line">      case 1:
    67.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="67"> class="hljs-ln-code"> class="hljs-ln-line">        return colorOperation(value).hex();
    68.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="68"> class="hljs-ln-code"> class="hljs-ln-line">      case 2:
    69.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="69"> class="hljs-ln-code"> class="hljs-ln-line">        return colorGreen(value).hex();
    70.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="70"> class="hljs-ln-code"> class="hljs-ln-line">      case 3:
    71.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="71"> class="hljs-ln-code"> class="hljs-ln-line">        return colorShare(value).hex();
    72.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="72"> class="hljs-ln-code"> class="hljs-ln-line">      case 4:
    73.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="73"> class="hljs-ln-code"> class="hljs-ln-line">        return colorOpen(value).hex();
    74.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="74"> class="hljs-ln-code"> class="hljs-ln-line">      default:
    75.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="75"> class="hljs-ln-code"> class="hljs-ln-line">        break;
    76.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="76"> class="hljs-ln-code"> class="hljs-ln-line">    }
    77.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="77"> class="hljs-ln-code"> class="hljs-ln-line">    // return colorInterpolateMin(value).hex();
    78.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="78"> class="hljs-ln-code"> class="hljs-ln-line">  }
    79.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="79"> class="hljs-ln-code"> class="hljs-ln-line">}
     class="hide-preCode-box"> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    2.4、Mapbox添加文本标记图层

            底图嘛，只有矢量边界不够直观，底图信息又会被颜色图层盖住，所以需要在最上方添加文本注记图层，当然也可以添加一些别的文本内容，标记等都可以。

            这里有一个额外引入的数据源，是一个点shpfile转化的geojson，这个点是用来规定显示文本注记的位置的，也可以直接在原先面数据源的基础上使用文本注记，那么文本注记会直接显示在每一个闭合曲线（拓扑展现就是一个面）上显示。

    1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">export function loadMap(box) {
    2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">  map = new mapboxgl.Map({
    3.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">    container: box,
    4.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">    // style: 'mapbox://styles/mapbox/streets-v11',
    5.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">    // style: 'mapbox://styles/examples/cjgioozof002u2sr5k7t14dim',
    6.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">    style: style,
    7.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">    preserveDrawingBuffer: true,
    8.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">    center: [114, 30],
    9.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line">    zoom: 4,
    10.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line">  });
    11.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line">}
    12.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line"> 
    13.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line">export function addGeoJson() {
    14.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line">  map.on("style.load", () => {
    15.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line">    map.addSource("pointGeojsonSource", {
    16.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line">      type: "geojson",
    17.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line">      data: cityPoint,
    18.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line">    });
    19.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line"> 
    20.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line">    // 添加symbol图层以显示文本
    21.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"> class="hljs-ln-code"> class="hljs-ln-line">    map.addLayer({
    22.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"> class="hljs-ln-code"> class="hljs-ln-line">      id: "pointLabel",
    23.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"> class="hljs-ln-code"> class="hljs-ln-line">      type: "symbol",
    24.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"> class="hljs-ln-code"> class="hljs-ln-line">      source: "pointGeojsonSource",
    25.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"> class="hljs-ln-code"> class="hljs-ln-line">      layout: {
    26.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="26"> class="hljs-ln-code"> class="hljs-ln-line">        "text-field": ["get", "name"], // 使用get表达式来获取"title"属性
    27.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="27"> class="hljs-ln-code"> class="hljs-ln-line">        "text-size": 14,
    28.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="28"> class="hljs-ln-code"> class="hljs-ln-line">        "text-variable-anchor": ["top", "bottom", "left", "right"],
    29.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="29"> class="hljs-ln-code"> class="hljs-ln-line">        "text-radial-offset": 0.5,
    30.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="30"> class="hljs-ln-code"> class="hljs-ln-line">        "text-justify": "auto",
    31.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="31"> class="hljs-ln-code"> class="hljs-ln-line">      },
    32.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="32"> class="hljs-ln-code"> class="hljs-ln-line">      paint: {
    33.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="33"> class="hljs-ln-code"> class="hljs-ln-line">        "text-color": "#000", // 文本颜色
    34.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="34"> class="hljs-ln-code"> class="hljs-ln-line">        "text-halo-color": "#FFF", // 文本描边颜色
    35.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="35"> class="hljs-ln-code"> class="hljs-ln-line">        "text-halo-width": 1, // 文本描边宽度
    36.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="36"> class="hljs-ln-code"> class="hljs-ln-line">      },
    37.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="37"> class="hljs-ln-code"> class="hljs-ln-line">    });
    38.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="38"> class="hljs-ln-code"> class="hljs-ln-line">  });
    39.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="39"> class="hljs-ln-code"> class="hljs-ln-line">}
     class="hide-preCode-box"> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    2.5、Mapbox自定义鼠标悬浮框

            鼠标悬浮框主要是增加地图图层的互动效果，用于展示更多的信息。

    1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">// 在鼠标移动到地图上显示信息
    2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">let popup = null;
    3.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line"> 
    4.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">function showPopup(e, value) {
    5.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">  const features = e.features;
    6.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line"> 
    7.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">  if (features.length > 0) {
    8.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">    map.getCanvas().style.cursor = "pointer";
    9.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line">    const cityName = features[0].properties.name; // 城市名称
    10.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line">    const cityValue = getCityValue(cityName, value); // 获取对应的值
    11.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line"> 
    12.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line">    if (popup) {
    13.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line">      popup.remove();
    14.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line">    }
    15.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line"> 
    16.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line">    // 在页面上显示浮动信息
    17.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line">    popup = new mapboxgl.Popup()
    18.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line">      .setLngLat(e.lngLat)
    19.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line">      .setHTML(`${cityName}
      评分为: ${cityValue}`      )
    20.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line">      .addTo(map);
    21.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"> class="hljs-ln-code"> class="hljs-ln-line">  } else {
    22.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"> class="hljs-ln-code"> class="hljs-ln-line">    map.getCanvas().style.cursor = "";
    23.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"> class="hljs-ln-code"> class="hljs-ln-line">  }
    24.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"> class="hljs-ln-code"> class="hljs-ln-line">}
    25.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"> class="hljs-ln-code"> class="hljs-ln-line"> 
    26.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="26"> class="hljs-ln-code"> class="hljs-ln-line">// 在鼠标移出时移除浮动信息
    27.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="27"> class="hljs-ln-code"> class="hljs-ln-line">function removePopup() {
    28.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="28"> class="hljs-ln-code"> class="hljs-ln-line">  if (popup) {
    29.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="29"> class="hljs-ln-code"> class="hljs-ln-line">    popup.remove();
    30.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="30"> class="hljs-ln-code"> class="hljs-ln-line">  }
    31.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="31"> class="hljs-ln-code"> class="hljs-ln-line">  map.getCanvas().style.cursor = "";
    32.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="32"> class="hljs-ln-code"> class="hljs-ln-line">}
    33.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="33"> class="hljs-ln-code"> class="hljs-ln-line"> 
    34.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="34"> class="hljs-ln-code"> class="hljs-ln-line">// 绑定地图交互事件，鼠标悬浮和移出事件
    35.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="35"> class="hljs-ln-code"> class="hljs-ln-line">function bindMapInteractions(value) {
    36.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="36"> class="hljs-ln-code"> class="hljs-ln-line">  map.off("mousemove", "geojsonLayer", showPopup);
    37.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="37"> class="hljs-ln-code"> class="hljs-ln-line">  map.on("mousemove", "geojsonLayer", (e) => showPopup(e, value));
    38.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="38"> class="hljs-ln-code"> class="hljs-ln-line"> 
    39.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="39"> class="hljs-ln-code"> class="hljs-ln-line">  map.off("mouseout", "geojsonLayer", removePopup);
    40.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="40"> class="hljs-ln-code"> class="hljs-ln-line">  map.on("mouseout", "geojsonLayer", removePopup);
    41.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="41"> class="hljs-ln-code"> class="hljs-ln-line">}
     class="hide-preCode-box"> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    三、最终效果及代码展示

    3.1、最终效果

    包括天地图底图，行政区矢量边界图层，分层设色图层，文本标记图层，还有鼠标悬浮框（不包括图例）在内的综合效果。

    3.2、完整代码展示：

    3.2.1、map.vue（map所在的组件）：

    1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line"><template>
    2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">  <div class="mapboxBorder">
    3.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">    <div
    4.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">      id="mapbox"
    5.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">      style="width: 100%; height: 100%; border-radius: 18px"
    6.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">    >div>
    7.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">  div>
    8.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">template>
    9.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line"> 
    10.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line"><script setup>
    11.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line"> 
    12.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line">import { map, loadMap, addGeoJson, updateMap } from "@/utils/mapbox.js";
    13.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line">import { onMounted, ref, watch } from "vue";
    14.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line"> 
    15.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line">const initMapbox = () => {
    16.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line">  loadMap("mapbox");
    17.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line">  map.setCenter([119.14, 31.22]); //修改地图中心点
    18.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line">  map.setZoom(6.4); //设置缩放级别
    19.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line">};
    20.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line"> 
    21.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"> class="hljs-ln-code"> class="hljs-ln-line">onMounted(() => {
    22.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"> class="hljs-ln-code"> class="hljs-ln-line">  //挂载mapbox
    23.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"> class="hljs-ln-code"> class="hljs-ln-line">  initMapbox();
    24.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"> class="hljs-ln-code"> class="hljs-ln-line">  //添加矢量图层
    25.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"> class="hljs-ln-code"> class="hljs-ln-line">  addGeoJson();
    26.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="26"> class="hljs-ln-code"> class="hljs-ln-line">});
    27.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="27"> class="hljs-ln-code"> class="hljs-ln-line">// ...map组件中的其他事件内容
    28.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="28"> class="hljs-ln-code"> class="hljs-ln-line">script>
     class="hide-preCode-box"> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    3.2.2、mapbox.js：

    1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">import mapboxgl from "mapbox-gl";
    2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">import "mapbox-gl/dist/mapbox-gl.css";
    3.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">// import MapboxLanguage from "@mapbox/mapbox-gl-language";
    4.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">import CityData from "@/assets/json/standardCityBoundary.json";
    5.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">import ranking from "@/assets/json/scoreDetail.json";
    6.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">import { scoreFormat } from "@/utils/format.ts";
    7.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">import cityPoint from "@/assets/json/cityCenterPoint.json";
    8.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line"> 
    9.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line">const rankingFormatted = scoreFormat(ranking);
    10.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line">mapboxgl.accessToken =
    11.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line">  "yourtoken"; //去mapbox官⽹申请
    12.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line"> 
    13.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line">const colorRanges = [
    14.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line">  { min: 0, max: 45, color: "#E31A1C" },
    15.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line">  { min: 45, max: 55, color: "#FEB24C" },
    16.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line">  { min: 55, max: 70, color: "#FFEDA0" },
    17.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line">  { min: 70, max: 100, color: "#90EE90" },
    18.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line">];
    19.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line">const colorRangesSingle = [
    20.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line">  { min: 0, max: 5, color: "#E31A1C" },
    21.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"> class="hljs-ln-code"> class="hljs-ln-line">  { min: 5, max: 10, color: "#FEB24C" },
    22.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"> class="hljs-ln-code"> class="hljs-ln-line">  { min: 10, max: 15, color: "#FFEDA0" },
    23.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"> class="hljs-ln-code"> class="hljs-ln-line">  { min: 15, max: 20, color: "#90EE90" },
    24.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"> class="hljs-ln-code"> class="hljs-ln-line">];
    25.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"> class="hljs-ln-code"> class="hljs-ln-line"> 
    26.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="26"> class="hljs-ln-code"> class="hljs-ln-line">// 将天地图作为底图
    27.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="27"> class="hljs-ln-code"> class="hljs-ln-line">const vecUrl =
    28.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="28"> class="hljs-ln-code"> class="hljs-ln-line">  // "http://t0.tianditu.gov.cn/vec_w/wmts?tk=yourtoken";
    29.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="29"> class="hljs-ln-code"> class="hljs-ln-line">  "http://t0.tianditu.gov.cn/vec_w/wmts?tk=yourtoken";
    30.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="30"> class="hljs-ln-code"> class="hljs-ln-line">const cvaUrl =
    31.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="31"> class="hljs-ln-code"> class="hljs-ln-line">  // "http://t0.tianditu.gov.cn/cva_w/wmts?tk=yourtoken";
    32.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="32"> class="hljs-ln-code"> class="hljs-ln-line">  "http://t0.tianditu.gov.cn/cva_w/wmts?tk=yourtoken";
    33.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="33"> class="hljs-ln-code"> class="hljs-ln-line">//实例化source对象
    34.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="34"> class="hljs-ln-code"> class="hljs-ln-line">var tdtVec = {
    35.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="35"> class="hljs-ln-code"> class="hljs-ln-line">  //类型为栅格瓦片
    36.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="36"> class="hljs-ln-code"> class="hljs-ln-line">  type: "raster",
    37.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="37"> class="hljs-ln-code"> class="hljs-ln-line">  tiles: [
    38.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="38"> class="hljs-ln-code"> class="hljs-ln-line">    //请求地址
    39.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="39"> class="hljs-ln-code"> class="hljs-ln-line">    vecUrl +
    40.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="40"> class="hljs-ln-code"> class="hljs-ln-line">      "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
    41.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="41"> class="hljs-ln-code"> class="hljs-ln-line">  ],
    42.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="42"> class="hljs-ln-code"> class="hljs-ln-line">  crossOrigin: "anonymous",
    43.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="43"> class="hljs-ln-code"> class="hljs-ln-line">  //分辨率
    44.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="44"> class="hljs-ln-code"> class="hljs-ln-line">  tileSize: 256,
    45.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="45"> class="hljs-ln-code"> class="hljs-ln-line">};
    46.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="46"> class="hljs-ln-code"> class="hljs-ln-line">var tdtCva = {
    47.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="47"> class="hljs-ln-code"> class="hljs-ln-line">  type: "raster",
    48.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="48"> class="hljs-ln-code"> class="hljs-ln-line">  tiles: [
    49.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="49"> class="hljs-ln-code"> class="hljs-ln-line">    cvaUrl +
    50.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="50"> class="hljs-ln-code"> class="hljs-ln-line">      "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
    51.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="51"> class="hljs-ln-code"> class="hljs-ln-line">  ],
    52.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="52"> class="hljs-ln-code"> class="hljs-ln-line">  tileSize: 256,
    53.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="53"> class="hljs-ln-code"> class="hljs-ln-line">};
    54.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="54"> class="hljs-ln-code"> class="hljs-ln-line">var style = {
    55.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="55"> class="hljs-ln-code"> class="hljs-ln-line">  //设置版本号，一定要设置
    56.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="56"> class="hljs-ln-code"> class="hljs-ln-line">  version: 8,
    57.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="57"> class="hljs-ln-code"> class="hljs-ln-line">  //添加来源
    58.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="58"> class="hljs-ln-code"> class="hljs-ln-line">  sources: {
    59.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="59"> class="hljs-ln-code"> class="hljs-ln-line">    tdtVec: tdtVec,
    60.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="60"> class="hljs-ln-code"> class="hljs-ln-line">    tdtCva: tdtCva,
    61.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="61"> class="hljs-ln-code"> class="hljs-ln-line">  },
    62.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="62"> class="hljs-ln-code"> class="hljs-ln-line">  layers: [
    63.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="63"> class="hljs-ln-code"> class="hljs-ln-line">    {
    64.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="64"> class="hljs-ln-code"> class="hljs-ln-line">      //图层id，要保证唯一性
    65.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="65"> class="hljs-ln-code"> class="hljs-ln-line">      id: "tdtVec",
    66.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="66"> class="hljs-ln-code"> class="hljs-ln-line">      //图层类型
    67.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="67"> class="hljs-ln-code"> class="hljs-ln-line">      type: "raster",
    68.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="68"> class="hljs-ln-code"> class="hljs-ln-line">      //数据源
    69.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="69"> class="hljs-ln-code"> class="hljs-ln-line">      source: "tdtVec",
    70.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="70"> class="hljs-ln-code"> class="hljs-ln-line">      //图层最小缩放级数
    71.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="71"> class="hljs-ln-code"> class="hljs-ln-line">      minzoom: 0,
    72.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="72"> class="hljs-ln-code"> class="hljs-ln-line">      //图层最大缩放级数
    73.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="73"> class="hljs-ln-code"> class="hljs-ln-line">      maxzoom: 17,
    74.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="74"> class="hljs-ln-code"> class="hljs-ln-line">    },
    75.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="75"> class="hljs-ln-code"> class="hljs-ln-line">    {
    76.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="76"> class="hljs-ln-code"> class="hljs-ln-line">      id: "tdtCva",
    77.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="77"> class="hljs-ln-code"> class="hljs-ln-line">      type: "raster",
    78.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="78"> class="hljs-ln-code"> class="hljs-ln-line">      source: "tdtCva",
    79.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="79"> class="hljs-ln-code"> class="hljs-ln-line">      minzoom: 0,
    80.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="80"> class="hljs-ln-code"> class="hljs-ln-line">      maxzoom: 17,
    81.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="81"> class="hljs-ln-code"> class="hljs-ln-line">    },
    82.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="82"> class="hljs-ln-code"> class="hljs-ln-line">  ],
    83.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="83"> class="hljs-ln-code"> class="hljs-ln-line">  glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    84.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="84"> class="hljs-ln-code"> class="hljs-ln-line">};
    85.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="85"> class="hljs-ln-code"> class="hljs-ln-line"> 
    86.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="86"> class="hljs-ln-code"> class="hljs-ln-line">export let map = null; // 导出 map 对象
    87.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="87"> class="hljs-ln-code"> class="hljs-ln-line"> 
    88.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="88"> class="hljs-ln-code"> class="hljs-ln-line">export function loadMap(box) {
    89.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="89"> class="hljs-ln-code"> class="hljs-ln-line">  map = new mapboxgl.Map({
    90.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="90"> class="hljs-ln-code"> class="hljs-ln-line">    container: box,
    91.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="91"> class="hljs-ln-code"> class="hljs-ln-line">    // style: 'mapbox://styles/mapbox/streets-v11',
    92.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="92"> class="hljs-ln-code"> class="hljs-ln-line">    // style: 'mapbox://styles/examples/cjgioozof002u2sr5k7t14dim',
    93.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="93"> class="hljs-ln-code"> class="hljs-ln-line">    style: style,
    94.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="94"> class="hljs-ln-code"> class="hljs-ln-line">    preserveDrawingBuffer: true,
    95.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="95"> class="hljs-ln-code"> class="hljs-ln-line">    center: [114, 30],
    96.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="96"> class="hljs-ln-code"> class="hljs-ln-line">    zoom: 4,
    97.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="97"> class="hljs-ln-code"> class="hljs-ln-line">  });
    98.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="98"> class="hljs-ln-code"> class="hljs-ln-line"> 
    99.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="99"> class="hljs-ln-code"> class="hljs-ln-line">  // 设置汉化
    100.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="100"> class="hljs-ln-code"> class="hljs-ln-line">  // map.addControl(new MapboxLanguage({
    101.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="101"> class="hljs-ln-code"> class="hljs-ln-line">  //     defaultLanguage: 'zh-Hans'
    102.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="102"> class="hljs-ln-code"> class="hljs-ln-line">  // }));
    103.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="103"> class="hljs-ln-code"> class="hljs-ln-line">}
    104.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="104"> class="hljs-ln-code"> class="hljs-ln-line"> 
    105.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="105"> class="hljs-ln-code"> class="hljs-ln-line">export function addGeoJson() {
    106.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="106"> class="hljs-ln-code"> class="hljs-ln-line">  map.on("style.load", () => {
    107.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="107"> class="hljs-ln-code"> class="hljs-ln-line">    // 加载 GeoJSON 数据源
    108.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="108"> class="hljs-ln-code"> class="hljs-ln-line">    map.addSource("geojsonSource", {
    109.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="109"> class="hljs-ln-code"> class="hljs-ln-line">      type: "geojson",
    110.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="110"> class="hljs-ln-code"> class="hljs-ln-line">      data: CityData,
    111.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="111"> class="hljs-ln-code"> class="hljs-ln-line">    });
    112.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="112"> class="hljs-ln-code"> class="hljs-ln-line">    map.addSource("pointGeojsonSource", {
    113.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="113"> class="hljs-ln-code"> class="hljs-ln-line">      // 注意：这里使用的是不同的ID
    114.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="114"> class="hljs-ln-code"> class="hljs-ln-line">      type: "geojson",
    115.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="115"> class="hljs-ln-code"> class="hljs-ln-line">      data: cityPoint,
    116.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="116"> class="hljs-ln-code"> class="hljs-ln-line">    });
    117.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="117"> class="hljs-ln-code"> class="hljs-ln-line"> 
    118.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="118"> class="hljs-ln-code"> class="hljs-ln-line">    //初始化上色
    119.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="119"> class="hljs-ln-code"> class="hljs-ln-line">    paintMap();
    120.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="120"> class="hljs-ln-code"> class="hljs-ln-line">    //绑定地图事件
    121.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="121"> class="hljs-ln-code"> class="hljs-ln-line">    bindMapInteractions();
    122.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="122"> class="hljs-ln-code"> class="hljs-ln-line">    // 添加图层来显示行政区划的边界
    123.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="123"> class="hljs-ln-code"> class="hljs-ln-line">    map.addLayer({
    124.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="124"> class="hljs-ln-code"> class="hljs-ln-line">      id: "lineLayer",
    125.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="125"> class="hljs-ln-code"> class="hljs-ln-line">      type: "line",
    126.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="126"> class="hljs-ln-code"> class="hljs-ln-line">      source: "geojsonSource",
    127.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="127"> class="hljs-ln-code"> class="hljs-ln-line">      paint: {
    128.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="128"> class="hljs-ln-code"> class="hljs-ln-line">        "line-color": "#FFF",
    129.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="129"> class="hljs-ln-code"> class="hljs-ln-line">        "line-width": 1.5,
    130.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="130"> class="hljs-ln-code"> class="hljs-ln-line">      },
    131.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="131"> class="hljs-ln-code"> class="hljs-ln-line">    });
    132.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="132"> class="hljs-ln-code"> class="hljs-ln-line">    // 添加symbol图层以显示文本
    133.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="133"> class="hljs-ln-code"> class="hljs-ln-line">    map.addLayer({
    134.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="134"> class="hljs-ln-code"> class="hljs-ln-line">      id: "pointLabel",
    135.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="135"> class="hljs-ln-code"> class="hljs-ln-line">      type: "symbol",
    136.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="136"> class="hljs-ln-code"> class="hljs-ln-line">      source: "pointGeojsonSource",
    137.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="137"> class="hljs-ln-code"> class="hljs-ln-line">      layout: {
    138.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="138"> class="hljs-ln-code"> class="hljs-ln-line">        "text-field": ["get", "name"], // 使用get表达式来获取"title"属性
    139.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="139"> class="hljs-ln-code"> class="hljs-ln-line">        "text-size": 14,
    140.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="140"> class="hljs-ln-code"> class="hljs-ln-line">        "text-variable-anchor": ["top", "bottom", "left", "right"],
    141.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="141"> class="hljs-ln-code"> class="hljs-ln-line">        "text-radial-offset": 0.5,
    142.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="142"> class="hljs-ln-code"> class="hljs-ln-line">        "text-justify": "auto",
    143.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="143"> class="hljs-ln-code"> class="hljs-ln-line">      },
    144.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="144"> class="hljs-ln-code"> class="hljs-ln-line">      paint: {
    145.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="145"> class="hljs-ln-code"> class="hljs-ln-line">        "text-color": "#000", // 文本颜色
    146.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="146"> class="hljs-ln-code"> class="hljs-ln-line">        "text-halo-color": "#FFF", // 文本描边颜色
    147.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="147"> class="hljs-ln-code"> class="hljs-ln-line">        "text-halo-width": 1, // 文本描边宽度
    148.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="148"> class="hljs-ln-code"> class="hljs-ln-line">      },
    149.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="149"> class="hljs-ln-code"> class="hljs-ln-line">    });
    150.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="150"> class="hljs-ln-code"> class="hljs-ln-line">    // 添加地级市名称的文本图层
    151.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="151"> class="hljs-ln-code"> class="hljs-ln-line">    // map.addLayer({
    152.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="152"> class="hljs-ln-code"> class="hljs-ln-line">    //   id: "cityNameLayer",
    153.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="153"> class="hljs-ln-code"> class="hljs-ln-line">    //   type: "symbol",
    154.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="154"> class="hljs-ln-code"> class="hljs-ln-line">    //   source: "geojsonSource",
    155.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="155"> class="hljs-ln-code"> class="hljs-ln-line">    //   layout: {
    156.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="156"> class="hljs-ln-code"> class="hljs-ln-line">    //     "text-field": [
    157.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="157"> class="hljs-ln-code"> class="hljs-ln-line">    //       "match",
    158.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="158"> class="hljs-ln-code"> class="hljs-ln-line">    //       ["get", "is_island"],
    159.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="159"> class="hljs-ln-code"> class="hljs-ln-line">    //       "true",
    160.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="160"> class="hljs-ln-code"> class="hljs-ln-line">    //       "", // 如果是群岛城市，不显示名字
    161.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="161"> class="hljs-ln-code"> class="hljs-ln-line">    //       ["get", "name"], // 如果不是群岛城市，显示名字
    162.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="162"> class="hljs-ln-code"> class="hljs-ln-line">    //     ],
    163.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="163"> class="hljs-ln-code"> class="hljs-ln-line">    //     "text-size": 14,
    164.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="164"> class="hljs-ln-code"> class="hljs-ln-line">    //     "text-variable-anchor": ["top", "bottom", "left", "right"],
    165.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="165"> class="hljs-ln-code"> class="hljs-ln-line">    //     "text-radial-offset": 0.5,
    166.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="166"> class="hljs-ln-code"> class="hljs-ln-line">    //     "text-justify": "auto",
    167.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="167"> class="hljs-ln-code"> class="hljs-ln-line">    //     "text-allow-overlap": false, // 不允许文本标签重叠
    168.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="168"> class="hljs-ln-code"> class="hljs-ln-line">    //   },
    169.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="169"> class="hljs-ln-code"> class="hljs-ln-line">    //   paint: {
    170.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="170"> class="hljs-ln-code"> class="hljs-ln-line">    //     "text-color": "#000", // 文本颜色
    171.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="171"> class="hljs-ln-code"> class="hljs-ln-line">    //     "text-halo-color": "#FFF", // 文本描边颜色
    172.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="172"> class="hljs-ln-code"> class="hljs-ln-line">    //     "text-halo-width": 1, // 文本描边宽度
    173.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="173"> class="hljs-ln-code"> class="hljs-ln-line">    //   },
    174.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="174"> class="hljs-ln-code"> class="hljs-ln-line">    // });
    175.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="175"> class="hljs-ln-code"> class="hljs-ln-line">  });
    176.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="176"> class="hljs-ln-code"> class="hljs-ln-line">}
    177.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="177"> class="hljs-ln-code"> class="hljs-ln-line"> 
    178.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="178"> class="hljs-ln-code"> class="hljs-ln-line">// 根据value值上色
    179.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="179"> class="hljs-ln-code"> class="hljs-ln-line">export function paintMap() {
    180.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="180"> class="hljs-ln-code"> class="hljs-ln-line">  // 添加图层来上色
    181.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="181"> class="hljs-ln-code"> class="hljs-ln-line">  map.addLayer({
    182.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="182"> class="hljs-ln-code"> class="hljs-ln-line">    id: "geojsonLayer",
    183.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="183"> class="hljs-ln-code"> class="hljs-ln-line">    type: "fill", // 根据你的数据类型设置合适的图层类型，比如 'fill'、'circle'、'line' 等
    184.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="184"> class="hljs-ln-code"> class="hljs-ln-line">    source: "geojsonSource",
    185.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="185"> class="hljs-ln-code"> class="hljs-ln-line">    paint: {
    186.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="186"> class="hljs-ln-code"> class="hljs-ln-line">      "fill-color": [
    187.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="187"> class="hljs-ln-code"> class="hljs-ln-line">        "match",
    188.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="188"> class="hljs-ln-code"> class="hljs-ln-line">        //在geojson中获取name属性
    189.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="189"> class="hljs-ln-code"> class="hljs-ln-line">        ["get", "name"],
    190.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="190"> class="hljs-ln-code"> class="hljs-ln-line">        //将geojson中的name属性与cityValueData进行匹配，得到正确的综合得分，并根据colorRanges的情况上色
    191.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="191"> class="hljs-ln-code"> class="hljs-ln-line">        ...rankingFormatted.reduce((acc, data) => {
    192.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="192"> class="hljs-ln-code"> class="hljs-ln-line">          return [...acc, data.cityName, getColor2(data.score)];
    193.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="193"> class="hljs-ln-code"> class="hljs-ln-line">        }, []),
    194.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="194"> class="hljs-ln-code"> class="hljs-ln-line">        "#000000", // 默认颜色
    195.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="195"> class="hljs-ln-code"> class="hljs-ln-line">      ],
    196.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="196"> class="hljs-ln-code"> class="hljs-ln-line">      "fill-opacity": 1, // 填充透明度
    197.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="197"> class="hljs-ln-code"> class="hljs-ln-line">    },
    198.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="198"> class="hljs-ln-code"> class="hljs-ln-line">  });
    199.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="199"> class="hljs-ln-code"> class="hljs-ln-line">}
    200.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="200"> class="hljs-ln-code"> class="hljs-ln-line"> 
    201.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="201"> class="hljs-ln-code"> class="hljs-ln-line">// 切换数据更新地图上色
    202.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="202"> class="hljs-ln-code"> class="hljs-ln-line">export function updateMap(value) {
    203.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="203"> class="hljs-ln-code"> class="hljs-ln-line">  // 根据新的 value 更新绘制属性
    204.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="204"> class="hljs-ln-code"> class="hljs-ln-line">  let propertiesSelect = "";
    205.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="205"> class="hljs-ln-code"> class="hljs-ln-line">  switch (parseInt(value)) {
    206.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="206"> class="hljs-ln-code"> class="hljs-ln-line">    case 0:
    207.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="207"> class="hljs-ln-code"> class="hljs-ln-line">      propertiesSelect = "创新发展";
    208.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="208"> class="hljs-ln-code"> class="hljs-ln-line">      break;
    209.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="209"> class="hljs-ln-code"> class="hljs-ln-line">    case 1:
    210.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="210"> class="hljs-ln-code"> class="hljs-ln-line">      propertiesSelect = "协调发展";
    211.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="211"> class="hljs-ln-code"> class="hljs-ln-line">      break;
    212.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="212"> class="hljs-ln-code"> class="hljs-ln-line">    case 2:
    213.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="213"> class="hljs-ln-code"> class="hljs-ln-line">      propertiesSelect = "绿色发展";
    214.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="214"> class="hljs-ln-code"> class="hljs-ln-line">      break;
    215.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="215"> class="hljs-ln-code"> class="hljs-ln-line">    case 3:
    216.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="216"> class="hljs-ln-code"> class="hljs-ln-line">      propertiesSelect = "开放发展";
    217.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="217"> class="hljs-ln-code"> class="hljs-ln-line">      break;
    218.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="218"> class="hljs-ln-code"> class="hljs-ln-line">    case 4:
    219.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="219"> class="hljs-ln-code"> class="hljs-ln-line">      propertiesSelect = "共享发展";
    220.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="220"> class="hljs-ln-code"> class="hljs-ln-line">      break;
    221.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="221"> class="hljs-ln-code"> class="hljs-ln-line">    case 5:
    222.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="222"> class="hljs-ln-code"> class="hljs-ln-line">      propertiesSelect = "score";
    223.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="223"> class="hljs-ln-code"> class="hljs-ln-line">      break;
    224.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="224"> class="hljs-ln-code"> class="hljs-ln-line">    default:
    225.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="225"> class="hljs-ln-code"> class="hljs-ln-line">      break;
    226.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="226"> class="hljs-ln-code"> class="hljs-ln-line">  }
    227.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="227"> class="hljs-ln-code"> class="hljs-ln-line">  map.setPaintProperty("geojsonLayer", "fill-color", [
    228.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="228"> class="hljs-ln-code"> class="hljs-ln-line">    "match",
    229.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="229"> class="hljs-ln-code"> class="hljs-ln-line">    ["get", "name"],
    230.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="230"> class="hljs-ln-code"> class="hljs-ln-line">    ...rankingFormatted.reduce((acc, data) => {
    231.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="231"> class="hljs-ln-code"> class="hljs-ln-line">      return [
    232.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="232"> class="hljs-ln-code"> class="hljs-ln-line">        ...acc,
    233.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="233"> class="hljs-ln-code"> class="hljs-ln-line">        data.cityName,
    234.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="234"> class="hljs-ln-code"> class="hljs-ln-line">        getColor2(data[propertiesSelect], parseInt(value)),
    235.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="235"> class="hljs-ln-code"> class="hljs-ln-line">      ];
    236.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="236"> class="hljs-ln-code"> class="hljs-ln-line">    }, []),
    237.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="237"> class="hljs-ln-code"> class="hljs-ln-line">    "#000000", // 默认颜色
    238.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="238"> class="hljs-ln-code"> class="hljs-ln-line">  ]);
    239.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="239"> class="hljs-ln-code"> class="hljs-ln-line">  bindMapInteractions(value);
    240.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="240"> class="hljs-ln-code"> class="hljs-ln-line">}
    241.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="241"> class="hljs-ln-code"> class="hljs-ln-line"> 
    242.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="242"> class="hljs-ln-code"> class="hljs-ln-line">// 设置颜色范围
    243.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="243"> class="hljs-ln-code"> class="hljs-ln-line">// const colorRange = ['#ADD8E6','#00008B'];
    244.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="244"> class="hljs-ln-code"> class="hljs-ln-line">const colorRange = ["#DBEEF6", "#36869A"];
    245.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="245"> class="hljs-ln-code"> class="hljs-ln-line">const colorRangeMin = ["#E2F0D9", "#385723"];
    246.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="246"> class="hljs-ln-code"> class="hljs-ln-line"> 
    247.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="247"> class="hljs-ln-code"> class="hljs-ln-line">const innovation = ["#fff4f8", "#dc7d61"];
    248.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="248"> class="hljs-ln-code"> class="hljs-ln-line">const operation = ["#e0e5e9", "#73a9d7"];
    249.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="249"> class="hljs-ln-code"> class="hljs-ln-line">const green = ["#e9f0e8", "#80c67d"];
    250.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="250"> class="hljs-ln-code"> class="hljs-ln-line">const share = ["#fff8eb", "#f6bb81"];
    251.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="251"> class="hljs-ln-code"> class="hljs-ln-line">const open = ["#eaebff", "#b67ebd"];
    252.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="252"> class="hljs-ln-code"> class="hljs-ln-line"> 
    253.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="253"> class="hljs-ln-code"> class="hljs-ln-line">// 创建颜色插值函数(综合得分)
    254.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="254"> class="hljs-ln-code"> class="hljs-ln-line">const colorInterpolate = chroma.scale(colorRange).domain([37, 90]);
    255.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="255"> class="hljs-ln-code"> class="hljs-ln-line">// 创建颜色插值函数(单指标得分)
    256.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="256"> class="hljs-ln-code"> class="hljs-ln-line">const colorInterpolateMin = chroma.scale(colorRangeMin).domain([1.5, 20]);
    257.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="257"> class="hljs-ln-code"> class="hljs-ln-line"> 
    258.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="258"> class="hljs-ln-code"> class="hljs-ln-line">const colorInnovation = chroma.scale(innovation).domain([4.1, 17.4]);
    259.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="259"> class="hljs-ln-code"> class="hljs-ln-line">const colorOperation = chroma.scale(operation).domain([9.4, 18.7]);
    260.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="260"> class="hljs-ln-code"> class="hljs-ln-line">const colorGreen = chroma.scale(green).domain([9.2, 18]);
    261.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="261"> class="hljs-ln-code"> class="hljs-ln-line">const colorOpen = chroma.scale(open).domain([1.6, 20]);
    262.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="262"> class="hljs-ln-code"> class="hljs-ln-line">const colorShare = chroma.scale(share).domain([7.5, 20]);
    263.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="263"> class="hljs-ln-code"> class="hljs-ln-line"> 
    264.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="264"> class="hljs-ln-code"> class="hljs-ln-line">// 根据城市值获取对应颜色
    265.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="265"> class="hljs-ln-code"> class="hljs-ln-line">function getColor2(value, type) {
    266.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="266"> class="hljs-ln-code"> class="hljs-ln-line">  if (value > 20) {
    267.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="267"> class="hljs-ln-code"> class="hljs-ln-line">    return colorInterpolate(value).hex();
    268.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="268"> class="hljs-ln-code"> class="hljs-ln-line">  } else {
    269.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="269"> class="hljs-ln-code"> class="hljs-ln-line">    switch (type) {
    270.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="270"> class="hljs-ln-code"> class="hljs-ln-line">      case 0:
    271.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="271"> class="hljs-ln-code"> class="hljs-ln-line">        return colorInnovation(value).hex();
    272.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="272"> class="hljs-ln-code"> class="hljs-ln-line">      case 1:
    273.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="273"> class="hljs-ln-code"> class="hljs-ln-line">        return colorOperation(value).hex();
    274.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="274"> class="hljs-ln-code"> class="hljs-ln-line">      case 2:
    275.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="275"> class="hljs-ln-code"> class="hljs-ln-line">        return colorGreen(value).hex();
    276.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="276"> class="hljs-ln-code"> class="hljs-ln-line">      case 3:
    277.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="277"> class="hljs-ln-code"> class="hljs-ln-line">        return colorShare(value).hex();
    278.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="278"> class="hljs-ln-code"> class="hljs-ln-line">      case 4:
    279.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="279"> class="hljs-ln-code"> class="hljs-ln-line">        return colorOpen(value).hex();
    280.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="280"> class="hljs-ln-code"> class="hljs-ln-line">      default:
    281.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="281"> class="hljs-ln-code"> class="hljs-ln-line">        break;
    282.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="282"> class="hljs-ln-code"> class="hljs-ln-line">    }
    283.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="283"> class="hljs-ln-code"> class="hljs-ln-line">    // return colorInterpolateMin(value).hex();
    284.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="284"> class="hljs-ln-code"> class="hljs-ln-line">  }
    285.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="285"> class="hljs-ln-code"> class="hljs-ln-line">}
    286.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="286"> class="hljs-ln-code"> class="hljs-ln-line"> 
    287.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="287"> class="hljs-ln-code"> class="hljs-ln-line">// 悬浮地图上时，获取该城市的值
    288.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="288"> class="hljs-ln-code"> class="hljs-ln-line">function getCityValue(cityName, value) {
    289.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="289"> class="hljs-ln-code"> class="hljs-ln-line">  const cityData = rankingFormatted.find((data) => data.cityName === cityName);
    290.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="290"> class="hljs-ln-code"> class="hljs-ln-line">  switch (parseInt(value)) {
    291.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="291"> class="hljs-ln-code"> class="hljs-ln-line">    case 0:
    292.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="292"> class="hljs-ln-code"> class="hljs-ln-line">      return cityData ? cityData["创新发展"] : "N/A";
    293.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="293"> class="hljs-ln-code"> class="hljs-ln-line">    case 1:
    294.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="294"> class="hljs-ln-code"> class="hljs-ln-line">      return cityData ? cityData["协调发展"] : "N/A";
    295.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="295"> class="hljs-ln-code"> class="hljs-ln-line">    case 2:
    296.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="296"> class="hljs-ln-code"> class="hljs-ln-line">      return cityData ? cityData["绿色发展"] : "N/A";
    297.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="297"> class="hljs-ln-code"> class="hljs-ln-line">    case 3:
    298.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="298"> class="hljs-ln-code"> class="hljs-ln-line">      return cityData ? cityData["开放发展"] : "N/A";
    299.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="299"> class="hljs-ln-code"> class="hljs-ln-line">    case 4:
    300.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="300"> class="hljs-ln-code"> class="hljs-ln-line">      return cityData ? cityData["共享发展"] : "N/A";
    301.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="301"> class="hljs-ln-code"> class="hljs-ln-line">    case 5:
    302.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="302"> class="hljs-ln-code"> class="hljs-ln-line">      return cityData ? cityData.score : "N/A";
    303.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="303"> class="hljs-ln-code"> class="hljs-ln-line">    default:
    304.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="304"> class="hljs-ln-code"> class="hljs-ln-line">      return cityData ? cityData.score : "N/A";
    305.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="305"> class="hljs-ln-code"> class="hljs-ln-line">  }
    306.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="306"> class="hljs-ln-code"> class="hljs-ln-line">}
    307.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="307"> class="hljs-ln-code"> class="hljs-ln-line"> 
    308.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="308"> class="hljs-ln-code"> class="hljs-ln-line">// 在鼠标移动到地图上显示信息
    309.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="309"> class="hljs-ln-code"> class="hljs-ln-line">let popup = null;
    310.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="310"> class="hljs-ln-code"> class="hljs-ln-line"> 
    311.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="311"> class="hljs-ln-code"> class="hljs-ln-line">function showPopup(e, value) {
    312.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="312"> class="hljs-ln-code"> class="hljs-ln-line">  const features = e.features;
    313.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="313"> class="hljs-ln-code"> class="hljs-ln-line"> 
    314.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="314"> class="hljs-ln-code"> class="hljs-ln-line">  if (features.length > 0) {
    315.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="315"> class="hljs-ln-code"> class="hljs-ln-line">    map.getCanvas().style.cursor = "pointer";
    316.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="316"> class="hljs-ln-code"> class="hljs-ln-line">    const cityName = features[0].properties.name; // 城市名称
    317.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="317"> class="hljs-ln-code"> class="hljs-ln-line">    const cityValue = getCityValue(cityName, value); // 获取对应的值
    318.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="318"> class="hljs-ln-code"> class="hljs-ln-line"> 
    319.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="319"> class="hljs-ln-code"> class="hljs-ln-line">    if (popup) {
    320.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="320"> class="hljs-ln-code"> class="hljs-ln-line">      popup.remove();
    321.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="321"> class="hljs-ln-code"> class="hljs-ln-line">    }
    322.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="322"> class="hljs-ln-code"> class="hljs-ln-line"> 
    323.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="323"> class="hljs-ln-code"> class="hljs-ln-line">    // 在页面上显示浮动信息
    324.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="324"> class="hljs-ln-code"> class="hljs-ln-line">    popup = new mapboxgl.Popup()
    325.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="325"> class="hljs-ln-code"> class="hljs-ln-line">      .setLngLat(e.lngLat)
    326.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="326"> class="hljs-ln-code"> class="hljs-ln-line">      .setHTML(`${cityName}
      评分为: ${cityValue}`      )
    327.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="327"> class="hljs-ln-code"> class="hljs-ln-line">      .addTo(map);
    328.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="328"> class="hljs-ln-code"> class="hljs-ln-line">  } else {
    329.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="329"> class="hljs-ln-code"> class="hljs-ln-line">    map.getCanvas().style.cursor = "";
    330.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="330"> class="hljs-ln-code"> class="hljs-ln-line">  }
    331.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="331"> class="hljs-ln-code"> class="hljs-ln-line">}
    332.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="332"> class="hljs-ln-code"> class="hljs-ln-line"> 
    333.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="333"> class="hljs-ln-code"> class="hljs-ln-line">// 在鼠标移出时移除浮动信息
    334.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="334"> class="hljs-ln-code"> class="hljs-ln-line">function removePopup() {
    335.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="335"> class="hljs-ln-code"> class="hljs-ln-line">  if (popup) {
    336.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="336"> class="hljs-ln-code"> class="hljs-ln-line">    popup.remove();
    337.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="337"> class="hljs-ln-code"> class="hljs-ln-line">  }
    338.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="338"> class="hljs-ln-code"> class="hljs-ln-line">  map.getCanvas().style.cursor = "";
    339.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="339"> class="hljs-ln-code"> class="hljs-ln-line">}
    340.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="340"> class="hljs-ln-code"> class="hljs-ln-line"> 
    341.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="341"> class="hljs-ln-code"> class="hljs-ln-line">// 绑定地图交互事件，鼠标悬浮和移出事件
    342.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="342"> class="hljs-ln-code"> class="hljs-ln-line">function bindMapInteractions(value) {
    343.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="343"> class="hljs-ln-code"> class="hljs-ln-line">  map.off("mousemove", "geojsonLayer", showPopup);
    344.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="344"> class="hljs-ln-code"> class="hljs-ln-line">  map.on("mousemove", "geojsonLayer", (e) => showPopup(e, value));
    345.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="345"> class="hljs-ln-code"> class="hljs-ln-line"> 
    346.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="346"> class="hljs-ln-code"> class="hljs-ln-line">  map.off("mouseout", "geojsonLayer", removePopup);
    347.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="347"> class="hljs-ln-code"> class="hljs-ln-line">  map.on("mouseout", "geojsonLayer", removePopup);
    348.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="348"> class="hljs-ln-code"> class="hljs-ln-line">}
     class="hide-preCode-box"> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    四、总结

            Mapbox的中国分部好像在2021年左右就退出中国了，官方文档的汉化工作也戛然而止，相关的社区建设也相当欠缺，内容比较混乱，最离谱的是mapbox官方底图库中的中国地图基本都是错的，天地图引入又麻烦......

            恰好我最近有一个基础的mapbox应用需求，就做了一些整理和探索，分享给大家。

            更多前端好文：各种前端问题的技巧和解决方案

            博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

    data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://blog.csdn.net/RenGJ010617/article/details/137978979","extend1":"pc","ab":"new"}">> id="blogVoteBox" style="width:400px;margin:auto;margin-top:12px" class="blog-vote-box"> class="vote-box csdn-vote" style="opacity: 1;"> class="pos-box pt0" style="height: 222px; visibility: visible;">
    注：本文转载自blog.csdn.net的Watermelo617的文章"https://blog.csdn.net/RenGJ010617/article/details/137978979"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
    复制链接
    复制链接
    相关推荐
    发表评论

    评论记录：

    未查询到任何数据！