图表及地图相关
文章平均质量分 50
图表绘制,地图渲染
依赖_赖
这个作者很懒,什么都没留下…
展开
-
cesium加载S3M白膜,通过分层设色实现渐变效果,设置点光源
var hyp = null;var layer = null;//加载白膜function fnOpenSCENE() { var promise = scene.open('http://www.supermapol.com/realspace/services/3D-CBDbuilding/rest/realspace'); Cesium.when.all(promise, function () { //切换视角至模型位置 scene.camera.setView({原创 2022-05-12 11:33:28 · 4659 阅读 · 2 评论 -
cesium加载线/面,通过shader自定义材质实现流动效果
定义PolylineTrailLinkMaterialProperty.js并引入(function () { /* 流动纹理线 color 颜色 duration 持续时间 毫秒 trailImage 贴图地址 */ function PolylineTrailLinkMaterialProperty(color, trailImage , duration) { this._definitionChanged = new Cesium原创 2022-05-11 16:17:38 · 3456 阅读 · 4 评论 -
cesium加载报警点,通过shader自定义材质实现圆形扩散波纹效果
定义CircleWaveMaterialProperty.js并引入function CircleWaveMaterialProperty(options) { options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT); this._definitionChanged = new Cesium.Event(); this._color = undefined; this._colorSubscr原创 2022-05-11 15:59:27 · 2325 阅读 · 3 评论 -
cesium加载电子围栏,通过shader自定义材质实现动态墙效果,cavans自定义材质实现分层效果
cavans自定义材质,设置颜色/** * 颜色渐变 */getColorRamp(elevationRamp, isVertical = true) { let ramp = document.createElement('canvas'); ramp.width = isVertical ? 1 : 100; ramp.height = isVertical ? 100 : 1; let ctx = ramp.getContext('2d'); let原创 2022-05-11 15:30:54 · 5550 阅读 · 12 评论 -
cesium加载3dtiles白膜,通过shader自定义材质实现渐变效果并显示动态光环
关键代码:function loadTilesShader(tileset) { tileset.style = new Cesium.Cesium3DTileStyle({ color: { conditions: [ ['true', 'rgba(0, 127.5, 255 ,1)'] ] } }); //实现渐变效果 tileset.tileVisible.addEventListener(function (tile) {原创 2022-05-11 14:56:14 · 5007 阅读 · 16 评论 -
Cesium通过primitives绘制大数据量扇形图
cesium加载扇形图原创 2022-04-12 16:56:00 · 1866 阅读 · 1 评论 -
Cesium加载entities实体,包括文字标注,图标(动态缩放效果),线(尾迹线效果),面(动态闪烁效果),背景图,围栏(立体分层效果),渐变色圆柱,扇形图等
cesium加载entities实体,包括文字标注,图标(扩撒动画效果),线,面(闪烁动画效果),图片,围栏,立体区域,渐变色圆柱,扇形图原创 2022-04-12 15:52:43 · 9221 阅读 · 2 评论 -
高德地图自定义贴图图层
核心代码 // 背景图 const imageLayerr = new AMap.ImageLayer({ url: "https://cdaipython.com/jinmahe/a5ccb26807c8dcb7c335176677151c0.png", bounds: new AMap.Bounds( [103.618909, 30.628971],原创 2022-03-25 16:52:17 · 3597 阅读 · 5 评论 -
高德地图加载标注并实现缩放动画
封装方法const data = [ { id: '1', lng: 103.758778, lat: 30.709979, degree: 1 }, { id: '2', lng: 103.75889, lat: 30.711127, degree: 5 }, {原创 2022-03-25 16:44:07 · 1147 阅读 · 0 评论 -
cesium实现热力图的加载
ceisum热力图原创 2022-03-22 16:12:43 · 1068 阅读 · 0 评论 -
echarts自定义组件
echarts自定义组件原创 2022-03-11 17:58:29 · 2362 阅读 · 0 评论 -
Cesium实现场景截图
cesium场景出图原创 2022-02-25 17:27:42 · 2105 阅读 · 3 评论 -
cesium实现晴,雨,雾,雪等效果
晴 viewer.shadows = true; //阴影 viewer.shadowMap.enabled = true; viewer.shadowMap.size = 2048*2; viewer.shadowMap.darkness = 0.6;//阴影强度 viewer.shadowMap.softShadows = true; viewer.shadowMap.maximumDistance = 10000.0;原创 2021-09-26 15:47:27 · 1780 阅读 · 6 评论 -
Cesium在指定位置显示弹框,并跟随地图移动
创建popup.jsfunction poup() {};poup.prototype.viewer = null;poup.prototype.tackedEntity = null;poup.prototype.elementName = '';poup.prototype.width = 0;poup.prototype.height = 0;poup.prototype.postRenderHander = null;poup.prototype.p1 = 0;poup.pr.原创 2021-08-27 15:11:56 · 2552 阅读 · 0 评论 -
Cesium常用事件,包括点击事件,鼠标事件,相机移动事件
点击事件 let leftclick = Cesium.ScreenSpaceEventType.LEFT_CLICK; viewer.screenSpaceEventHandler.removeInputAction(leftclick); let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); // 点击事件 handler.setInputAction((e) => { l原创 2021-08-27 11:51:42 · 6835 阅读 · 0 评论 -
Cesium视角切换、定位、读取文件,构建数据源,实体控制,模型控制等
飞至视角 initialPerspective() { //知道经纬度的情况下 /* viewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(116.523753404617, 40.2340042591095, 1000.0), orientation: {"pitch":-0.5450456670292048,"heading":0.018399360640374063,"原创 2021-08-13 15:48:06 · 4631 阅读 · 0 评论 -
Cesium基本使用,包括加载影像,地形,模型等,设置地图样式
初始化地图,加载数据原创 2021-07-15 15:28:53 · 7509 阅读 · 2 评论 -
mapbox加载全国及省份范围,显示多颜色动画点、迁徙线、3d柱状图等
//初始化地图 initMap() { let _this = this; map = new mapboxgl.Map({ container: "collection-map",//地图容器 style: { version: 8, glyphs: "/font/{fontstack}/{range}.pbf", sources: {}, layers: [原创 2021-06-02 18:21:37 · 1776 阅读 · 0 评论 -
mapbox使用,包括绘制、加载、修改、删除点和面,显示弹框等
一、在index.html全局引入mapbox-gl的js和css包,由于项目中会涉及到部分空间几何对象关系的计算,需借助turf.js,详细使用方法可参考https://blog.csdn.net/weixin_39150852/article/details/116758542二、创建地图组件,初始化地图<template> <div class="map-wrapper" :id="mapId"></div></template><原创 2021-05-31 14:59:45 · 12429 阅读 · 17 评论 -
turf.js用法
1.在index.html直接引用 <script src="https://unpkg.com/@turf/turf@6.3.0/turf.min.js"></script>2.需要用的地方直接使用turf对象,turf主要用来空间几何对象关系的计算,点、线、面之间包含、相交等系统运算。具体使用方法可参考turf.js中文网:https://turfjs.fenxianglu.cn/category/#cdn%E5%BC%95%E5%85%A53.判断点是否在多边形范围内原创 2021-05-13 17:41:36 · 7662 阅读 · 4 评论 -
svg实现根据文字长度渲染图片
通过PhotoShop打开设计图,选中所需图层右键复制svg,或者导出为svg图片调整path值,“,”左边代表x轴,右边代表y轴,进行模板字符串拼接/** * 添加svg矢量标牌 * text: 标牌内容 * color: 填充颜色 */export function loadVectorIcons(text, color = 'rgb(29, 124, 218)') { let textLength = text.length; //40: 左右边距 //12:文字宽度 .原创 2021-03-22 15:55:19 · 333 阅读 · 0 评论 -
echarts增加点击事件,防止重复触发
let timer = null; //防止重复触发点击事件 if (this.mychart._$handlers.click) { this.mychart._$handlers.click.length = 0; } this.mychart.on("click", params => { if (!timer) { timer = setTimeout(() =&..原创 2021-01-06 14:21:54 · 460 阅读 · 0 评论 -
echarts设置背景图片,且能够自适应宽高
设置option的backgroundcolor属性 var img = new Image(); img.src = '图片的url'; option = { backgroundColor = { image: img , repeat: "no-repeat", }, ... }2.自适应图表宽高 //echarts: 当前图表 let fullImage = new Image(); let img = new Image(); let.原创 2020-11-09 18:15:20 · 8910 阅读 · 2 评论 -
echarts的使用——绘制地图(包括省份 城市),实现轮播高亮
echars geomap原创 2019-06-06 11:53:01 · 18355 阅读 · 9 评论 -
vue-cli调用高德地图api
一、注册开发者账号并获得Key1、进入官网https://lbs.amap.com/,注册并登录2、登陆之后,点击控制台进入 [ 应用管理 ] 页面 [ 创建新应用 ]3、获得应用 Key值,[ 服务平台 ]一项选择 [ Web 端 ( JSAPI )或 Web 服务 ]二、封装函数在vue-cli项目目录结构新增utils文件夹 ,utils文件夹里面,新建一个remoteLoad...原创 2019-06-21 09:54:21 · 9731 阅读 · 1 评论 -
OpenLayers地图
搭建本地环境,配置瓦片数据,下载文件并找到相应路径链接: https://pan.baidu.com/s/1c6nfZodGBzUxyG2PhmFzPA提取码: p3qi开启本地服务器导入本地包链接: https://pan.baidu.com/s/1qhe4kxwpmez5-7dBVA1S1g提取码: w6hp将文件解压放到asset文件夹在index.htm...原创 2019-11-20 14:50:44 · 1458 阅读 · 0 评论