openlayers與echarts3的結合使用

2021-07-27 23:16:06 字數 1481 閱讀 4099

首先在html介面上新增兩個div，乙個裝載地圖，乙個裝載**：

id="map">div>

id="chart">div>

定義style：

#map


#chart
載入地圖我就不說了，要用openlayers開始就要學會如何載入地圖。

然後是準備要顯示的資料，我們的資料很簡單

var data = [,,,,];
接下來指定圖表的配置項和資料，我們這裡配置echarts的餅狀圖,具體配置項**：

var option =  :  (%)"


},toolbox:,


magictype : ,}},


calculable: true,


series: [,


emphasis: }},


lableline: ,


emphasis: 


},data:data


}]};var chart = echarts.init(document.getelementbyid('chart'));


chart.setoption(option);
其實以上兩個步驟相信有很多人已經非常熟練了，關鍵是如何將兩個結合起來，這也是這篇博文的重點。

這裡我們將圖表作為openlayers裡的overlay疊加上去，這是一種比較傳統的方式，實際上與html要素顯示類似。

var pt = [103.980167,30.770697];


var pie = new ol.overlay();


map.addoverlay(pie);
其中position是疊加的圖表顯示的座標，positioning是將座標與圖表的對應方式，**裡的』center-center』是將其以中心點的方式將座標與圖示對應，其他的對應方式還有』bottom-left』, 『bottom-center』, 『bottom-right』, 『center-left』, 『center-center』, 『center-right』, 『top-left』, 『top-center』, 『top-right』。element是對應的html要素。

這樣我們就將openlayers與echarts相結合起來了，無圖無真相：

多提一句吧，我們把echarts加到openlayers以後又需要刪除，該怎麼刪除呢？

openlayers已經給我們提供好引數了，通過getoverlays()可以獲取到map上的所有overlays **如下

map.getoverlays().clear();

openlayers學習記錄

openlayers.util.getelement 以陣列的形式返回所有引數在document中的dom元素 openlayers.util.getelement的別名 openlayers.util.extend 目標物件，原物件 將原物件中的所有非 undefined 屬性拷貝到目標物件 包括...

Openlayers結合TopoJson的簡單使用

openlayers 6 topojson 轉換topojson的 qgis postgresql 業務需求展示乙個地區社群等界線不同年份的變換。從資料庫呼叫資料太慢 一次查詢需要2s，時間耗損在 st asgeojson函式上。若有好的方法請指出 使用geoserver發布地圖年份多 單個shp資...

openlayers 學習筆記（一）

拷貝目錄下的openlayer.js 根目錄下的lib目錄 根目錄下的img目錄到你 的scripts目錄下 當然，這個只是例子，您 的目錄結構您自己說得算，只要保證openlayers.js，lib，img在同一目錄中即可 然後，建立乙個 html作為檢視地圖的頁面。環境 geoserver1.7...