Polygon Map Generation demo

http://www-cs-students.stanford.edu/~amitp/game-programming/polygon-map-generation/


The simplest way to explore the maps is to click Random repeatedly. Try the various Island Shape, Point Selection, and View options.

Feel free to use these maps for any purpose, including commercial use. This is a map generator I wrote in 2010 for a game; I’m not working on it anymore, but all the code is available so that you can download and modify it for your own needs.

In a shape number like 85882-8, 85882 chooses the overall island shape and 8 is the random number seed for the details (random points, noisy edges, rivers). You can type in a shape number and press Return to generate that map. The details will vary based on the other options you’ve selected.

I wrote an article describing the algorithms, and how you can use all or some of the parts in your own projects. I generate island maps with constant slopes here, but you can use the same ideas for many different styles of maps. Notes:

  • Radial, Perlin, Square, Blob are about the island shape.
  • Random, Relaxed, Square, Hex are about how the map is divided up into polygons.
  • Using 4000 or 8000 points can be slow. I’ve tried 16,000 but Flash gets rather buggy so I didn’t put it in the demo.
  • The PNG output is 2048x2048, and draws the selected mode (biomes, polygons, 2d slopes, etc.). It’s slow. I don’t include the noisy bitmap dots so that you can more easily use this in your own projects.
  • The byte array output are a 2048x2048 height map, a 2048x2048 moisture map, and a 2048x2048 array of bit flags, which you can decipher by looking atexportOverrideColors in mapgen2.as.
  • The 3D slopes output is slow (I wrote this a long time ago, before GPU acceleration was generally available in browsers).
  • There are lots better ways to render the maps, but I haven’t explored them. For this project I was focused on the generation of structured maps.
  • I also implemented road and lava algorithms but didn’t include them in this demo.
  • The watershed detection algorithm is unifnished. I was hoping it would be useful for assigning territorial control. I will revisit it when I want to procedurally generate towns, cities, nations, histories, etc.

The code is open source, using the MIT license (allows commercial use). I put it up on Github. Sorry, it’s not designed to be easy to reuse. I focused instead on explaining the concepts in the article, so that you can implement the algorithms yourself. I did not implement the Voronoi algorithm; I used an existing library for this.

The original demo I posted in 2010 is here. Changes: I took out roads; I added PNG export; I added byte array output (e.g. height maps); I added control over the number of points; I added control over the distribution of points.

### 高德地图 AMap Polygon API 的使用方法 高德地图提供了丰富的 JavaScript API 功能,其中 `AMap.Polygon` 是用于在地图上绘制多边形的核心工具之一。以下是关于如何使用该功能的具体介绍: #### 1. 初始化地图并加载插件 为了使用 `AMap.Polygon`,首先需要初始化一张地图实例,并确保引入了必要的库文件。 ```javascript // 创建地图实例 var map = new AMap.Map('container', { zoom: 10, // 设置缩放级别 center: [116.397428, 39.90923] // 设置中心点坐标 }); ``` 通过上述代码创建的地图容器 ID 应当对应 HTML 中的一个 DOM 元素[^1]。 --- #### 2. 定义多边形的顶点数组 多边形由一系列经纬度组成的路径定义而成。这些路径可以通过手动输入或者动态计算得出。 ```javascript // 多边形顶点数组 (经度,纬度) var path = [ [116.39, 39.9], [116.40, 39.9], [116.40, 39.91], [116.39, 39.91] ]; ``` 此部分数据可以根据实际需求调整,支持复杂的几何图形构建[^2]。 --- #### 3. 构造多边形对象 利用 `path` 数据构造一个多边形实例,并将其添加到地图中显示出来。 ```javascript // 实例化多边形 var polygon = new AMap.Polygon({ path: path, strokeColor: "#FF33FF", // 边框颜色 strokeWeight: 6, // 边框宽度 fillColor: "#1791fc", // 填充颜色 zIndex: 50 // 图层顺序 }); // 将多边形添加至地图 map.add(polygon); ``` 以上参数控制着最终呈现在界面上的效果样式。 --- #### 4. 清除已存在的多边形 如果希望移除当前地图上的某个或多边形,则可通过调用相应的方法实现清理操作。 ```javascript // 移除单个多边形 map.remove(polygon); // 或者批量清空所有覆盖物 map.clearMap(); ``` 这种方法适用于复杂交互场景下的动态更新逻辑处理[^4]。 --- ### Vue.js 环境下集成示例 对于基于前端框架如 Vue 开发的应用程序来说,也可以很方便地结合官方组件库完成相同的功能扩展。 安装依赖包后,在模板内部声明配置项即可轻松达成目标效果展示目的。 ```html <template> <div id="amap-container"></div> </template> <script> import { load } from 'vue-amap'; export default { data() { return {}; }, mounted() { load().then(() => { const map = new window.AMap.Map('amap-container', {}); new window.AMap.Polygon({...}); }); } }; </script> ``` 注意这里借助第三方封装简化了许多基础设置流程步骤。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值