🗺️maptalks study

Appearance

目录

maptalks 1.0.0-rc.39 ​

主要更新内容 ​

  • 文字沿线分布和绘制
  • canvas 模拟渐变path
  • 地图旋转角动画支持旋转方向控制
  • TileLayer 支持用户自定义瓦片加载出错处理
  • 经纬度坐标长度计算支持海拔
  • Attribution control support 自定义
  • 暴露内部关于投影信息的定义
  • 修复图层显示隐藏不重绘
  • 修复TileLayer offset时包围盒计算不正确
  • 修复Geometry translate时丢失海拔值
  • 修复path开启textPlacement后文字不旋转
  • 修复Marker被碰撞隐藏还能identify到的问题

文字沿线分布和绘制 ​

开启文字沿线绘制很简单，设置 sybmol.textSpacing的值为数字即可

js
const symbol = {
    lineWidth: 8,
    lineColor: "black",
    textName: "苏州湾大道",
    // textName: 'Hello World',
    // textPlacement?: 'point' | 'vertex' | 'line' | 'vertex-first' | 'vertex-last';
    textPlacement: "line",
    textSpacing: 200,
    textFill: "yellow",
    textFaceName: "微软雅黑",
    textWeight: "bold",
    textSize: 12,
    textOpacity: 1,
    textHaloFill: "#000",
    textHaloRadius: 1,
    textHaloOpacity: 1,
    // textAlongDebug: true
};

const line = new maptalks.LineString(coordinates, {
    symbol: Object.assign({}, symbol),
}).addTo(layer);

text-along-path demo

我们一般使用时，一个图层用来存放路线数据，一个图层图层专门用来渲染沿线文字，这样就可以让文字永远在线上

WARNING

由于沿线文字计算比较复杂,每个字符都要计算和处理且canvas的文字性能问题， 沿线文字不适合大数据量的的，一般也就能支撑几百条的线条渲染，数据量大请使用webgl图层来处理

canvas 模拟渐变path ​

maptalks一直就提供了线条渐变功能,但是以前的版本里有的是简单的包围盒来设置渐变的 createLinearGradient 这个版本里我们利用颜色插值来模拟webgl里线条渐变的功能，因为canvas默认不支持path(polyline)的渐变，所以 我们只能利用颜色插值且一小段的不断绘制(stroke),故而性能不高,不适合大数据量，数据量大的情况下请慎用

  • 没有找到好的方法来实现这个功能所以显得这个方法比较笨
  • 如果你有好的思路可以告诉我们或者pr
js
const lineColorStops = [
    [0, "red"],
    [3 / 4, "yellow"],
    [1.0, "green"],
];

line.setSymbol({
    lineColor: {
        type: "linear",
        colorStops: lineColorStops,
    },
    lineWidth: 4,
});

gradient-path demo

地图旋转角动画支持旋转方向控制 ​

地图 animateTo 支持设置是否反向旋转

js
map.setBearing(-10);

map.animateTo(
    {
        bearing: 10,
    },
    {
        duration: 4000,
        counterclockwise: true,
    },
);
  • bearing动画本质就是从当前地图的bearing动画到目标值
  • 那么就存在一个动画方向的问题，以上边的代码为例，正常地图的bearing会从 -10变化到 10
  • 如果开启 counterclockwise后反向的变化

bearing animation reverse

WARNING

注意这里的反向不是顺时针还是逆时针的意思，而是表示和原本的旋转方向相反, 可以理解成Array.prototype.reverse方法的效果和作用

animateTo 也支持 bearing的目标值突破 [-180,180]的限制, 引擎内部会自动判断的你的目标bearing是否有突破边界值的

js
map.setBearing(10);

map.animateTo(
    {
        bearing: 200,
    },
    {
        duration: 4000,
        // counterclockwise
    },
);

TileLayer 支持用户自定义瓦片加载出错处理 ​

js
function reloadErrorTileFunction(layer, renderer, tileinfo, tileImage) {
    const url = tileInfo.url;
    // check if need to reload, e.g. server return 500 status code temporarily

    //do some things
    renderer.loadTile(tileInfo, tileImage);
}

const tileLayer = new TileLayer("id", {
    reloadErrorTileFunction,
    // ...other info
});

tile load error demo

当一个瓦片请求出错了，你可以通过这个函数来详细的判断,哪里出错了

  • tileImage 是个Image对象

  • 我们可以根据错误的类型不同从而为 tileImage.src设置不同的url,比如常见的404错误， 我们返回一个默认的图片

  • 社区了有个插件 maptalks.tileclip 可以用来对瓦片做各种处理：

    • clip剪裁
    • cssfilter
    • 打水印
    • 当请求瓦片出错会自动 promise.catch
    • 甚至可以和其他的地图引擎结合

经纬度坐标长度计算支持海拔 ​

现在maptalks里涉及到坐标点测量时，会自动考虑坐标点是否携带海拔了

js
const line = new maptalks.LineString([
    [0, 0, 0],
    [0, 0, 100],
]);
const len = map.computeGeometryLength(line);
//len is 100

Attribution control support 自定义 ​

  • 关闭map的默认的 attribution
  • 自己新建个 Attribution控件，然后可以利用setContent方法动态设置Attribution的内容
js
const map = new maptalks.Map("map", {
    center: [120.5965, 31.2189],
    zoom: 13,
    bearing: 0,
    pitch: 0,
    zoomControl: true,
    attribution: false,
});

const control = new maptalks.control.Attribution({ custom: true });
control.addTo(map);

control.setContent("hello hello hello");

custom-attribution demo

暴露内部关于投影信息的定义 ​

getDefaultSpatialReference 可以获取到maptalks内部关于常见投影信息的定义

  • getDefaultSpatialReference主要是用来当用户需要自定义地图或者TileLayer信息时来参考的
  • 对getDefaultSpatialReference返回的值是deepClone的,对返回的值的修改是不会影响内部的，所以放心使用和修改
  • 一般都是需要调整地图默认的投影信息才会用到，或者自定义TileLayer投影信息用到
js
import { getDefaultSpatialReference } from "maptalks-gl";

console.log(getDefaultSpatialReference());

This document is generated by mdpress