doc

github

• 投影 & 坐标系
• 地图瓦片
• GeoJSON
• turf.js

文章大纲

一、为什么大多数的大屏都有地图

智慧城市、态势感知、智慧调度中心、作战平台、驾驶舱、管控中心、城市大脑...

无论这些大屏都给自己取了多么炫酷的名称，都难以掩盖他们相似、相同的本质:讲故事。这一点在本专栏的第一篇中已有细述，暂不累述。但他们另一个相似点你一定也发现了

他们似乎大多数都在中间放着一张地图

剖析

鼠标拾取存储点位 -> 多点成线 -> 流光动画 -> 相机或模型沿线运动

原文

目前富文本编辑器的实现主要有两种技术方案：一个是利用contenteditable属于直接对html元素进行编辑，如draft.js；另一个是代理textarea + 自定义div + 模拟光标实现。对于类似"word"的经典文本编辑器，一般会采用以上两种技术方案之一，而不会考虑用canvas实现。

事实上，官方最佳实践已经特别声明了不推荐用canvas实现编辑器了,详见,不推荐的原因包括光标位置维护、键盘移动的实现以及没有原生文本输入处理等。

首先想到的一个解法是从这个点做一条射线,计算它跟多边形边界的交点个数，如果交点个数为奇数，那么这个点就在多边形内部，否在在点在多边形外

这个结论很简单，那它是怎么来的？其实，对于平面内任意闭合曲线，我们都可以直观的认为，曲线把平面分割成了内、外两部分，其中"内"就是我们所谓的多边形区域

基于这一认识，对于平面内任意一条直线，我们可以得出下面这些结论

• 直线穿越多边形边界时,有切只有两种情况：进入多边形或穿出多边形
• 在不考虑非欧空间的情况下，直线不可能从内部再次进入多边形，或从外部再次穿出多边形，即连续两次穿越边界的情况必然成对
• 直接可以无限延伸，而闭合曲线包围的区域是有限的，因此最后一次穿越多边形边界，一定是穿出多边形，到达外部

原文

前言

众所周知canvas是位图,在位图里我们可以在里面画各种东西，可以是图片/线条等。那我们想给canvas里的某一张图片添加一个点击事件该怎么做呢？而JS只能监听到canvas的事件,很明显这个图片是不存在与dom里面的，图片只是画在了canvas里而已。

格式

3D模型的格式有很多，每个公司或软件都可以自己定义自己的格式，或公开或不公开。 如max，obj， x（微软），fbx（被Autodesk收购），dae，md2（Quake2），ms3d(MilkShap3D)，mdl（魔兽3）等等

glb、gltf

// 模拟出租车
let car = new Model({
    name: 'car1',
    modelUrl: './assets/model/出租车.glb',
    castShadow: true,
    modelType: 'car1',
    rotation: [ThreeMath.degToRad(0), ThreeMath.degToRad(0), ThreeMath.degToRad(315)],
    isLoadScene: true,
    isReceiveShadow: true,
    iScastShadow: true
});

// demo
// 加载灯杆
export const addlampLayer = (point, options) => {
    return new Promise((resolve) => {
        const threelayer = window.mapHD.getThreeLayer();
        new window.THREE.GLTFLoader()
            .setPath(`${process.env.VUE_APP_MAP_URL}/baidumap/bmapgl/hdmap/model/roadlight/`)
            .load('denggan1.gltf', (object) => {
                object = object.scene;
                object.position.set(point.lng, point.lat, 0);
                object.rotation.z = options.rotation;
                // 宽度、厚度、高度
                object.scale.set(options.width, options.ply, options.height);
                threelayer.add(object);
                resolve(object);
            });
    });
};

在CPU、显卡等硬件设备性能一定情况下，为了更好地用户体验，一般项目开发中需要对Threejs项目代码进行性能优化，避免卡顿现象，所以下面就对ThreeJS性能优化集中方式进行简单介绍

模型面数比较少的情况下，不仅threejs渲染模型的时候运行性能高，通过网络加载面数少的模型，因为文件体积小，加载速度自然也快

合理执行渲染方法.render()

Three.js渲染器的.render()方法每次执行都需要调用大量的CPU、GPU等硬件资源,所以为了提高渲染性能，可以尽量减少.render()的执行次数,不是简单的说越少越好，而是在考虑渲染效果的基础上减少.render()的执行次数。如果场景有动画效果，就必须周期性执行.render()更新canvas画布效果；如果场景默认是静态的，没有动画，比如展示一个产品、建筑或机械零件的三维模型，只需要在鼠标旋转缩放三维模型，触发.render()执行既可以，在没有发生鼠标事件的时候，可以不执行render()；

为什么是WebGPU而不是webGL 3.0

你若往Web图形技术的底层去探究，一定能追溯到上个世纪90年代提出的openGL技术，也一定能看到，WebGL就是基于OpenGL ES做出来的这些信息。OpenGL 在那个显卡羸弱的年代发挥了它应有的价值。

显卡驱动

我们都知道现在的显卡都要安装显卡驱动程序，通过显卡驱动程序暴露的API，我们就可以操作GPU完成图形处理器的操作

问题是，显卡区域和普通编程界的汇编一样，底层，不好写，于是各大厂就做了封装--码界的基操

先了解下什么是光栅化及光栅化的简单过程

光栅化是将几何数据经过一系列变换后最终转换为像素，从而呈现在现实设备上的过程。如下图

光栅化的本质是坐标变换、几何离散化，如下图

以下内容展示纹理到像素时的一些细节

当使用已经执行过顶点变换的顶点作为2D输出平面的时候，我们必须确保每个纹素正确的映射到每个像素区域，否则纹理将产生扭曲，通过理解Direct3D在光栅化和纹理采样遵循的基本过程，你可以确保你的Direct3D程序正确的输出一个2D图像

图1