01 2022 档案
摘要：高亮要素 ```javascript import {cw5} from "../index.js";export const highLightUtils = {}; /** 高亮单个物体 fc 要素类 fid 要素Fid color 高亮颜色*/highLightUtils.single= fu
阅读全文
摘要：事件点击控制 调用 let params={ maskType:"gviSelectFeatureLayer", handle:"buildingbuilding" } let params2 = { maskType: "gviSelectAll", handle: "" }; let cb=fu
阅读全文
摘要：测量调用 cw5.measure.measureMent(type) cw5.measure.measureCancel() 测量工具 measure```javascript import {cw5} from "../index.js";export const measure = {}; /*
阅读全文
摘要：工具类 支持常见的color 转换和全屏控制 调用 let contentObj={ "名称":"test", "层数":"22", "所在地":"深圳" } let config={ id:"test", title:"大楼信息展示", x:150139, y: 37917, z:64 } let
阅读全文
摘要：弹窗控制器 调用 let config={ url: "C:\\Program Files (x86)\\CityMaker 7\\CityMaker SDK\\Samples\\JS\\beginner\\HTMLWindow\\Introdution.html" } cw5.popUtils.p
阅读全文
摘要：视频投射 调用 let p1 = cw5.geometryCreator.createPoint(150089, 37917, 68); let videoPath="C:\\Program Files (x86)\\CityMaker 7\\CityMaker SDK\\Samples\\Medi
阅读全文
摘要：场景渲染控制器 调用 switch (type) { case "pause": cw5.sceneLayerCtrl.stopRendering(); break; case "resume": cw5.sceneLayerCtrl.resumeRendering(); break; case "
阅读全文
摘要：视角巡航 调用 let p1 = cw5.geometryCreator.createPoint(150139, 37917, 64); let p2 = cw5.geometryCreator.createPoint(150180, 37854, 64); let poi1 = cw5.geome
阅读全文
摘要：常见的拉模工具 调用 let rule1 = { name: "BLDG_USAGE", value: "工业" }; let rule2 = { name: "BLDG_USAGE", value: "商服" }; let symbol = cw5.symbolCreator.createPoly
阅读全文
摘要：相机工具 调用 let line = cw5.geometryCreator.createPolyline([[150139, 37917, 64], [150180, 37854, 64], [150258, 37887, 64]]); switch (type) { case "lookPosi
阅读全文
摘要：常见的缓冲分析封装 调用 let p1 = cw5.geometryCreator.createPoint(150139, 37917, 64); let line = cw5.geometryCreator.createPolyline([[150139, 37917, 64], [150180,
阅读全文
摘要：针对查询 调用 let rule = { name: "用途", value: "私宅" }; let polygon = cw5.geometryCreator.createPolygon([[150139, 37917, 64], [150180, 37854, 64], [150258, 37
阅读全文
摘要：绘制调用 let cb = function(res) { alert("自定义回调 查询成功"); }; switch (type) { case "polyline": cw5.mouseDrawUtils.polyline("draw2", "#FFFF00", 5, 0.7, cb); br
阅读全文
摘要：调用 let p1 = cw5.geometryCreator.createPoint(150139, 37917, 64); let p2 = cw5.geometryCreator.createPoint(150180, 37854, 64); let poi1 = cw5.geometryCr
阅读全文
摘要：针对设置citymaker 天空盒工具类skyBox ```javascript import { cw5 } from "../index.js";export const skyBox = {}; /** 设置天空盒图片 @param baseUrl 天空盒图片的基础路径 @param imag
阅读全文
摘要：这次我们来说下要素构建 要素构建 ```javasctiptimport { cw5 } from "../index.js"; export const geometryCreator = {}; //原生类型值反映射枚举; type, 代表高程 let innerType = {0: "unkn
阅读全文
摘要：这个系列最重要的来了 cw5这个类主要是构建地图加载 针对citymaker初始化 <div class="map-container" style="float:left;width:1200px;height:800px;"> <object id="__g" type="application
阅读全文
摘要：针对加载citymaker的图层 和主容器的配置如果是ted 类型dataset 和 name参数参考citymaker server服务器发布的服务 { "aliceName": "map_dixing", "handle": "地形", "dataSet": "pingshan0213", "g
阅读全文
摘要：针对 事件推送模块 我们使用eventBus来做 后续的功能都会使用这个事件总线```javascript /** Created by Administrator on 2017/4/26 0026.*/import EventEmitter from 'wolfy87-eventemitter'
阅读全文
摘要：对于调用方式 这里使用vue来调用 <template> <div > <canvas id="renderCanvas" touch-action="none"></canvas> </div> </template> <script type="text/ecmascript-6"> const
阅读全文
摘要：今天来分享下 基于citymaker 构建快速的封装的gis库的故事 针对citymaker 常用的判断textInfo let textInfo = { GENERAL:{ GET_IT:'我知道了', DOWNLOAD:'前往下载' }, MAC:{ INFO:'您的系统是 Mac OSX 系统
阅读全文
摘要：针对切片管理 针对EarthControl类 主要是管理主类 负责事件监听后重新刷新切片```javascript const BABYLON = require('babylonjs');import {EarthTool} from './EarthTool';import {BuildTile
阅读全文
摘要：对于切片管理类 针对切片shader 获取 TileTexture类 , 调整PROVIDER 可以支持不同的切片地图```javascriptconst BABYLON = require('babylonjs'); export class TileTexture {constructor(sc
阅读全文
摘要：针对切片管理 BuildTileTool类```javascriptconst BABYLON = require('babylonjs');import {TileTexture} from './TileTexture';import {EarthTool} from './EarthTool'
阅读全文
摘要：首先babylonjs 相机我们要改造 对于相机改造类图如下 针对EarthCamera类 const BABYLON = require('babylonjs'); export class EarthCamera extends BABYLON.ArcRotateCamera { constru
阅读全文
摘要：继续上一篇camera 的类 针对CameraEarthWheelControl```javascriptconst BABYLON = require('babylonjs');import {EarthTool} from './EarthTool'; export class CameraEa
阅读全文
摘要：今天我们来分享一下用babylonjs 构建三维地球， 并且支持 常用的第三方切片 首先我们先有一个工具类，支持切片计算，设置等级 经纬度转化等函数工具类 Tile 类 export class Tile { constructor(offsetX, offsetY, level, k, j, nF
阅读全文
摘要：arcgis 官网有与deckgl整合的二维三维整合也是可以，不过还是有点bug 我们先构建基础类 基础图层 const {loadArcGISModules} = require("@deck.gl/arcgis"); export default class BaseLayer { layer:
阅读全文
摘要：针对deckgl TripsLayer 我们构建采集器，目的是支持多种数据类型到 TripsLayer, 并且支持arcgis 服务 const axios = require('axios') export default class TripsLayerParser { static getDa
阅读全文
摘要：针对HexagonLayer HexagonLayer 的数据构建器 const axios = require('axios') export default class TripsLayerParser { static getDataFromUrl(url: string) { return
阅读全文
摘要：之前有篇文章https://xiaozhuanlan.com/topic/2978031564是利用 线的坐标做requestAnimationFrame来做动画， 如果是两点一线的话就显示不出动画的场景了，因为之前做法是根据线的点来做，我们这次使用线先做插值 把线打断, 具体类涉及仿照openla
阅读全文
摘要：调用 let lineSymbol2 = { type: "simple-line", color: "#ffffff", width: "2", style: "solid" }, let lineSymbol = { type: "simple-line", color: "#1cccdf",
阅读全文
摘要：针对写glsl要点 针对glsl 颜色范围 是 0-1 针对attributes， uniform ，varying 变量时候 ，前缀添加 a, v, u 例如 attribute vec2 aPosition; varying vec2 vUv; uniform sampler2D uTextur
阅读全文
摘要：构建雷达扫描 ``` // TODO 未集成export class RadarRadiationWave {viewer:any; init(map: any){ this.viewer = map; this.initRadarRiationWave1(); this.initRadarRiat
阅读全文
摘要：参考别人整理的一些要点 数据类型 void 表示空 bool 表示 布尔 int 表示整数 float 表示 浮点 vec2 表示两个浮点向量 vec3 表示三个浮点向量 vec4 表示四个浮点向量 bvec2 表示两个布尔向量 bvec3 表示三个布尔向量 bvec4 表示四个布尔向量 ivec2
阅读全文
摘要：我们来构建视频图层 首先做定义 export interface PVideoEntity{ name?:string, entity:any, video:any, } 视频构建图层```javascript import { PVideoEntity } from './PVideoEntity
阅读全文
摘要：我们来构建等高线图层 ```javascript import {Layer} from "./Layer";import { GraphicLayer } from "./GraphicLayer"; export class IsoLineLayer extends Layer {private
阅读全文
摘要：这里需要ImageryLayer 定义参考 cesium 图层那些事 ```javascript/** 卷帘效果*/ import {ImageryLayer} from "./ImageryLayer"; export class ShutterEffect {private map: any;p
阅读全文
摘要：对于cesium entiy的增删改查 我们来封装一个layer来统一管理类似arcgis js 的GraphicLayer 中间数据管理类 import {Layer} from "./Layer"; export abstract class DataSourceLayer extends La
阅读全文
摘要：我们之前构建过arcgis 的风场图层 这次我们切换构建cesium的风场图层我们先设计一下风场的工具类 vector类定义 class Vector { public u:number; public v:number; public m:number; constructor(u:number,
阅读全文
摘要：接上一篇风场文章 请求工具类 export class FetchUtil { /** * 将对象转成 a=1&b=2的形式 * @param obj 对象 */ private static obj2String(obj: any = {}, arr: any = [], idx: any = 0
阅读全文
摘要：根据线动画 前期准备加载esri 需要的类 const [Graphic, GraphicsLayer, Polyline] = await esriClass.load([esriClassName.Graphic, esriClassName.GraphicsLayer, esriClassNa
阅读全文
摘要：我门封装倾斜摄影图层 首先看定义 export interface PTile3dLayer{ } export interface PMaxtrix { position?:{ x:number, //模型中心X轴坐标（经度，单位：十进制度） y:number, //模型中心Y轴坐标（纬度，单位：
阅读全文
摘要：说完cesium 同步地图 arcgis 同步地图更简单些 ```javascript export class CityWorkLinkAge { linkLayer:Map<any,any> = new Map<string, any="">(); linkLayerHandle1:Map<an
阅读全文
摘要：今天我们来讲下聚合图层 首先我们定义参数 export enum ECluserLayerType { circle = 0, shine = 1, image = 2,//未实现 } interface ClusterColor { value: number, color: string } e
阅读全文
摘要：根据基础聚合类，我们构建geojosn序列化的聚合使用类 首先是参数定义 interface ClassBreak { minValue: number, maxValue: number, symbol: any } interface UniqueValue { value: number, s
阅读全文
摘要：大家都看过cesium的场景漫游但是arcgis 场景漫游很少，我通过研究esri 的ExperienceBuilder 发现场景漫游挺好用的，通过改造能适配最新版本4.21 初始化 let controllerManager = new ControllerManager({ sceneView:
阅读全文
摘要：大家知道arcgis 键盘可以操作地图的前进后退， 我碰到一个需求需要在触屏面板 去操作键盘事件我发现arcgis 并没有提供相应的api，于是我构建了一个触屏可以操作键盘上下左右 前进后退的模拟类 ```javascript import {esriClass, esriClassName} fr
阅读全文
摘要：有了上一章说Primiteve图层 我们就可以定义丰富数据图层比如我们定义水面 图层先定义水面图层参数定义 export interface PWaterPrimitives{ id: string, source: Array<number>, symbol?: { url?: string, h
阅读全文
摘要：之前看过别人封装一个esri-loader工具挺好用现在重新用typescript 构建 ```javascript // @ts-ignoreimport esriLoader from 'esri-loader'; export enum esriClassName {externalRende
阅读全文
摘要：针对 一些Primiteve 特定要素我们定义Primiteve图层 ```javascript import {Layer} from "./Layer"; export abstract class PrimiteveLayer extends Layer {constructor(name:
阅读全文
摘要：我们这次来构建热力图 热力图定义参数 export interface PHeatMapRenderer { type: string; radius: number; colorStops: Array<{ color: string, ratio: number }>, blur?: numbe
阅读全文
摘要：我们来构建echart 图层```javascript import {Layer} from "./Layer";import echarts from 'echarts'; class E3CoordinateSystem {_viewer: any;_mapOffset = [0, 0];di
阅读全文
摘要：针对不是图片的图层 我们制作DataSourceLayer ```javavscript import {Layer} from "./Layer"; export abstract class DataSourceLayer extends Layer{type: String = "DataSo
阅读全文
摘要：今天我们来构建复杂一点的图层 云图 我们先定义一些定义参数 //位置 export interface PPoint{ x:Number, y:Number, z?:Number, spatialReference?:Number; } export interface PCloudImageLay
阅读全文
摘要：我们来构建 cesium 单图片图层和arcgis图层 ```javascript import {ImageryLayer} from "./ImageryLayer"; //arcgis珊格服务export class ArcGisImageryLayer extends ImageryLaye
阅读全文
摘要：我们构建腾讯图层类 ```javascript import { ImageryLayer} from "./ImageryLayer";const opt:any = {url : 'https://p{s}.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{r
阅读全文
摘要：我们构建goolge图层类 ```javascript import {ImageryLayer} from "./ImageryLayer";const options:any = {digital:{url:"https://mt{s}.google.cn/vt/lyrs=s&hl=zh-CN&
阅读全文
摘要：我们构建高德图层类 ```javascript import {ImageryLayer} from "./ImageryLayer";const options:any = {digital:{//电子地图url:"http://webrd0{s}.is.autonavi.com/appmapti
阅读全文
摘要：我们通过构建百度地图容器类 ```javascript import {ImageryLayer} from "../ImageryLayer"; const urls:any = {digital:"http://online{s}.map.bdimg.com/onlinelabel/?qt=ti
阅读全文
摘要：我们构建天地图图层类 ```javascript import {ImageryLayer} from "./ImageryLayer";const options:any = {digital:{url: http://t{s}.tianditu.com/vec_w/wmts?service=wm
阅读全文
摘要：那么BusinessLayer 到底是什么的，我们这里把它定义为业务图层我们先从最简单的第三方地图开始说起 我们定义ImageryLayer 来做第三方地图的容器 map 指的就是viewer ```javascripot import {Layer} from './Layer'; export
阅读全文
摘要：今天我们来聊聊图层构建的那些事情,全程使用typescript来实现 这是设计 首先我先定义个图层元组Tuple，它是一个抽象类，它具备一些基础通用方法约束，比如显示隐藏，飞入，图层加载，回调等等 ```javascript /** 在地图上展示的最小分类元祖*/export abstract cl
阅读全文
摘要：说完构建元组我们在构建Layer 基础类， 这个基础定义了show flyto 可以用方法 ``` import { Tuple } from "./Tuple"; export abstract class Layer extends Tuple{type: String = "Layer";na
阅读全文
摘要：我们利用d3滤镜为d3元素增加光的效果 我们存一些全局变量 this.animateOption = null; this.defs = null; this.animateId = ""; this.feDropShadow = null; 滤镜初始化 function create(option
阅读全文
摘要：我们来用d3.js 来实现动画虚线 可以应用于polyline 首先数据结构定义 let options = { renderer: { type: "simple", symbol: { color: "#e97501", width: "3", dasharray: "10", animatio
阅读全文
摘要：我们来用d3.js 来实现虚线动画圆 首先数据结构定义 let options = { renderer: { type: "simple", symbol: { r: 7000, color: "#e97501", width: "3", dasharray: "10", animation: "
阅读全文
摘要：在我们做可视化大屏的时候 我们经常要适应不同的屏幕， 如果拿rem 来做的话也是没问题的，但是很多组件就要自己改才行，地图也是百分比也是大家的方案。但是仔细观察阿里云的datav 大屏方案，它是由body transfrom scale来解决这个问题，所有dom 元素进行缩放，px一样可以但是对于很
阅读全文
摘要：我们使用d3.js 与arcgis 构建扩散圆 首先还是先定义数据结构 let options = { renderer: { type: "simple", symbol: { r: 8, color2: "#476db6", color1: "#0f46ab", width: "1.5", ti
阅读全文
摘要：arcgis js 4 自带的热力图只能用于mapView， 对于sceneView 只能用别的方法来构建，对于最新arcgis api dojo 已经全部清除之前热力图构建方法失效，于是乎重新改代码 其中Point 是esri 的Point 可以预先加载好存起来```javascript // @
阅读全文
摘要：这次我们用d3.js 来构建可视化首先我们 定义一些坐标转换的工具方法 toScreen 方法```javascript //构建arcgis 的mapViewlet view = mapView toScreen(coordinate) { let coordinateType = getXYTy
阅读全文
摘要：我们使用d3.js 与arcgis 构建缩放圆 首先还是先定义数据结构 let options = { renderer: { type: "simple", symbol: { r: 10, //圆半径 color: "#0cff04", //圆颜色 time1: 800, //放大速度 time
阅读全文
摘要：我们来用pixi.js 来实现爆炸粒子 首先数据结构定义 let option = { renderer:{ type:'simple', symbol:{ url:'', json:'', spriteScale: 0.5, animationSpeed: 0.6, spriteTint: "#F
阅读全文
摘要：我们来用pixi.js 来构建喷泉粒子 首先数据结构定义 let option = { renderer: { type: "simple", symbol: { startColor: "#beffd1", endColor: "#91ffd7", maxLifetime: 0.35, maxPa
阅读全文
摘要：cesium 的操作地图鼠标方式 对此我不是很喜欢，因为本来用arcgis习惯了所以构建一个typescript 工具类去改变操作习惯 参数定义 export interface PUserHabit{ rotateEventTypes:any[], tiltEventTypes:any[], zo
阅读全文
摘要：我们来用pixi.js 来构建火焰粒子 首先数据结构定义 let option = { renderer: { type: "simple", symbol: { startColor: "#ffb256", endColor: "#fff25f", maxLifetime: 0.3, maxPar
阅读全文
摘要：我们经常需要对多个地图进行联动 分别展示，对于cesium 的多屏联动 我们用typescript 实现 ```javascript export class LinkageMap{private viewers:Array;private focusIndex=0;constructor(_vie
阅读全文
摘要：我们用typescript 实现 cesium 天空盒子 let skyBox = { //会直接关闭大气层（存在大气层，近景效果不佳） nearSkyBox: { positiveX: "./images/skybox/03/px.jpg", positiveY: "./images/skybox
阅读全文
摘要：我们用typescript 实现一个地球自转工具类、 ```javascript/** 地球自转/ export class GlobalRotate{ private viewer: any = null; private delta = 0; private delayTime: any = n
阅读全文
摘要：我们来用pixi.js 来实现箭头导航线动画 首先数据结构定义 其中多了graph 相关就是拖尾运动sprite的设置 let option = { renderer: { type: "simple", symbol: { lineColor: "#ffff00", lineWidth: 4, a
阅读全文
摘要：我们用node js 来 一个小工具 爬取别人的3dtiles 但是不保证 复杂节点 类似点云这种不行 ```javascript let axios = require('axios');const fs = require('fs');const path = require('path');
阅读全文
摘要：我们已经知道怎么实现贝塞尔曲线飞线 我们用图片来代替球类 首先数据结构定义 其中多了graph 相关就是拖尾运动球的设置 let option = { renderer:{ type: "simple", symbol: { lineColor: "#14ff34", lineWidth: 2, g
阅读全文
摘要：我们来用pixi.js 构建发光的线，这个可以用于交通道路端的可视化 首先数据结构定义 其 let option = { renderer: { type: "simple", symbol: { lineColor: "#48ff9a", lineWidth: 3, filterColor: "#
阅读全文
摘要：我们先定义一下贝塞尔曲线的数据结构 let option = { renderer:{ type: "simple", symbol: { lineColor: "#14ff34", lineWidth: 3 } }, data: [ { geometry: [ [12958063.6570659,
阅读全文
摘要：我们已经知道怎么实现贝塞尔曲线， 那么贝赛尔飞线 我们可以模拟sprite 沿着线的轨迹运动有点像飞线的感觉了 首先数据结构定义 其中多了graph 相关就是拖尾运动sprite的设置 let option = { renderer:{ type: "simple", symbol: { lineC
阅读全文
摘要：这次我们用pixi.js 做一个发光扩散圆和arcgis js结合 我们先定义一下 传入数据结构 let option = { renderer: { type: "simple", symbol: { color: "#ffda1a", radius: 12, width: 2, } }, dat
阅读全文
摘要：对于cesium 是可以模拟 天气系统我们来用typescript 构建一个天气工具类首先我们先定义参数 export interface PWeather { type:EWeather, option?:any } export enum EWeather { no=0,//雨 snow=1,/
阅读全文
摘要：这次我们用pixi.js 做扩散圆和arcgis js结合 我们先定义一下 传入数据结构 let option = { renderer: { type: "simple", symbol: { innerCircle: { color: "#ffec15", radius: 8, }, outer
阅读全文
摘要：在放大缩小 我们可以做动画来针对不同比例尺缩放点我们使用gsap 库来做这个事情 针对gsap 还有PIXI 的插件 导入相关类库 和初始化 import { TimelineMax,Timeline, gsap } from "gsap/gsap-core"; import { PixiPlugi
阅读全文
摘要：这次我们用pixi.js 做缩放圆和arcgis js结合 我们先定义一下 传入数据结构 let option = { renderer: { type: "simple", symbol: { color: "#FF3366", radius: 20, width: 4, } }, data: [
阅读全文
摘要：对于弹性圆效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialElasticCircle{ color?: any, speed?: number, } 对于弹性圆我们叫 MaterialElasticCircle ``ja
阅读全文
摘要：对于缩放 圆效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialZoom{ color?: any, speed?: number, zoom?: boolean, } 对于缩放 圆我们叫 MaterialZoom ```j
阅读全文
摘要：对于 折射纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialRefraction{ cubeMap: { positiveX: string, negativeX: string, positiveY: string,
阅读全文
摘要：对于fade 圆效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialFade{ color?: any, speed?: number, } 对于fade 圆我们叫 MaterialFade ```javascript im
阅读全文
摘要：对于木制墙纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialBrick{ color?: any, speed?: number, brickColor?: any, mortarColor?:any, brickSi
阅读全文
摘要：对于反射纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialReflection{ cubeMap: { positiveX: string, negativeX: string, positiveY: string,
阅读全文
摘要：对于扎染纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialTieDye{ lightColor?: any, darkColor?: any, frequency?: number, } 对于扎染墙纹理我们叫 Mate
阅读全文
摘要：对于砖石纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialFacet{ lightColor?: any, darkColor?: any, frequency?: number, } 对于砖石纹理我们叫 Materi
阅读全文
摘要：对于绿地纹理 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialGrass{ grassColor?: any, dirtColor?: any, patchiness?: number } 对于绿地纹理我们叫 Material
阅读全文
摘要：对于水泥纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialCement{ cementColor?: any, grainScale?: number, roughness?: number } 对于水泥纹理纹理我们叫
阅读全文
摘要：对于斑点墙纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialBlob{ lightColor?: any, darkColor?: any, frequency?:number } 对于斑点墙墙纹理我们叫 Materi
阅读全文
摘要：对于墙纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialBrick{ color?: any, speed?: number, brickColor?: any, mortarColor?:any, brickSize
阅读全文
摘要：对于沥青墙纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialAsphalt{ asphaltColor: any, bumpSize : 0.02, roughness : 0.2 } 对于沥青墙纹理我们叫 Mater
阅读全文
摘要：对于扫描线效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialScan{ color?: any, speed?: number, } 对于扫描线我们叫 MaterialScan ```javascript import {
阅读全文
摘要：对于电弧效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialElec{ color?:any, speed?:number } 对于电弧我们叫 MaterialElec ```javascriptimport { Mater
阅读全文
摘要：对于水波纹墙效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialWallRipple{ color?: any, speed?: number, count: number, } 对于水波纹墙我们叫 MaterialWall
阅读全文
摘要：对于水波纹效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialWaterRipple{ color?: any, speed?: number, count?: number, gradient?: number } 对于轨
阅读全文
摘要：对于扩散圆效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialDiffusionCircle{ color?: any, speed?: number, type?: EMaterialDiffusionCircle, }
阅读全文
摘要：对于闪烁线效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialFlicker{ color?:any, speed?:number, } 对于轨迹图片我们叫 MaterialFlicker ```javascript imp
阅读全文
摘要：对于动态流线效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialDynamicFlow{ color?:any, speed?:number, opacity?:number, percent?:number, } 对于动态
阅读全文
摘要：对于轨迹图片效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialTrailImage { color?: any; speed?: number; image: string; count?: number; directi
阅读全文
摘要：上次的风场在球面不是很好用， 这次给大家带来一个球面用的风场。 ```html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale
阅读全文
摘要：cesium 在materail 定义上还是比较自由的允许自己构建shader， 我整理一下常用的效果materail 设计全程使用typescript 来编写这个系列。 首先我们要设计material 的基础类 ```javascript const loadedMap = new Map<str
阅读全文
摘要：这一章节 我们来讲讲ParticleContainer 怎么添加事件， 变成了粒子容器后 pointdown事件是行不通了于是我想到游戏常常用到的碰撞检测。 刚好pixi.js 提供的检测的库也比较多，Bump 库就是其中之一，它允许 坐标和 sprite 是否碰撞 初始化bump 库, app 是
阅读全文
摘要：arcgis 加载carto 也很简单 目前官方maptalks 地图就是carto地图加载 我觉得挺好看的 于是我也用arcgis来加载 目前carto 地图加载的style 比较少 export enum CartoType { dark = 'dark_all', light = 'light
阅读全文
摘要：我看过很多arcgis 加载第三方地图 比如百度 高德 腾讯 天地图之类今天我来看看mapbox 地图加载经过我测试现在mapbox 只有几类style可以加载 export enum mapBoxType { streets = 'streets-v11', light = 'light-v10'
阅读全文
摘要：很多人用sceneMode 来进行二三维切换 ，其实这样不好用，位置什么的 图层状态都不好绑定，给人体验非常差对于arcgis 引擎 可以锁视角实现平滑切换，mapbox 引擎也可以锁视角实现，但是对于cesium 也是可以的 首先我们要知道获取中心点方法 function getCenter(vi
阅读全文
摘要：常常我们需要上传附件来加载图形，一般常用的有csv geojson 之类的 但是有些奇葩客户就要你加载shp 啊 gdb啊 甚至cad关于cad 这个 后面我再说 今天我们来讲讲shp 怎么通过arcgis 来加载 首先我们构建geojson转换类 GeoJsonConverter ```javas
阅读全文
摘要：当我们做洋流或者风场 可视化时候 echart 虽然也能用 但是数据量过大会很卡 数据调用是这个样子 样例数据链接: https://pan.baidu.com/s/1yQrIMBMJdSPwnnI8YOC1_Q 提取码: tnhc最终调用 import {VectorField} from './
阅读全文
摘要：之前我也看过有人弄过mapv和arcgis结合，但是还是不太完美，对于部分效果是不支持的比如动画，因此我自己弄一个arcgis版本的mapV出来首先我们这次不是做插件 而是改造mapV， 去github 把整个mapV 下下来， 在mapV 构建两个类 首先是MapVRenderer.js 类```
阅读全文
摘要：针对MapVLayer 调用 当我们构建好类后，直接构建一个新的mapV包出来 那么名字我随意叫了 xxxx import { MapVLayer } from '@xxxx/mapV' for(let item of r.features){ heatPoint.push( { geometry:
阅读全文
摘要：对于移动卡顿问题，我这边分为两个步骤 首先放大缩小监听zoom 事件 并且使用 debounce 操作，降低操作操作针对放大缩小增加debounce 减少运算， fun 里面Function 就是 篇幅二的方法 view.watch('zoom', debounce(fun, 150, false)
阅读全文
摘要：对于pixi的容器选择 我最初选择的是PIXI 最常用的Container ，而且事件什么都好说 有pointdown 事件 pixi.js 能够支持点击事件但是后面我发现 还有一个叫ParticleContainer 这个支持大数据量渲染 但是牺牲了很多东西 最多也就调整下位置 缩放之类的但是带来
阅读全文
摘要：最近 前端要绘制数据量巨大的数据 不借助服务，我发现arcgis 绘制是有一定上限的， 算了下大概接近7万多个点已经不行了，所以只能另辟其他方法。 后面发现pixi.js 是基于webgl 渲染 还挺好用的。 首先 pixi.js 本身是2维的webgl，主要用于游戏，但是也够了，我本来地图用的就是
阅读全文
摘要：通过我们构建的EsriClusterLayer 还没有完全做完 那个只是封装了一个Featurelayer而已首页options 我们定义有什么呢 fields: featurelayer 的fileds 集合 等同于 FeatureLayer的fields geometryType: geomet
阅读全文
摘要：目前arcgis 的聚合图层有几个方案，一个是基于arcgis 官方cluser属性 不过只能适用于mapView，还有一种基于github的flareCluster，flareCluster 拖动会导致抖动。设计思路 - 原来的clusterlayer 是用graphiclayer 实现的，因为a
阅读全文
摘要：在 做地图定位时候 往往都是高亮边框的方式来做样式展示，今天通过gl-matrix 结合做 闪烁定位，有点像照相机 闪了一下的感觉 ```html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" cont
阅读全文
摘要：arcgis 在做二维的 class-break 往往是用simplefillSymol 来做面，比较单一，除了颜色和边框，不能再设置更多的方式了不过可以用gl-matrix 结合来做凹凸起伏的可视化。 ```html<!DOCTYPE html><html><head> <meta charset
阅读全文
摘要：在arcgis中线的样式实在太难修改了，要是想做特效的线必须要借助webgl效果来弄在官网gl-matrix 的线效果有特例https://developers.arcgis.com/javascript/latest/sample-code/custom-gl-animated-lines/ 今天
阅读全文
摘要：arcgis 在官网有个可以和webgl 结合的案例 https://developers.arcgis.com/javascript/latest/sample-code/custom-gl-visuals/ 具体做法使用webgl 制作一个自己的customLayer图层。 最近deck.gl
阅读全文
摘要：相信大家都用过echart和各种地图引擎做结合， echart 还有个开发包是echart-gl 是用来做三维图表开发的，但是echart-gl 很难在三维地图上做相机视角同步，这样就会很别扭，不能成为地图的一部分，echart-gl 开发的引擎正是 claygl 引擎，其中arcgis官方文档有指
阅读全文
