首先确定所绘地图的范围。


矩形上面右键

导出成图片

制作图片
打开Photoshop,或者您有别的制图软件也可以,开始制作手绘地图吧。
图片的创作您可以任意发挥,每个人都有自己的特色。这里对制作图片就不赘述了。
绘制过程中,保证绘制内容和底图高度重合!
这里一定要保证图片重合,后期无法通过纠偏、校准等方式对齐图片!一定注意!
绘制完毕后,保存图片。
请注意,生成的图片,一定和您框选的范围一致!!
也就是说,如果有白边,也需要保留。
手绘地图的四个点的坐标可在奥维地图中获取保存。
将手绘地图叠加到高德地图上
var imageLayer = new AMap.ImageLayer({
url: 'bc.png',
bounds: new AMap.Bounds(
[116.391052,39.912895], //左下角
[116.402872,39.923327] //右上角
),
zooms: [15, 18]
});
var map = new AMap.Map('container', {
resizeEnable: true,
center: [116.397049,39.917840],
zoom: 15,
layers: [
new AMap.TileLayer(),
imageLayer
]
});
以下为手绘地图真实DEMO
这个教程不错,适合简单的手绘地图,点赞!!!