摘要：
针对写glsl要点 针对glsl 颜色范围 是 0-1 针对attributes， uniform ，varying 变量时候 ，前缀添加 a, v, u 例如 attribute vec2 aPosition; varying vec2 vUv; uniform sampler2D uTextur 阅读全文
posted @ 2022-01-20 17:57
haibalai
阅读(45)
评论(0)
推荐(0)
摘要：
构建雷达扫描 ``` // TODO 未集成export class RadarRadiationWave {viewer:any; init(map: any){ this.viewer = map; this.initRadarRiationWave1(); this.initRadarRiat 阅读全文
posted @ 2022-01-20 17:52
haibalai
阅读(839)
评论(0)
推荐(0)
摘要：
参考别人整理的一些要点 数据类型 void 表示空 bool 表示 布尔 int 表示整数 float 表示 浮点 vec2 表示两个浮点向量 vec3 表示三个浮点向量 vec4 表示四个浮点向量 bvec2 表示两个布尔向量 bvec3 表示三个布尔向量 bvec4 表示四个布尔向量 ivec2 阅读全文
posted @ 2022-01-20 17:52
haibalai
阅读(36)
评论(0)
推荐(0)
摘要：
我们来构建视频图层 首先做定义 export interface PVideoEntity{ name?:string, entity:any, video:any, } 视频构建图层```javascript import { PVideoEntity } from './PVideoEntity 阅读全文
posted @ 2022-01-20 17:51
haibalai
阅读(148)
评论(0)
推荐(0)
摘要：
我们来构建等高线图层 ```javascript import {Layer} from "./Layer";import { GraphicLayer } from "./GraphicLayer"; export class IsoLineLayer extends Layer {private 阅读全文
posted @ 2022-01-20 17:50
haibalai
阅读(148)
评论(0)
推荐(0)
摘要：
这里需要ImageryLayer 定义参考 cesium 图层那些事 ```javascript/** 卷帘效果*/ import {ImageryLayer} from "./ImageryLayer"; export class ShutterEffect {private map: any;p 阅读全文
posted @ 2022-01-20 17:50
haibalai
阅读(449)
评论(0)
推荐(0)
摘要：
对于cesium entiy的增删改查 我们来封装一个layer来统一管理类似arcgis js 的GraphicLayer 中间数据管理类 import {Layer} from "./Layer"; export abstract class DataSourceLayer extends La 阅读全文
posted @ 2022-01-20 17:49
haibalai
阅读(132)
评论(0)
推荐(0)
摘要：
我们之前构建过arcgis 的风场图层 这次我们切换构建cesium的风场图层我们先设计一下风场的工具类 vector类定义 class Vector { public u:number; public v:number; public m:number; constructor(u:number, 阅读全文
posted @ 2022-01-20 17:48
haibalai
阅读(78)
评论(0)
推荐(0)
摘要：
接上一篇风场文章 请求工具类 export class FetchUtil { /** * 将对象转成 a=1&b=2的形式 * @param obj 对象 */ private static obj2String(obj: any = {}, arr: any = [], idx: any = 0 阅读全文
posted @ 2022-01-20 17:48
haibalai
阅读(51)
评论(0)
推荐(0)
摘要：
根据线动画 前期准备加载esri 需要的类 const [Graphic, GraphicsLayer, Polyline] = await esriClass.load([esriClassName.Graphic, esriClassName.GraphicsLayer, esriClassNa 阅读全文
posted @ 2022-01-20 17:47
haibalai
阅读(114)
评论(0)
推荐(0)
摘要：
我门封装倾斜摄影图层 首先看定义 export interface PTile3dLayer{ } export interface PMaxtrix { position?:{ x:number, //模型中心X轴坐标（经度，单位：十进制度） y:number, //模型中心Y轴坐标（纬度，单位： 阅读全文
posted @ 2022-01-20 17:46
haibalai
阅读(174)
评论(0)
推荐(0)
摘要：
说完cesium 同步地图 arcgis 同步地图更简单些 ```javascript export class CityWorkLinkAge { linkLayer:Map<any,any> = new Map<string, any="">(); linkLayerHandle1:Map<an 阅读全文
posted @ 2022-01-20 17:46
haibalai
阅读(131)
评论(0)
推荐(0)
摘要：
今天我们来讲下聚合图层 首先我们定义参数 export enum ECluserLayerType { circle = 0, shine = 1, image = 2,//未实现 } interface ClusterColor { value: number, color: string } e 阅读全文
posted @ 2022-01-20 17:45
haibalai
阅读(124)
评论(0)
推荐(0)
摘要：
根据基础聚合类，我们构建geojosn序列化的聚合使用类 首先是参数定义 interface ClassBreak { minValue: number, maxValue: number, symbol: any } interface UniqueValue { value: number, s 阅读全文
posted @ 2022-01-20 17:45
haibalai
阅读(87)
评论(0)
推荐(0)
摘要：
大家都看过cesium的场景漫游但是arcgis 场景漫游很少，我通过研究esri 的ExperienceBuilder 发现场景漫游挺好用的，通过改造能适配最新版本4.21 初始化 let controllerManager = new ControllerManager({ sceneView: 阅读全文
posted @ 2022-01-20 17:44
haibalai
阅读(128)
评论(0)
推荐(0)
摘要：
大家知道arcgis 键盘可以操作地图的前进后退， 我碰到一个需求需要在触屏面板 去操作键盘事件我发现arcgis 并没有提供相应的api，于是我构建了一个触屏可以操作键盘上下左右 前进后退的模拟类 ```javascript import {esriClass, esriClassName} fr 阅读全文
posted @ 2022-01-20 17:44
haibalai
阅读(56)
评论(0)
推荐(0)
摘要：
有了上一章说Primiteve图层 我们就可以定义丰富数据图层比如我们定义水面 图层先定义水面图层参数定义 export interface PWaterPrimitives{ id: string, source: Array<number>, symbol?: { url?: string, h 阅读全文
posted @ 2022-01-20 17:43
haibalai
阅读(174)
评论(0)
推荐(0)
摘要：
之前看过别人封装一个esri-loader工具挺好用现在重新用typescript 构建 ```javascript // @ts-ignoreimport esriLoader from 'esri-loader'; export enum esriClassName {externalRende 阅读全文
posted @ 2022-01-20 17:43
haibalai
阅读(408)
评论(0)
推荐(0)
摘要：
针对 一些Primiteve 特定要素我们定义Primiteve图层 ```javascript import {Layer} from "./Layer"; export abstract class PrimiteveLayer extends Layer {constructor(name: 阅读全文
posted @ 2022-01-20 17:42
haibalai
阅读(49)
评论(0)
推荐(0)
摘要：
我们这次来构建热力图 热力图定义参数 export interface PHeatMapRenderer { type: string; radius: number; colorStops: Array<{ color: string, ratio: number }>, blur?: numbe 阅读全文
posted @ 2022-01-20 17:41
haibalai
阅读(67)
评论(0)
推荐(0)
摘要：
我们来构建echart 图层```javascript import {Layer} from "./Layer";import echarts from 'echarts'; class E3CoordinateSystem {_viewer: any;_mapOffset = [0, 0];di 阅读全文
posted @ 2022-01-20 17:41
haibalai
阅读(141)
评论(0)
推荐(0)
摘要：
针对不是图片的图层 我们制作DataSourceLayer ```javavscript import {Layer} from "./Layer"; export abstract class DataSourceLayer extends Layer{type: String = "DataSo 阅读全文
posted @ 2022-01-20 17:40
haibalai
阅读(52)
评论(0)
推荐(0)
摘要：
今天我们来构建复杂一点的图层 云图 我们先定义一些定义参数 //位置 export interface PPoint{ x:Number, y:Number, z?:Number, spatialReference?:Number; } export interface PCloudImageLay 阅读全文
posted @ 2022-01-20 17:40
haibalai
阅读(91)
评论(0)
推荐(0)
摘要：
我们来构建 cesium 单图片图层和arcgis图层 ```javascript import {ImageryLayer} from "./ImageryLayer"; //arcgis珊格服务export class ArcGisImageryLayer extends ImageryLaye 阅读全文
posted @ 2022-01-20 17:39
haibalai
阅读(60)
评论(0)
推荐(0)
摘要：
我们构建腾讯图层类 ```javascript import { ImageryLayer} from "./ImageryLayer";const opt:any = {url : 'https://p{s}.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{r 阅读全文
posted @ 2022-01-20 17:38
haibalai
阅读(90)
评论(0)
推荐(0)
摘要：
我们构建goolge图层类 ```javascript import {ImageryLayer} from "./ImageryLayer";const options:any = {digital:{url:"https://mt{s}.google.cn/vt/lyrs=s&hl=zh-CN& 阅读全文
posted @ 2022-01-20 17:38
haibalai
阅读(32)
评论(0)
推荐(0)
摘要：
我们构建高德图层类 ```javascript import {ImageryLayer} from "./ImageryLayer";const options:any = {digital:{//电子地图url:"http://webrd0{s}.is.autonavi.com/appmapti 阅读全文
posted @ 2022-01-20 17:37
haibalai
阅读(89)
评论(0)
推荐(0)
摘要：
我们通过构建百度地图容器类 ```javascript import {ImageryLayer} from "../ImageryLayer"; const urls:any = {digital:"http://online{s}.map.bdimg.com/onlinelabel/?qt=ti 阅读全文
posted @ 2022-01-20 17:36
haibalai
阅读(292)
评论(0)
推荐(0)
摘要：
我们构建天地图图层类 ```javascript import {ImageryLayer} from "./ImageryLayer";const options:any = {digital:{url: http://t{s}.tianditu.com/vec_w/wmts?service=wm 阅读全文
posted @ 2022-01-20 17:36
haibalai
阅读(92)
评论(0)
推荐(0)
摘要：
那么BusinessLayer 到底是什么的，我们这里把它定义为业务图层我们先从最简单的第三方地图开始说起 我们定义ImageryLayer 来做第三方地图的容器 map 指的就是viewer ```javascripot import {Layer} from './Layer'; export 阅读全文
posted @ 2022-01-20 17:35
haibalai
阅读(59)
评论(0)
推荐(0)
摘要：
今天我们来聊聊图层构建的那些事情,全程使用typescript来实现 这是设计 首先我先定义个图层元组Tuple，它是一个抽象类，它具备一些基础通用方法约束，比如显示隐藏，飞入，图层加载，回调等等 ```javascript /** 在地图上展示的最小分类元祖*/export abstract cl 阅读全文
posted @ 2022-01-20 17:34
haibalai
阅读(140)
评论(0)
推荐(0)
摘要：
说完构建元组我们在构建Layer 基础类， 这个基础定义了show flyto 可以用方法 ``` import { Tuple } from "./Tuple"; export abstract class Layer extends Tuple{type: String = "Layer";na 阅读全文
posted @ 2022-01-20 17:34
haibalai
阅读(45)
评论(0)
推荐(0)
摘要：
我们利用d3滤镜为d3元素增加光的效果 我们存一些全局变量 this.animateOption = null; this.defs = null; this.animateId = ""; this.feDropShadow = null; 滤镜初始化 function create(option 阅读全文
posted @ 2022-01-20 17:33
haibalai
阅读(77)
评论(0)
推荐(0)
摘要：
我们来用d3.js 来实现动画虚线 可以应用于polyline 首先数据结构定义 let options = { renderer: { type: "simple", symbol: { color: "#e97501", width: "3", dasharray: "10", animatio 阅读全文
posted @ 2022-01-20 17:32
haibalai
阅读(356)
评论(0)
推荐(0)
摘要：
我们来用d3.js 来实现虚线动画圆 首先数据结构定义 let options = { renderer: { type: "simple", symbol: { r: 7000, color: "#e97501", width: "3", dasharray: "10", animation: " 阅读全文
posted @ 2022-01-20 17:31
haibalai
阅读(169)
评论(0)
推荐(0)
摘要：
在我们做可视化大屏的时候 我们经常要适应不同的屏幕， 如果拿rem 来做的话也是没问题的，但是很多组件就要自己改才行，地图也是百分比也是大家的方案。但是仔细观察阿里云的datav 大屏方案，它是由body transfrom scale来解决这个问题，所有dom 元素进行缩放，px一样可以但是对于很 阅读全文
posted @ 2022-01-20 17:30
haibalai
阅读(1407)
评论(0)
推荐(0)
摘要：
我们使用d3.js 与arcgis 构建扩散圆 首先还是先定义数据结构 let options = { renderer: { type: "simple", symbol: { r: 8, color2: "#476db6", color1: "#0f46ab", width: "1.5", ti 阅读全文
posted @ 2022-01-20 17:29
haibalai
阅读(112)
评论(0)
推荐(0)
摘要：
arcgis js 4 自带的热力图只能用于mapView， 对于sceneView 只能用别的方法来构建，对于最新arcgis api dojo 已经全部清除之前热力图构建方法失效，于是乎重新改代码 其中Point 是esri 的Point 可以预先加载好存起来```javascript // @ 阅读全文
posted @ 2022-01-20 17:29
haibalai
阅读(273)
评论(0)
推荐(0)
摘要：
这次我们用d3.js 来构建可视化首先我们 定义一些坐标转换的工具方法 toScreen 方法```javascript //构建arcgis 的mapViewlet view = mapView toScreen(coordinate) { let coordinateType = getXYTy 阅读全文
posted @ 2022-01-20 17:28
haibalai
阅读(119)
评论(0)
推荐(0)
摘要：
我们使用d3.js 与arcgis 构建缩放圆 首先还是先定义数据结构 let options = { renderer: { type: "simple", symbol: { r: 10, //圆半径 color: "#0cff04", //圆颜色 time1: 800, //放大速度 time 阅读全文
posted @ 2022-01-20 17:28
haibalai
阅读(77)
评论(0)
推荐(0)
摘要：
我们来用pixi.js 来实现爆炸粒子 首先数据结构定义 let option = { renderer:{ type:'simple', symbol:{ url:'', json:'', spriteScale: 0.5, animationSpeed: 0.6, spriteTint: "#F 阅读全文
posted @ 2022-01-20 17:27
haibalai
阅读(152)
评论(0)
推荐(0)
摘要：
我们来用pixi.js 来构建喷泉粒子 首先数据结构定义 let option = { renderer: { type: "simple", symbol: { startColor: "#beffd1", endColor: "#91ffd7", maxLifetime: 0.35, maxPa 阅读全文
posted @ 2022-01-20 17:26
haibalai
阅读(118)
评论(0)
推荐(0)
摘要：
cesium 的操作地图鼠标方式 对此我不是很喜欢，因为本来用arcgis习惯了所以构建一个typescript 工具类去改变操作习惯 参数定义 export interface PUserHabit{ rotateEventTypes:any[], tiltEventTypes:any[], zo 阅读全文
posted @ 2022-01-20 17:25
haibalai
阅读(143)
评论(0)
推荐(0)
摘要：
我们来用pixi.js 来构建火焰粒子 首先数据结构定义 let option = { renderer: { type: "simple", symbol: { startColor: "#ffb256", endColor: "#fff25f", maxLifetime: 0.3, maxPar 阅读全文
posted @ 2022-01-20 17:25
haibalai
阅读(96)
评论(0)
推荐(0)
摘要：
我们经常需要对多个地图进行联动 分别展示，对于cesium 的多屏联动 我们用typescript 实现 ```javascript export class LinkageMap{private viewers:Array;private focusIndex=0;constructor(_vie 阅读全文
posted @ 2022-01-20 17:24
haibalai
阅读(268)
评论(0)
推荐(0)
摘要：
我们用typescript 实现 cesium 天空盒子 let skyBox = { //会直接关闭大气层（存在大气层，近景效果不佳） nearSkyBox: { positiveX: "./images/skybox/03/px.jpg", positiveY: "./images/skybox 阅读全文
posted @ 2022-01-20 17:24
haibalai
阅读(664)
评论(0)
推荐(0)
摘要：
我们用typescript 实现一个地球自转工具类、 ```javascript/** 地球自转/ export class GlobalRotate{ private viewer: any = null; private delta = 0; private delayTime: any = n 阅读全文
posted @ 2022-01-20 17:23
haibalai
阅读(527)
评论(0)
推荐(0)
摘要：
我们来用pixi.js 来实现箭头导航线动画 首先数据结构定义 其中多了graph 相关就是拖尾运动sprite的设置 let option = { renderer: { type: "simple", symbol: { lineColor: "#ffff00", lineWidth: 4, a 阅读全文
posted @ 2022-01-20 17:22
haibalai
阅读(361)
评论(0)
推荐(0)
摘要：
我们用node js 来 一个小工具 爬取别人的3dtiles 但是不保证 复杂节点 类似点云这种不行 ```javascript let axios = require('axios');const fs = require('fs');const path = require('path'); 阅读全文
posted @ 2022-01-20 17:22
haibalai
阅读(138)
评论(0)
推荐(0)
摘要：
我们已经知道怎么实现贝塞尔曲线飞线 我们用图片来代替球类 首先数据结构定义 其中多了graph 相关就是拖尾运动球的设置 let option = { renderer:{ type: "simple", symbol: { lineColor: "#14ff34", lineWidth: 2, g 阅读全文
posted @ 2022-01-20 17:20
haibalai
阅读(257)
评论(0)
推荐(0)
摘要：
我们来用pixi.js 构建发光的线，这个可以用于交通道路端的可视化 首先数据结构定义 其 let option = { renderer: { type: "simple", symbol: { lineColor: "#48ff9a", lineWidth: 3, filterColor: "# 阅读全文
posted @ 2022-01-20 17:20
haibalai
阅读(212)
评论(0)
推荐(0)
摘要：
我们先定义一下贝塞尔曲线的数据结构 let option = { renderer:{ type: "simple", symbol: { lineColor: "#14ff34", lineWidth: 3 } }, data: [ { geometry: [ [12958063.6570659, 阅读全文
posted @ 2022-01-20 17:19
haibalai
阅读(300)
评论(0)
推荐(0)
摘要：
我们已经知道怎么实现贝塞尔曲线， 那么贝赛尔飞线 我们可以模拟sprite 沿着线的轨迹运动有点像飞线的感觉了 首先数据结构定义 其中多了graph 相关就是拖尾运动sprite的设置 let option = { renderer:{ type: "simple", symbol: { lineC 阅读全文
posted @ 2022-01-20 17:19
haibalai
阅读(191)
评论(0)
推荐(0)
摘要：
这次我们用pixi.js 做一个发光扩散圆和arcgis js结合 我们先定义一下 传入数据结构 let option = { renderer: { type: "simple", symbol: { color: "#ffda1a", radius: 12, width: 2, } }, dat 阅读全文
posted @ 2022-01-20 17:18
haibalai
阅读(229)
评论(0)
推荐(0)
摘要：
对于cesium 是可以模拟 天气系统我们来用typescript 构建一个天气工具类首先我们先定义参数 export interface PWeather { type:EWeather, option?:any } export enum EWeather { no=0,//雨 snow=1,/ 阅读全文
posted @ 2022-01-20 17:17
haibalai
阅读(658)
评论(0)
推荐(0)
摘要：
这次我们用pixi.js 做扩散圆和arcgis js结合 我们先定义一下 传入数据结构 let option = { renderer: { type: "simple", symbol: { innerCircle: { color: "#ffec15", radius: 8, }, outer 阅读全文
posted @ 2022-01-20 17:17
haibalai
阅读(130)
评论(0)
推荐(0)
摘要：
在放大缩小 我们可以做动画来针对不同比例尺缩放点我们使用gsap 库来做这个事情 针对gsap 还有PIXI 的插件 导入相关类库 和初始化 import { TimelineMax,Timeline, gsap } from "gsap/gsap-core"; import { PixiPlugi 阅读全文
posted @ 2022-01-20 17:16
haibalai
阅读(153)
评论(0)
推荐(0)
摘要：
这次我们用pixi.js 做缩放圆和arcgis js结合 我们先定义一下 传入数据结构 let option = { renderer: { type: "simple", symbol: { color: "#FF3366", radius: 20, width: 4, } }, data: [ 阅读全文
posted @ 2022-01-20 17:16
haibalai
阅读(132)
评论(0)
推荐(0)
摘要：
对于弹性圆效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialElasticCircle{ color?: any, speed?: number, } 对于弹性圆我们叫 MaterialElasticCircle ``ja 阅读全文
posted @ 2022-01-20 17:15
haibalai
阅读(101)
评论(0)
推荐(0)
摘要：
对于缩放 圆效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialZoom{ color?: any, speed?: number, zoom?: boolean, } 对于缩放 圆我们叫 MaterialZoom ```j 阅读全文
posted @ 2022-01-20 17:14
haibalai
阅读(102)
评论(0)
推荐(0)
摘要：
对于 折射纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialRefraction{ cubeMap: { positiveX: string, negativeX: string, positiveY: string, 阅读全文
posted @ 2022-01-20 17:14
haibalai
阅读(70)
评论(0)
推荐(0)
摘要：
对于fade 圆效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialFade{ color?: any, speed?: number, } 对于fade 圆我们叫 MaterialFade ```javascript im 阅读全文
posted @ 2022-01-20 17:13
haibalai
阅读(112)
评论(0)
推荐(0)
摘要：
对于木制墙纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialBrick{ color?: any, speed?: number, brickColor?: any, mortarColor?:any, brickSi 阅读全文
posted @ 2022-01-20 17:12
haibalai
阅读(89)
评论(0)
推荐(0)
摘要：
对于反射纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialReflection{ cubeMap: { positiveX: string, negativeX: string, positiveY: string, 阅读全文
posted @ 2022-01-20 17:12
haibalai
阅读(60)
评论(0)
推荐(0)
摘要：
对于扎染纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialTieDye{ lightColor?: any, darkColor?: any, frequency?: number, } 对于扎染墙纹理我们叫 Mate 阅读全文
posted @ 2022-01-20 17:11
haibalai
阅读(127)
评论(0)
推荐(0)
摘要：
对于砖石纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialFacet{ lightColor?: any, darkColor?: any, frequency?: number, } 对于砖石纹理我们叫 Materi 阅读全文
posted @ 2022-01-20 17:10
haibalai
阅读(63)
评论(0)
推荐(0)
摘要：
对于绿地纹理 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialGrass{ grassColor?: any, dirtColor?: any, patchiness?: number } 对于绿地纹理我们叫 Material 阅读全文
posted @ 2022-01-20 17:10
haibalai
阅读(97)
评论(0)
推荐(0)
摘要：
对于水泥纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialCement{ cementColor?: any, grainScale?: number, roughness?: number } 对于水泥纹理纹理我们叫 阅读全文
posted @ 2022-01-20 17:09
haibalai
阅读(138)
评论(0)
推荐(0)
摘要：
对于斑点墙纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialBlob{ lightColor?: any, darkColor?: any, frequency?:number } 对于斑点墙墙纹理我们叫 Materi 阅读全文
posted @ 2022-01-20 17:05
haibalai
阅读(283)
评论(0)
推荐(0)
摘要：
对于墙纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialBrick{ color?: any, speed?: number, brickColor?: any, mortarColor?:any, brickSize 阅读全文
posted @ 2022-01-20 17:05
haibalai
阅读(157)
评论(0)
推荐(0)
摘要：
对于沥青墙纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialAsphalt{ asphaltColor: any, bumpSize : 0.02, roughness : 0.2 } 对于沥青墙纹理我们叫 Mater 阅读全文
posted @ 2022-01-20 17:04
haibalai
阅读(172)
评论(0)
推荐(0)
摘要：
对于扫描线效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialScan{ color?: any, speed?: number, } 对于扫描线我们叫 MaterialScan ```javascript import { 阅读全文
posted @ 2022-01-20 17:03
haibalai
阅读(218)
评论(0)
推荐(0)
摘要：
对于电弧效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialElec{ color?:any, speed?:number } 对于电弧我们叫 MaterialElec ```javascriptimport { Mater 阅读全文
posted @ 2022-01-20 17:02
haibalai
阅读(76)
评论(0)
推荐(0)
摘要：
对于水波纹墙效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialWallRipple{ color?: any, speed?: number, count: number, } 对于水波纹墙我们叫 MaterialWall 阅读全文
posted @ 2022-01-20 17:01
haibalai
阅读(157)
评论(0)
推荐(0)
摘要：
对于水波纹效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialWaterRipple{ color?: any, speed?: number, count?: number, gradient?: number } 对于轨 阅读全文
posted @ 2022-01-20 17:00
haibalai
阅读(174)
评论(0)
推荐(0)
摘要：
对于扩散圆效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialDiffusionCircle{ color?: any, speed?: number, type?: EMaterialDiffusionCircle, } 阅读全文
posted @ 2022-01-20 17:00
haibalai
阅读(184)
评论(0)
推荐(0)
摘要：
对于闪烁线效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialFlicker{ color?:any, speed?:number, } 对于轨迹图片我们叫 MaterialFlicker ```javascript imp 阅读全文
posted @ 2022-01-20 16:59
haibalai
阅读(168)
评论(0)
推荐(0)
摘要：
对于动态流线效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialDynamicFlow{ color?:any, speed?:number, opacity?:number, percent?:number, } 对于动态 阅读全文
posted @ 2022-01-20 16:58
haibalai
阅读(192)
评论(0)
推荐(0)
摘要：
对于轨迹图片效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialTrailImage { color?: any; speed?: number; image: string; count?: number; directi 阅读全文
posted @ 2022-01-20 16:56
haibalai
阅读(227)
评论(0)
推荐(0)
摘要：
上次的风场在球面不是很好用， 这次给大家带来一个球面用的风场。 ```html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale 阅读全文
posted @ 2022-01-20 16:55
haibalai
阅读(183)
评论(0)
推荐(0)
摘要：
cesium 在materail 定义上还是比较自由的允许自己构建shader， 我整理一下常用的效果materail 设计全程使用typescript 来编写这个系列。 首先我们要设计material 的基础类 ```javascript const loadedMap = new Map<str 阅读全文
posted @ 2022-01-20 16:55
haibalai
阅读(411)
评论(0)
推荐(0)
摘要：
这一章节 我们来讲讲ParticleContainer 怎么添加事件， 变成了粒子容器后 pointdown事件是行不通了于是我想到游戏常常用到的碰撞检测。 刚好pixi.js 提供的检测的库也比较多，Bump 库就是其中之一，它允许 坐标和 sprite 是否碰撞 初始化bump 库, app 是 阅读全文
posted @ 2022-01-20 16:52
haibalai
阅读(90)
评论(0)
推荐(0)
摘要：
arcgis 加载carto 也很简单 目前官方maptalks 地图就是carto地图加载 我觉得挺好看的 于是我也用arcgis来加载 目前carto 地图加载的style 比较少 export enum CartoType { dark = 'dark_all', light = 'light 阅读全文
posted @ 2022-01-20 16:51
haibalai
阅读(55)
评论(0)
推荐(0)
摘要：
我看过很多arcgis 加载第三方地图 比如百度 高德 腾讯 天地图之类今天我来看看mapbox 地图加载经过我测试现在mapbox 只有几类style可以加载 export enum mapBoxType { streets = 'streets-v11', light = 'light-v10' 阅读全文
posted @ 2022-01-20 16:50
haibalai
阅读(171)
评论(0)
推荐(0)
摘要：
很多人用sceneMode 来进行二三维切换 ，其实这样不好用，位置什么的 图层状态都不好绑定，给人体验非常差对于arcgis 引擎 可以锁视角实现平滑切换，mapbox 引擎也可以锁视角实现，但是对于cesium 也是可以的 首先我们要知道获取中心点方法 function getCenter(vi 阅读全文
posted @ 2022-01-20 16:49
haibalai
阅读(804)
评论(0)
推荐(0)
摘要：
常常我们需要上传附件来加载图形，一般常用的有csv geojson 之类的 但是有些奇葩客户就要你加载shp 啊 gdb啊 甚至cad关于cad 这个 后面我再说 今天我们来讲讲shp 怎么通过arcgis 来加载 首先我们构建geojson转换类 GeoJsonConverter ```javas 阅读全文
posted @ 2022-01-20 16:48
haibalai
阅读(397)
评论(0)
推荐(0)
摘要：
当我们做洋流或者风场 可视化时候 echart 虽然也能用 但是数据量过大会很卡 数据调用是这个样子 样例数据链接: https://pan.baidu.com/s/1yQrIMBMJdSPwnnI8YOC1_Q 提取码: tnhc最终调用 import {VectorField} from './ 阅读全文
posted @ 2022-01-20 16:46
haibalai
阅读(404)
评论(0)
推荐(0)
摘要：
之前我也看过有人弄过mapv和arcgis结合，但是还是不太完美，对于部分效果是不支持的比如动画，因此我自己弄一个arcgis版本的mapV出来首先我们这次不是做插件 而是改造mapV， 去github 把整个mapV 下下来， 在mapV 构建两个类 首先是MapVRenderer.js 类``` 阅读全文
posted @ 2022-01-20 16:45
haibalai
阅读(129)
评论(0)
推荐(0)
摘要：
针对MapVLayer 调用 当我们构建好类后，直接构建一个新的mapV包出来 那么名字我随意叫了 xxxx import { MapVLayer } from '@xxxx/mapV' for(let item of r.features){ heatPoint.push( { geometry: 阅读全文
posted @ 2022-01-20 16:45
haibalai
阅读(126)
评论(0)
推荐(0)
摘要：
对于移动卡顿问题，我这边分为两个步骤 首先放大缩小监听zoom 事件 并且使用 debounce 操作，降低操作操作针对放大缩小增加debounce 减少运算， fun 里面Function 就是 篇幅二的方法 view.watch('zoom', debounce(fun, 150, false) 阅读全文
posted @ 2022-01-20 16:44
haibalai
阅读(112)
评论(0)
推荐(0)
摘要：
对于pixi的容器选择 我最初选择的是PIXI 最常用的Container ，而且事件什么都好说 有pointdown 事件 pixi.js 能够支持点击事件但是后面我发现 还有一个叫ParticleContainer 这个支持大数据量渲染 但是牺牲了很多东西 最多也就调整下位置 缩放之类的但是带来 阅读全文
posted @ 2022-01-20 16:43
haibalai
阅读(191)
评论(0)
推荐(0)
摘要：
最近 前端要绘制数据量巨大的数据 不借助服务，我发现arcgis 绘制是有一定上限的， 算了下大概接近7万多个点已经不行了，所以只能另辟其他方法。 后面发现pixi.js 是基于webgl 渲染 还挺好用的。 首先 pixi.js 本身是2维的webgl，主要用于游戏，但是也够了，我本来地图用的就是 阅读全文
posted @ 2022-01-20 16:42
haibalai
阅读(382)
评论(0)
推荐(0)
摘要：
通过我们构建的EsriClusterLayer 还没有完全做完 那个只是封装了一个Featurelayer而已首页options 我们定义有什么呢 fields: featurelayer 的fileds 集合 等同于 FeatureLayer的fields geometryType: geomet 阅读全文
posted @ 2022-01-20 16:41
haibalai
阅读(85)
评论(0)
推荐(0)
摘要：
目前arcgis 的聚合图层有几个方案，一个是基于arcgis 官方cluser属性 不过只能适用于mapView，还有一种基于github的flareCluster，flareCluster 拖动会导致抖动。设计思路 - 原来的clusterlayer 是用graphiclayer 实现的，因为a 阅读全文
posted @ 2022-01-20 16:39
haibalai
阅读(198)
评论(0)
推荐(0)
摘要：
在 做地图定位时候 往往都是高亮边框的方式来做样式展示，今天通过gl-matrix 结合做 闪烁定位，有点像照相机 闪了一下的感觉 ```html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" cont 阅读全文
posted @ 2022-01-20 16:37
haibalai
阅读(163)
评论(0)
推荐(0)
摘要：
arcgis 在做二维的 class-break 往往是用simplefillSymol 来做面，比较单一，除了颜色和边框，不能再设置更多的方式了不过可以用gl-matrix 结合来做凹凸起伏的可视化。 ```html<!DOCTYPE html><html><head> <meta charset 阅读全文
posted @ 2022-01-20 16:36
haibalai
阅读(212)
评论(0)
推荐(0)
摘要：
在arcgis中线的样式实在太难修改了，要是想做特效的线必须要借助webgl效果来弄在官网gl-matrix 的线效果有特例https://developers.arcgis.com/javascript/latest/sample-code/custom-gl-animated-lines/ 今天 阅读全文
posted @ 2022-01-20 16:34
haibalai
阅读(104)
评论(0)
推荐(0)
摘要：
arcgis 在官网有个可以和webgl 结合的案例 https://developers.arcgis.com/javascript/latest/sample-code/custom-gl-visuals/ 具体做法使用webgl 制作一个自己的customLayer图层。 最近deck.gl 阅读全文
posted @ 2022-01-20 16:32
haibalai
阅读(203)
评论(0)
推荐(0)
摘要：
相信大家都用过echart和各种地图引擎做结合， echart 还有个开发包是echart-gl 是用来做三维图表开发的，但是echart-gl 很难在三维地图上做相机视角同步，这样就会很别扭，不能成为地图的一部分，echart-gl 开发的引擎正是 claygl 引擎，其中arcgis官方文档有指 阅读全文
posted @ 2022-01-20 16:30
haibalai
阅读(216)
评论(0)
推荐(0)
浙公网安备 33010602011771号