随笔分类 - GIS
摘要:1. Boxes 我特意查了一下,Box 的复数是 Boxes,不是Box,threelayer的官方demo里写的是boxs,对象名称 写的也是 threeLayer.toBoxs , 所以,我只在这篇文章里修改了这个复数形式,代码里面没有修改。 2. Boxs 从形式上看是 Box 的复数,指的
阅读全文
摘要:1. Box-stack 则是使用了不同颜色的材质在同一个地点进行叠加,显示出了颜色渐变的效果。 这个效果的用途可以用在多种类型的数据对比。 2. 参考代码 从代码中可以看出,在每一个经纬度上,对14个颜色循环添加,相当于在同一个经纬度上叠加了14个颜色块。这里每个颜色块的高度都是100,如果使用高
阅读全文
摘要:1. box 从代码上来说,和 bar 的代码类似,只不过是 threelayer.toBar 改为了 threelayer.toBox 。在样式的区别来看,也是 Bar 的六边形变成了 Box 的 四边形。 2. 代码参考 Box: 1 var bar = threeLayer.toBox(d.c
阅读全文
摘要:1. 这个demo有着比较惊艳的效果,很多实际在用的项目上都采用了这种效果。 2. 添加地图并初始化建筑。 1 var baseLayer = new maptalks.TileLayer('tile', { 2 urlTemplate: 'https://{s}.basemaps.cartocdn
阅读全文
摘要:1. 说明 使用柱状图,并根据音乐节奏显示动画效果。 2. 初始化地图并添加threelayer 1 var map = new maptalks.Map("map", { 2 center: [19.06325670775459, 42.16842479475318], 3 zoom: 3, 4
阅读全文
摘要:1. 说明 使用柱状图,并根据音乐节奏显示动画效果。 2. 初始化地图 1 var map = new maptalks.Map("map", { 2 center: [120.88083857368815, 31.494732837748273], 3 zoom: 10, 4 pitch: 35,
阅读全文
摘要:1. 说明 使用柱状图,并加上了动画效果。 2. 初始化地图 1 var map = new maptalks.Map("map", { 2 center: [120.74088044043242, 30.48913000018203], 3 zoom: 9.478337137999542, 4 p
阅读全文
摘要:1. 说明 这个 demo 主要显示3D的柱状图,而且是具有地理位置信息的柱状图,比echart那些二维的柱状图效果当然要好很多。 2. 初始化地图 1 var map = new maptalks.Map("map", { 2 center: [19.06325670775459, 42.1684
阅读全文
摘要:1. 说明: 本demo主要是加载了一个具有动画效果的三维机器人,然后通过鼠标选择菜单控制机器人的动作和表情。 其实这个机器人,本身就已经具有动画和动作表情效果了,只不过是使用threejs的接口,把它加载到地图上, 然后再调用API操控机器人。 2. 先来看一下 ../threelayer/dem
阅读全文
摘要:开始使用maptalks.three 开发之前,先熟悉几个库和概念。 1. dat.gui.min.js https://github.com/dataarts/dat.gui 这是一个用来调试WebGL对象的js库,绑定对象的属性后,可以通过UI的方式,直接修改对象的属性。 2. stats.mi
阅读全文
摘要:maptalks 是针对2D地图添加了视角和旋转等功能,实现的2.5D的地图库,以针对threejs支持著称。 不过本篇只针对maptalk中的插件 threeLayer 的功能进行介绍,maptalks 的基础功能请查看: https://github.com/WhatGIS/maptalkMap
阅读全文
摘要:51. geoJson to geometry 1 var json = { 2 'type': 'Feature', 3 'geometry': { 4 'type': 'Point', 5 'coordinates': [-0.113049,51.498568] 6 }, 7 'properti
阅读全文
摘要:41. Distance measure 1 var distanceTool = new maptalks.DistanceTool({ 2 'symbol': { 3 'lineColor' : '#34495e', 4 'lineWidth' : 2 5 }, 6 'vertexSymbol'
阅读全文
摘要:31. html Marker 1 var marker = new maptalks.ui.UIMarker([-0.113049,51.49856], { 2 'draggable' : true, 3 'single' : false, 4 'content' : '<div class="t
阅读全文
摘要:21. flash-marker 1 function flash() { 2 marker.flash( 3 200, //flash interval in ms 4 5, // count 5 function () { // callback when flash end 6 alert('
阅读全文
摘要:11. arcgis_tile_layer 1 var arcUrl = 'https://services.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer'; 2 3 maptalks.SpatialRef
阅读全文
摘要:1. maptalks 是一个3D(2.5D)得GIS地图引擎,支持基础得WebGL功能,从其官网上看,地图功能是都有得。 但是呈现效果不够酷炫,不过maptalks是支持plugin的,有很多很好的plugin对其提供强大的支撑,比如D3、echart, threejs。其中对 threejs 的
阅读全文
摘要:三维WebGL下的效果确实比二维要好看很多,而且支持 threejs,那也就是说,三维模型之类的,都可以加载。 我以前对BATT这类的地图不太看重,觉得封账太过简单,功能不够强大,目前来看,百度地图应该能够支持 大部分的地图功能了。 关于百度地图的 JS API 3.0 和 GLJS API 1.0
阅读全文
摘要:做GIS,主要分两种, 第一种是用来做分析,不在乎显示的效果如何,不在乎页面排版样式,是要能把需要的功能做出来, 用比较鲜明的颜色区分开,达到需要的分析结果,其它的都在可接受的范围之内。 第二种是用来做展示,UI、UX、大屏、三维、动画,效果图,这些能用上的都用上,达到让人 眼前一亮的感觉。 map
阅读全文
摘要:1. 测量工具 1 var myDis; 2 3 function addDistanceTool(){ 4 5 map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别 6 7 myDis = n
阅读全文