openlayers学习笔记(十三)—异步调用JSON数据画点、文字标注与连线

本文介绍如何使用OpenLayers从本地JSON数据异步加载并绘制地图上的点、文字标注及连线。首先创建底图,然后加载数据实现地图元素的动态展示。
摘要由CSDN通过智能技术生成

使用Openlayers 3实现调用本地json数据在地图上添加点、文字标注以及连线。
在这里插入图片描述

生成底图地图

首先得有一个地图作为底图,代码如下:

let vectorSource = new ol.source.Vector({
   
            wrapX: false
        });
const rootLayer = new ol.layer.Tile({
   
     source: new ol.source.TileImage({
   
     url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
      }) //加载谷歌影像地图
});
const vectorLayer = new ol.layer.Vector({
   
     source: vectorSource
})
const center = ol.proj.fromLonLat([91.29638423, 28.90222228], 'EPSG:3857');
const map = new ol.Map({
   
      target: 'map',
      renderer: 'canvas',
      layers: [rootLay
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值