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

最新推荐文章于 2024-05-29 13:39:03 发布

DebJane

最新推荐文章于 2024-05-29 13:39:03 发布

阅读量704

点赞数 1

分类专栏： openlayers 文章标签： openlayers linestring point text feature

本文链接：https://blog.csdn.net/sueRimn/article/details/100311916

版权

本文介绍如何使用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