数据大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是茂名市信宜市echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
信宜市,古称窦州,广东省 辖县级市,由 茂名市 代管,位于广东省西南部、茂名市北部,东与阳春市相接,南与高州市交界,西与广西壮族自治区北流市、容县毗邻,北与罗定市、广西壮族自治区岑溪市接壤,土地面积3101.7平方千米。2021年末,信宜市户籍总人口151.75万人。信宜市是广东省著名侨乡、茂名市重点侨乡,先后获得“全国生态保护与建设示范区”“全国重点生态功能区”“中国南玉之都”“中国长寿之乡”“中国慈孝文化之乡”“全国义务教育发展基本均衡县”“广东省教育强市”等称号。
echarts茂名市信宜市geoJson地图tooltip自定义html
echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.
echarts茂名市信宜市geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
threejs茂名市信宜市geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰,如果想系统的学习threejs的话,可以观看threejs视频教程 WebGL前端3D可视化教程
threejs茂名市信宜市geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图
threejs茂名市信宜市geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果
茂名市信宜市下辖有大成镇,平塘镇,怀乡镇,镇隆镇,思贺镇,新宝镇,朱砂镇,水口镇,池洞镇,洪冠镇,贵子镇,金垌镇,钱排镇,东镇街道,白石镇,丁堡镇,茶山镇,北界镇,合水镇,信宜市国营红旗农场
茂名市信宜市下辖区域坐标
{"大成镇":[111.1450092696449,22.28936260365287],"平塘镇":[111.34101316315352,22.43845593475719],"怀乡镇":[111.0435682191146,22.48111168352506],"镇隆镇":[110.84744197786534,22.23409863495624],"思贺镇":[111.60202737098513,22.46361688282247],"新宝镇":[111.48309377473117,22.41023336806449],"朱砂镇":[110.96971766041861,22.57058518633451],"水口镇":[110.93944851451363,22.26537505453239],"池洞镇":[110.91491393959724,22.45215292186416],"洪冠镇":[111.17798185757044,22.46601719442926],"贵子镇":[111.1862286524645,22.61385565053969],"金垌镇":[110.78725816423366,22.4910894583854],"钱排镇":[111.25540491693445,22.3863249551952],"东镇街道":[110.93600037831047,22.3635568451325],"白石镇":[111.12875624288677,22.38408663450503],"丁堡镇":[111.00426760085026,22.30584695574979],"茶山镇":[111.16056505289552,22.54305871837881],"北界镇":[110.77373164471365,22.37633225589397],"合水镇":[111.39196210532515,22.3419117819315],"信宜市国营红旗农场":[110.83833895197014,22.27549391924151]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。