🌍maptalks study

Appearance

目录

常见问题 ​

图形透明的地方为何不能交互？ ​

maptalks内部图形交互用的判断的依据是当前鼠标点出是否有颜色值来确定是否有图形被命中的，所以当透明度为0时，认为这里没有图形

怎么解决这个问题？将图形的透明度设为一个很小的值即可，比如0.001，这样可以做到从人眼视觉是透明的，计算机内部也能识别该处的颜色值

js
symbol:{
  polygonFill:'red',
  polygonOpacity:0.001
}

设置了文字模板标注为什么读取不到值 ​

文字标注maptalks内部从数据里动态读取属性的,一般用'{name}'这样的的表达式，如果渲染时读取不到对应的文字值可能：

  • 你的数据里不包含改属性值,请检查你的数据
  • 属性的key用了中文等特殊字符,比如这样的配置
js
symbol:{
    textName:'{名称}',
    ....
}

文字属性的动态读取用的是正则表达式，其是不支持中文等特殊字符的,所有请使用英文名称，最好使用符合标识符的的英文名称

矢量切片的样式里明明配置了文字的样式但是文字不渲染? ​

可能是因为你在不支持文字的样式插件里配置了文字样式,比如 line,fill等,比如这样的的样式配置：

js
symbol: {
        lineColor: [0.741176, 0.741176, 0.741176, 1],
        lineWidth: {
          type: "exponential",
          default: 4,
          stops: [
            [14, 4],
            [16, 20]
          ]
        },
        textName:'{name}`
      }

矢量切片的样式渲染插件支持文字有：

  • icon 为点，线或者面类型数据绘制图标和文字的插件
  • text 为点，线或者面类型数据绘制文字的插件

所以如果希望为线，面等做文字标注，应该为线面等添加一个独立的文字标注样式item,比如这样:

js
{
      filter: ["all", ["==", "$layer", "provincial-highway"],
        ["==", "$type", "LineString"]
      ],
      renderPlugin: {
        dataConfig: {
          type: "line"
        },
        sceneConfig: {},
        type: "line"
      },
      symbol: {
        lineColor: [0.741176, 0.741176, 0.741176, 1],
        lineWidth: {
          type: "exponential",
          default: 4,
          stops: [
            [14, 4],
            [16, 20]
          ]
        }
      }
    },
    {
      filter: ["all", ["==", "$layer", "provincial-highway"],
        ["==", "$type", "LineString"]
      ],
      renderPlugin: {
        dataConfig: {
          type: "point"
        },
        sceneConfig: {
          collision: true,
          fading: true,
          depthFunc: "always"
        },
        type: "text"
      },
      symbol: {
        textFaceName: "Microsoft YaHei,sans-serif",
        textFill: [1, 1, 1, 1],
        textHaloFill: [0.0392156, 0.0392156, 0.0392156, 1],
        textHaloOpacity: 1,
        textHaloRadius: 1,
        textName: "{name}",
        textPitchAlignment: "viewport",
        textPlacement: "line",
        textRotationAlignment: "viewport",
        textSize: 20,
        textWrapWidth: 240
      }
    }

TIP

从上面我们可以看到：两个样式他们的数据集(有filter过滤提供)都是一样的,但是分别采用不同的渲染插件，从而来完成一个整体性的事情

矢量切片的样式里怎样给区域面设置边框? ​

区域面对应的渲染插件是fill,其是不支持边框的的(line),所以如果需要给区域面(Polygon)设置个line渲染插件 即可 Markdown 官方教程

js
{
      name: 'area-fill',
      filter: true,
      renderPlugin: {
        dataConfig: {
          type: "fill"
        },
        sceneConfig: {},
        type: "fill"
      },
      symbol: {
        polygonFill: "#996247",
        polygonOpacity: 1
      }
    },
    {
      name: 'area-border',
      filter: true,
      renderPlugin: {
        dataConfig: {
          type: "line"
        },
        sceneConfig: {},
        type: "line"
      },
      symbol: {
        lineColor: "#E2E2E2",
        lineOpacity: 1,
        lineWidth: 2
      }
    }

TIP

从上面我们可以看到：两个样式他们的数据集(有filter过滤提供)都是一样的,但是分别采用不同的渲染插件，从而来完成一个整体性的事情

图片的资源最好不要使用base64 ​

因为base64是个非常长的字符串，js层面维护大的字符串很占内存和性能，即使简单的读取该值速度也很慢，所以会导致整个地图的性能比较差，所以建议最好用图片地址

js
symbol:{
  markerFile:'./assets/images/poi.png'
}

VectorLayer图层内的图形少用阴影 ​

js
symbol:{
	shadowBlur:20
	shadowColor:'red'
}

VectorLayer底层是canvas渲染的，canvas的阴影渲染时非常吃性能的，大面积的阴影会导致这个地图的性能急剧下降

This document is generated by mdpress