随笔分类 - GIS / maptalks
2.5D Map Library
摘要：1. 这个最终效果有点像地形图的热力图了，高的地方颜色深，矮的地方颜色浅，用到合适的地方效果也不错吧。AR VR 三维地图以后使用的场景应该会越来越多吧。 2. 地形图数据使用的是 ./data/west-lake-area.geojson RGBImage 使用的是 mapbox 的数据， con
阅读全文
摘要：1. 可以说，这是我一直想要的效果之一， 另外一个cesium 和 UE 一起搞得那个。 2. 数据使用的是 ./data/west-lake-area.geojson 3. 扩展类 1 class Terrain extends maptalks.BaseObject { 2 constructo
阅读全文
摘要：1. 自定义海洋效果 ， 与前面的 coolwater 效果差不多，coolwater 的效果好像是 使用两个图片作为 ShaderMaterial， 2. 数据使用 ./data/westlake.geojson , 背景图片使用 ./data/waternormals.jpg 3. 定义Ocea
阅读全文
摘要：1. 多重复用对象， multiplexing geometry。 又学了一个单词。 2. 定义 Bar 对象。 1 function getBar(options) { 2 const { radius, height } = barCache.getOptions(); 3 const geom
阅读全文
摘要：1. 这个不觉明历。在我看来，这和 boxs 那个例子差不多。 2. 只不过扩展类 TestBoxs 继承了 maptalks.MergedMixin ，这个估计要看源码才能明白是啥了。 1 class TestBoxs extends maptalks.MergedMixin(maptalks.B
阅读全文
摘要：1. 和尾线效果类似的 轨迹追踪功能。线路逐渐显示，更适合做轨迹显示。 2. 使用了 lineTrip 对象，直接处理已有数据。 1 var offset = 500; 2 lineTrips = list.slice(0, offset).map(d => { 3 var line = new L
阅读全文
摘要：1. 尾线效果，很适合做轨迹追踪或者路线动画。 2. 数据使用 ./data/lines.json 3. 处理数据 1 var lineStrings = geojson.map(function (feature) { 2 var coordinates = feature.coordinates
阅读全文
摘要：1. image plane 与前面的 geotiff plane 在效果上是类似的。 2. 加载的图片地址 https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ 3. 自定义Imag
阅读全文
摘要：1. 带高度的栅格，在栅格的基础上加上高度。 2. 其中是用d3.min.js 和 turf.js D3 是一个数据可视化的JS库，能够实现各种图表。 turf.js 是主要用来进行空间分析，空间几何对象关系的计算，点、线、面之间包含、相交等计算的JS库。 3. 数据使用的是网络数据 https:/
阅读全文
摘要：1. 大数据量的grid栅格。其中使用了d3.min.js 和 turf 的函数。 2. Grid 数据 1 const geohashlen = 5; 2 function Grid(geojson) { 3 let minLng = Infinity, minLat = Infinity, ma
阅读全文
摘要：1. 在地图上添加一个GeoTIFF的图片。 2. 主要使用了 GeoTIFF 和 GeoTiffPlane 对象。 3. 加载完成后为image图片，并使用material进行渲染。 1 fetch('https://gw.alipayobjects.com/os/rmsportal/XKgkjj
阅读全文
摘要：1. 使用飞线，加上飞机的移动，第一眼看过去和前面的 arcline-animation 很类似。 但是内部的代码内容完全不一样。 2. 使用了 Bloom 效果，看起来很不错。 3. 材质 1 var lines = [], lineTrails = []; 2 var material = ne
阅读全文
摘要：1. fatline ，这个名字也很有讲究，可是我还是不知道它的含义。 2. 创建 fatline 扩展类 1 var OPTIONS = { 2 altitude: 0 3 }; 4 5 class FatLine extends maptalks.BaseObject { 6 construct
阅读全文
摘要：1. 电子罩栏，这个效果很不错了。可是用在什么地方比较合适呢？ 2. 定义扩展对象类 1 class ElectricShield extends maptalks.BaseObject { 2 constructor(coordinate, options, material, layer) {
阅读全文
摘要：1. coolwater， 确实是很酷的water，其效果也相当不错。对于水域来说， 比单独画一个蓝色的多边形好很多。 2. 首先定义一个CoolWater的扩展对象，然后使用THREE.TextureLoader 进行加载 data/CoolWater-iChannel0.png 和 data/C
阅读全文
摘要：1. 白云效果，是真的白云效果。 2. 白云效果的材质 1 function generateTextureCanvas() { 2 // build a small canvas 32x64 and paint it in white 3 var canvas = document.createE
阅读全文
摘要：1. 自定义圆圈，从效果上来看，并没有太惊艳，普通的canvas应用，不过圆圈的颜色是渐变色， 这个还是头一次看到实际的应用，平时不太敢想这么去做。 2. 渐变色是使用 canvas 制作的。使用了 ctx.createLinearGradient。 1 function getMaterial(f
阅读全文
摘要：1. 自定义高架，每个高架路线为经纬度数组， 其中包括经度、纬度、高度。 2. 调用addLine函数添加对象。 1 function addLine(lnglats, name, width = 8) { 2 const lineString = new maptalks.LineString(l
阅读全文
摘要：1. 广告牌的效果，关键是每个的样式和颜色可以自定义。 2. 从代码中可以看出，使用了 canvas ，并将对应的 canvas 转化为image。 自己的功力不够，只能看出来这一点，还不知道对不对。等回来找本 ThreeJS 的书看。 3. 初始化数据 1 function initData()
阅读全文
摘要：1. 在飞线的基础上加入移动轨迹，很像飞机飞过的轨迹。这个效果在百度地图里也有。 2. 在 ArcLine 对象中，加入了 speed 参数，在 ArcLine 的类中加入 _animation 动画代码。 3. 添加 Line。 1 function loadRoad(geojsonURL, te
阅读全文
浙公网安备 33010602011771号