搜索到
13
篇
标签为 可视化 的文章
-
-
-
AntV G6项目如何兼容IE 阿里的AntV G6是很强大很好用，但要兼容IE会遇到各种坑。虽然官网给出了解决方案，但因为原因千奇百怪，即使完全照官方的方案操作一遍，仍然有问题。本文如果能帮到同学少踩坑，那就不枉我花二个小时来总结了。本文仅以Vue cli工程为例讲解。vue-g6-editor曾经用官方推荐的基于G6和Vue的可视化编辑器做了一个场景编辑器，测试不能兼容IE，报如下错误：点击错误行进去排查，发现 @antv/g/src/core/event-emitter.js中有个方法里面有const关键字，如下图：Vue cli3以上版本使用core-js基本上解决了大部分的IE兼容问题，但不少第三方库（node_modules中）将es6语句转换成es5时做得不彻底，无形中会引入新的IE兼容问题。一般的webpack cli工程为了编译得快，默认情况下babel-loader会忽略所有node_modules中的文件。如果想要通过Babel显式转译一个依赖，可以在transpileDependencies选项中列出来，然后在使用工程中再转换。明白了这个道理就比较好解决问题了。transpileDependencies: ["@antv/g", "@antv/g6"]注意：3.2.10以下版本的@antv/g跑这个示例都必须设置"@antv/g"依赖项。3.2.10~3.8.5版本的可以不用额外加依赖项，但要相应修改示例代码中的一些依赖包路径才能跑起来X-Flowchart-Vue该项目的示例有些Viso的味道，画流程图爽歪歪，文档很Nice，不足的是包太大了。测试了一下该示例不能兼容IE。因为该工程根本没有设置transpileDependencies，如下设置就可以了：transpileDependencies: ["@oxoyo/xfc"]注意：示例工程依赖，@oxoyo/xfc，后者依赖@antv/g6，通常在transpileDependencies添加的是直接依赖。普通工程普通的Vue cli + @antv/g6工程有没有兼容IE问题呢？经我测试，@antv/g6 4.0.4以上版本不能兼容IE，会报如下错误：My God，新版竟然用了Proxy。一步步排查发现在@antv/layout/es/layout/layout.js// FIXME // FOR G6 export const Layouts = new Proxy({}, { get: (target, propKey) => { return getLayoutByName(propKey); }, set: (target, propKey, value) => { registerLayout(propKey, value); return true; } });阿里的前端同学也不容易，对不对? ::(呵呵) 。没办法，既然用了Proxy，就等于放弃IE了。所以如果一定要支持IE, @antv/g6的版本最好是3.1.0~4.0.4。由于3.1.0以下版本改动太大，不推荐使用。总结结合工作实践，总结一下解决兼容IE的办法：低版本cli工程，检查有没有配置babel-plugin-transform-runtime/babel-polyfill；高版本cli工程，检查有没有配置core-js；高版本cli工程，想一想要不要配置transpileDependencies，本文中的 @antv/g6，还有经常用到的vue-echarts、vue-baidu-map，都需要设置相应的transpileDependencies；最后考虑要不要降级依赖的第三方库。高版本的 @antv/g6和swiper都不能兼容IE，降级后可以兼容。有同学可能会说，微软都放弃IE转向Edge了吗？花那么多精力搞IE兼容干什么呢？说实话，我也盼望IE早点退出历史舞台。但事实上，客户说一定要支持IE，老板产品说一定要支持IE，有什么办法呢？
-
在3D城市中可视化拟建建筑 在本教程中，您将学习如何创建一个 Cesium 应用程序以用您自己的3D模型替换真实城市中的建筑物。您可以使用它来可视化拟建建筑物的影响。它如何改变天际线？从特定楼层或房间看去会是什么样子？我们将介绍如何：在网络上设置和部署您的 Cesium 应用程序添加全球3D建筑、地形和图像的基础图层隐藏单个建筑物并用您自己的3D模型替换它们 这是您将构建的应用程序。您可以切换建议的建筑物并从多个角度查看它。开始之前我们将从 Cesium ion 获取全球卫星图像、3D 建筑和地形，Cesium ion 是一个用于流式传输和托管 3D 内容的开放平台。 如果您还没有免费的 Cesium ion 帐户，请注册一个。登录后：转到您的Access Tokens选项卡。请注意默认令牌旁边的复制按钮。我们将在下一步中使用此令牌。Cesiumion是一个用于流式传输和托管3D内容的开放平台，包括全球精选数据，您可以使用这些数据创建自己的真实世界应用程序。步骤1：设置你的Cesium 应用我们将使用开源 JavaScript 引擎 CesiumJS 创建我们的应用程序。我们将使用在线 IDE Glitch 来托管我们的应用程序。使用我们放在一起的基本模板A 创建一个新的 Glitch 项目。单击左侧面板中的index.html查看应用程序代码。替换为您的令牌页面your_token_here中的访问令牌 。通过单击顶部的Show并选择Next to The Code来运行应用程序。到目前为止，index.html中的代码 做了三件事：导入CesiumJS库。JavaScript和CSS文件在这两行中加载：<script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />为场景添加一个 HTML 容器：<div id=cesiumContainer></div>。初始化查看器：const viewer = new Cesium.Viewer('cesiumContainer');。你现在有一个基本的CesiumJS应用程序在你的浏览器中运行，其中包含来自Cesium ion的全球卫星图像。配置自动刷新每次代码更改时，Glitch都会自动刷新页面。您可以通过单击左上角的项目名称并取消选中此框来切换它： 使用应用程序窗口顶部的刷新按钮重新运行应用程序： 步骤2：添加Cesium OSM建筑和Cesium世界地形Cesium OSM Buildings是一个全球基础层，拥有超过 3.5 亿个来自 OpenStreetMap 数据的建筑物。它用作3DTiles，这是 Cesium 创建的开放标准，可以将3D内容流式传输到任何兼容的客户端。让我们添加这些图层，然后将相机移动到我们虚构的新建筑所在的城市 — 科罗拉多州丹佛市。用下面的代码替换 index.html 中的 JavaScript 代码，保留之前的访问令牌行。单击并拖动以移动相机。拖动时按住 CTRL 以倾斜。单击任何建筑物以查看其元数据。// Keep your Cesium.Ion.defaultAccessToken = 'your_token_here' line above. // STEP 2 CODE // Initialize the viewer with Cesium World Terrain. const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain() }); // Add Cesium OSM Buildings. const buildingsTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings()); // Fly the camera to Denver, Colorado at the given longitude, latitude, and height. viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(-104.9965, 39.74248, 4000) }); 此时，您完整的index.html将如下所示（访问令牌除外）。在以后的步骤中，您将在标记内的现有代码下方添加新代码script。<!DOCTYPE html> <html lang="en"> <head> <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div id="cesiumContainer"></div> <script> // Your access token can be found at: https://cesium.com/ion/tokens. // This is the default access token from your ion account Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ODdlN2I5OS1iZDMyLTQ2MTItODQwYi01MGE3NGI3NGIzNGUiLCJpZCI6MTE4MjU5LCJpYXQiOjE2NzA5ODI0MDd9.XpfuSxbcNuxNF1jMqI5FxveHXhiq6VVCsww80hIVAME'; // Keep your Cesium.Ion.defaultAccessToken = 'your_token_here' line above. // STEP 2 CODE // Initialize the viewer with Cesium World Terrain. const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain() }); // Add Cesium OSM Buildings. const buildingsTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings()); // Fly the camera to Denver, Colorado at the given longitude, latitude, and height. viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(-104.9965, 39.74248, 4000) }); </script> </body> </html>Cesium OSM Buildings与全球高分辨率3D地形图层Cesium World Terrain 绑定。这使其非常适合需要精确建筑高度的应用，例如洪水分析工具。步骤3：确定新建建筑面积在我们添加新建筑物之前，让我们添加一个GeoJSON文件来标记它的足迹。这将告诉我们哪些现有建筑物需要拆除。下载GeoJSON文件。将GeoJSON文件拖放到您的 Cesium ion仪表板中。按上传。步骤4：上传后，记下预览窗口下的资产ID。在index.html中添加以下代码。替换your_asset_idy为您的资产ID。ID是一个数字，因此您不需要引号。// STEP 3 CODE async function addBuildingGeoJSON() { // Load theGeoJSONfile from Cesium ion. const geoJSONURL = await Cesium.IonResource.fromAssetId(your_asset_id); // Create the geometry from the GeoJSON, and clamp it to the ground. constGeoJSON= await Cesium.GeoJsonDataSource.load(geoJSONURL, { clampToGround: true }); // Add it to the scene. const dataSource = await viewer.dataSources.add(geoJSON); // By default, polygons in CesiumJS will be draped over all3Dcontent in the scene. // Modify the polygons so that this draping only applies to the terrain, not3Dbuildings. for (const entity of dataSource.entities.values) { entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN; } // Move the camera so that the polygon is in view. viewer.flyTo(dataSource); } addBuildingGeoJSON(); 您现在会在地面上看到建筑物的足迹。使用鼠标滚轮放大或右键单击并拖动以仔细查看。步骤5：隐藏现场现有的3D建筑现在我们已经确定了新建筑的去向，我们可以看到当前有哪些建筑。我们将使用3D Tiles Styling Language 来隐藏它们。在上面的占地面积中，我们可以看到在我们拟建的新建筑所在地有六座建筑——一座大型建筑和五座小得多的建筑。添加以下代码。它隐藏了所有较小的3D建筑。// STEP 4 CODE // Hide individual buildings in this area using3DTiles Styling language. buildingsTileset.style = new Cesium.Cesium3DTileStyle({ // Create a style rule to control each building's "show" property. show: { conditions : [ // Any building that has this elementId will have `show = false`. ['${elementId} === 332469316', false], ['${elementId} === 332469317', false], ['${elementId} === 235368665', false], ['${elementId} === 530288180', false], ['${elementId} === 530288179', false], // If a building does not have one of these elementIds, set `show = true`. [true, true] ] }, // Set the default color style for this particular3DTileset. // For any building that has a `cesium#color` property, use that color, otherwise make it white. color: "Boolean(${feature['cesium#color']}) ? color(${feature['cesium#color']}) : color('#ffffff')" });扩展此代码以隐藏剩余的3D建筑。单击建筑物以找到其elementI.添加另一行，如： ['${elementId} === large_building_elementId', false]步骤6：上传并定位新建筑让我们上传建议的建筑模型。下载此 glTF 模型。将其拖放到您的Cesium离子仪表板中。选择3D Model (tile as 3D Tiles)并按上传。完成拼贴后，单击 资产预览窗口顶部的Adjust Tileset Location按钮。在搜索框中输入建筑物地址1250 Cherokee Street，然后单击下一步。使用查看器上的控件，在视觉上定位和旋转建筑物，使其与下面的卫星图像对齐。您的最终设置应大致为：经度：-104.9909 纬度: 39.73579 身高：1577 航向：-8按保存。确保地理定位准确性在本教程中，您手动定位了一座新建筑。如果建筑物已经进行了地理参考，Cesium ion 会自动将其放置在正确的位置。您还可以使用 REST API 对其进行地理定位。通过地理定位指南了解更多信息 。步骤7：将新建筑添加到场景中现在让我们将新建筑物添加到场景中。在资产预览窗口下获取我们刚刚地理定位的建筑模型的资产 ID。在index.html中添加以下代码。-替换your_asset_id为您的资产ID。// STEP 6 CODE // Add the3DTileset you created from your Cesium ion account. const newBuildingTileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(your_asset_id) }) ); // Move the camera to the new building. viewer.flyTo(newBuildingTileset);步骤8：添加一个按钮来切换新建筑在index.html中，将按钮添加到您的<body>标签内的上方<script。<button id="toggle-building">Toggle new building</button>在head标签内添加以下CSS style标签：<style type="text/css"> #toggle-building { z-index: 1; position: fixed; top: 5px; left: 5px; } </style>在index.html中添加以下JavaScript：// STEP 7 CODE // Toggle the tileset's show property when the button is clicked. document.querySelector('#toggle-building').onclick = function() { newBuildingTileset.show = !newBuildingTileset.show; };步骤9：考虑建筑对周围环境的影响现在您可以比较有和没有这座新建筑的场景！丹佛的全景山景备受推崇。这座建筑如何影响其他地方的景色，例如科罗拉多州议会大厦？对科罗拉多州议会大厦景观的影响。要重现这一点，请搜索美国科罗拉多州丹佛市的州议会大厦并调整相机。我们甚至可以探索国会大厦入口处的景色将如何变化。从更接近地面的角度对视图的影响。完整教程源码这是带有your_token_here和your_asset_id占位符的此应用程序的完整源代码。<!DOCTYPE html> <html lang="en"> <head> <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <style type="text/css"> #toggle-building { z-index: 1; position: fixed; top: 5px; left: 5px; } </style> </head> <body> <div id="cesiumContainer"></div> <button id="toggle-building">Toggle new building</button> <script> // Your access token can be found at: https://cesium.com/ion/tokens. // This is the default access token from your ion account Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ODdlN2I5OS1iZDMyLTQ2MTItODQwYi01MGE3NGI3NGIzNGUiLCJpZCI6MTE4MjU5LCJpYXQiOjE2NzA5ODI0MDd9.XpfuSxbcNuxNF1jMqI5FxveHXhiq6VVCsww80hIVAME'; // Keep your Cesium.Ion.defaultAccessToken = 'your_token_here' line from above. // STEP 2 CODE // Initialize the viewer with Cesium World Terrain. const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain() }); // Add Cesium OSM Buildings. const buildingsTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings()); // Fly the camera to Denver, Colorado at the given longitude, latitude, and height. /* viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(-104.9965, 39.74248, 4000) }); */ // STEP 3 CODE async function addBuildingGeoJSON() { // Load theGeoJSONfile from Cesium ion. const geoJSONURL = await Cesium.IonResource.fromAssetId(your_asset_id); // Create the geometry from the GeoJSON, and clamp it to the ground. constGeoJSON= await Cesium.GeoJsonDataSource.load(geoJSONURL, { clampToGround: true }); // Add it to the scene. const dataSource = await viewer.dataSources.add(geoJSON); // By default, polygons in CesiumJS will be draped over all3Dcontent in the scene. // Modify the polygons so that this draping only applies to the terrain, not3Dbuildings. for (const entity of dataSource.entities.values) { entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN; } // Move the camera so that the polygon is in view. // viewer.flyTo(dataSource); } addBuildingGeoJSON(); // STEP 4 CODE // Hide individual buildings in this area using3DTiles Styling language. buildingsTileset.style = new Cesium.Cesium3DTileStyle({ // Create a style rule to control each building's "show" property. show: { conditions : [ // Any building that has this elementId will have `show = false`. ['${elementId} === 532245203', false], ['${elementId} === 332469316', false], ['${elementId} === 332469317', false], ['${elementId} === 235368665', false], ['${elementId} === 530288180', false], ['${elementId} === 530288179', false], // If a building does not have one of these elementIds, set `show = true`. [true, true] ] }, // Set the default color style for this particular3DTileset. // For any building that has a `cesium#color` property, use that color, otherwise make it white. color: "Boolean(${feature['cesium#color']}) ? color(${feature['cesium#color']}) : color('#ffffff')" }); // STEP 6 CODE // Add the3DTileset you created from your Cesium ion account. const newBuildingTileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(your_asset_id) }) ); // Move the camera to the new building. viewer.flyTo(newBuildingTileset); // STEP 7 CODE // Toggle the tileset's show property when the button is clicked. document.querySelector('#toggle-building').onclick = function() { newBuildingTileset.show = !newBuildingTileset.show; }; </script> </body> </html>下一步如果您有自己的建筑模型，请尝试使用它而不是提供的示例——glTF、OBJ和FBX都受支持。或者将建筑物放置在您自己的城市中。请参阅3D模型导入指南以了解更多信息。
-
