电子海图制图和钻探简单界面的详细说明

1.地图绘制过程的原理

给定范围边界的纬度和经度数据，给它一个名称构成了制图的基础。换句话说，您可以绘制任何形状的地图部分。

2.地图数据生成

中国、省、市、县地图的基础数据可以从这里生成和下载。

http://datav.aliyun.com/tools/atlas

使用地图范围数据，在echarts中注册该块的地图名称，可用于后续绘制。下面的代码以最简单的形式绘制了一张中国地图。

$.getjson(' https://geo . datav . aliyun.com/ares/bound/100000 _ full . JSON '，函数(数据){var name='中国地图'；//注册一个地图名称echart . registermap(name，data)；var myChart=echart . init(document . getelementbyid(' map '))；Var映射选项={Series : [{Type :' Map '，//表示映射类型Map3360 Name，//表示名称标签l3360 {Show: True}，roam : True//可伸缩}]；myChart.setOption(mapOption，true)；});

3.打包形成一个简单的界面

3.1接口定义

从使用情况和预期结果定义接口。预计给定区域的名称，可以指定绘图位置(DOM元素)来完成工作。同时，我们希望控制是否支持钻孔，这形成了最基本的界面定义。

/* *根据名称加载映射* @ param element id : DOM element id * @ param name 3360映射名称(仅定义的区域名称)* @ param Drill3360是否支持钻孔*/chinamap。loadmap=函数(元素标识、名称、钻取){ 0.} 3.2接口实现

(1)支持多图制图，定义ChartList记录每个DOM元素对应的图表对象。

(2)支持钻取，建立省市名称层级关系。城市代码的前两位是省代码。

中国地图。provincecodes={'13' : '河北'，' 14': '山西'，}ChinaMap.cityCodes={ '石家庄' :'130100 '，'唐山' :' 130200 '，

(4)可拓方法：采取地图分层路径。如果你得到“中国-湖南-长沙市”的路径，对应的名字可以点击跳转。

请访问：https://github。详细实现代码请访问：com/triple studio/hello world/tree/master/China _ map

4.达到应用效果

4.1中国可钻地图

使用以下代码在指定的元素中绘制可钻取的中国地图。

chinaMap.loadMap('map '，' China '，true)；方法ChinaMap.loadMap将返回e chart的图表对象，可以进一步操作。这里用下面的代码来得到钻孔时的分层路径，从而达到向上跳的效果。

chinaMap.loadMap('map '，' China '，true)。on('click '，function(param){ $('#path ')。html(ChinaMap.formatPath('map '，param . name))；});

4.2省份地图

因为只需要指定名称和显示元素ID，所以可以通过遍历每个省份的名称来快速绘制每个省份的地图。

for(var prov in ChinaMap .省份){ $('#main ')。追加(' div id=.省份[prov]'=' box '/div ')；中国地图.负荷地图(中国地图.省，省)；}

相关代码和数据可在此下载：https://github.com/triplestudio/helloworld/releases

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。