随笔分类 - GIS / maptalks
2.5D Map Library
摘要：1. arcline 应该就是飞线，和百度以及其他的地图类似，从一个点飞出一条线到另外一个点。 2. 数据使用的是 ./data/lines.json , 可以看到里面包含了很多经纬度点。 3. 将里面的对象转为 lineStrings。 1 var lineStrings = geojson.ma
阅读全文
摘要：1. 此demo演示了自定义动画的生成，动画的样式为一层层荡开的圆圈，类似与水纹。 2. 此demo中第一次使用了类的扩展对象，将圆圈定义为一个对象，样式和动画在其内部进行定义，外部直接 调用添加到对应的经纬度上即可。 3. 参考代码 扩展对象类中有 _animation 函数，该函数为对象自动执行
阅读全文
摘要：1. Vertex 查了一下意思是 顶点的意思，但是我一直没有理解到底是啥原因， 代码使用的是 threeLayer.toExtrudePolygon，而不是 toExtrudeMesh ， 也许 是因为是多边形，所以才会有顶点之说。 2. 代码参考 1 features.forEach(funct
阅读全文
摘要：1. topColor 这个demo中的效果个人感觉还是不错的，尤其是建筑看上去还分了楼层。 这个楼层效果感觉比前面的楼层高效果都要好。 2. 建筑的方式还是按照以前的方式进行加载，然后在表面进行纹理贴图，淡蓝色的楼层使用 了data/building.png 进行贴图处理。 3. 页面显示 4.
阅读全文
摘要：1. 建筑物轮廓为建筑的边缘线，内部不进行填充颜色，只有边缘线进行勾勒，效果也不错。 2. 将建筑物填充为黑色方块，获取建筑物的边线 1 //default values 2 var OPTIONS = { 3 altitude: 0 4 }; 5 6 //https://zhuanlan.zhih
阅读全文
摘要：1. 三维建筑应该是GIS中比较典型的应用了，不论是高德百度还是其他的开发库，支持三维地图 显示是比较重要的一个环节。 2. 建筑数据使用的是 ./threelayer/demo/buildings.js 。 这样的数据使用的是json格式的，而不是geojson。 3. 使用 toExtrudeM
阅读全文
摘要：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
阅读全文
浙公网安备 33010602011771号