做一个属于自己的坐标系的高德地图（GIS）

第一步:创建node环境；

第二步：创建一个html文件

第三步：引入高德的样式和行为依赖

第四步：创建容器让地图挂载在上边

<div id="map"></div>

第五步：先把地图渲染出来

 const gaode = new ol.layer.Tile({title: "高德地图",source: new ol.source.XYZ({url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',wrapX: false})});const map = new ol.Map({//挂载到map上target: "map",// 设置图层  一个地图有多个图层layers: [gaode],view: new ol.View({// 经纬度center: [114.30, 30.50],// 放大的级别zoom: 12,// 坐标projection: 'EPSG:4326'})})

第六步：创建一个属于自己的坐标系的GEOJSON数据

 var data = {// 固定写法type: "FeatureCollection",// 这是一个属性features: [{type: 'Feature',geometry: {type: 'Point',coordinates: [114.30, 30.50]}}]}

第七步：将自己数据放在数据源中进行使用

var source = new ol.source.Vector({features: new ol.format.GeoJSON().readFeatures(data)})

第八步：设置图层我们需要表现出来

var layer = new ol.layer.Vector({source})

第九步：设置我们JSON数据的一个样式，一定需要样式搞到图层上

let style = new ol.style.Style({image: new ol.style.Circle({// 单位为degradius: 10,// 填充东西fill: new ol.style.Fill({color: '#ff2d51'}),// 描边stroke: new ol.style.Stroke({width: 2,color: "#000"})})})layer.setStyle(style);

第十步：map增加一个图层

map.addLayer(layer)

打开网页既可以看到一个属于自己的小红点

做一个属于自己的坐标系的高德地图（GIS）相关推荐

大疆坐标系和高德地图坐标系之间转换的问题
目前各种坐标系非常多,他们之间的转换就是个比较麻烦的问题.之前有个问题,就是大疆的坐标系在高德地图上显示发生了偏移,但是好在高德地图提供了坐标转换的API,但是新的问题来了,大疆的坐标适应了高德的坐标 ...
JAVA将北斗定位系统坐标系用于高德地图或百度地图
常用坐标系介绍 WGS-84(GPS) 国际标准,一般从国际标准的GPS设备获取的坐标都是WGS-84,以及国际地图提供商使用的坐标系. GCJ-02 中国标准,国测局02年发布的坐标系.又称&quo ...
flutter 获取定位_从头开发一个Flutter插件（二）高德地图定位插件
在上一篇文章从头开发一个Flutter插件(一)开发流程里具体介绍了flutter插件的具体开发流程,从创建项目到发布.接下来将会为Flutter天气项目开发一个基于高德定位sdk的flutter定位 ...
【跟我一起学Unity3D】做一个2D的90坦克大战之地图编辑器
从10月20号到现在,Unity3D也学了10天了,对于Unity3D也有了一个大致的了解,有必要做一个小游戏来检测一下自己的学习成果了.经过两天的努力,终于总算是做出来了一个可以玩的坦克大战了.首先 ...
提取某一个镇的行政边界_高德地图api获取行政边界矢量方法
高德地图api获取行政边界矢量方法发布时间:2018-09-07 17:51, 浏览次数:2170 , 标签: api 1.获取高德地图web服务key 2.行政区域查询API服务地址: https ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
GPS坐标系转高德地图坐标系——数据库函数+存储过程实现
首先:认识坐标系 ,只做简单概述就是这个坐标系统在中国需要变成国内的格式使用一个存储过程+两个函数来实现 WGS84坐标系:即地球坐标系,国际上通用的坐标系.设备一般包含GPS芯片或者北 ...
地图定义一个中间不动标注_高德地图吊打百度个性地图更新版，成为最佳分析图利器...
转自:绿变变本文已获得授权说到区位分析图,如何获取地图一直以来是大家都在讨论的问题,不单单要获取地图,还需要那种可以单独调出建筑图层,交通路网图层,绿地图层,以及各项地图中的元素,毕竟我们做前期分 ...
python做地图导航_「Python」利用高德地图做你想做之事
玩grasshopper基本上都知道OpenStreetMap 这个地图网站,毕竟有一个好用的地图插件,可以在Rhino中绘制出所需,但是一个不好的地方就在于国内的数据量太少,无法满足我们的需求. 此 ...

做一个属于自己的坐标系的高德地图（GIS）

做一个属于自己的坐标系的高德地图（GIS）相关推荐

最新文章

热门文章