2. 程式人生 > >openlayer4入門系列一(地圖描繪經緯度點)

openlayer4入門系列一(地圖描繪經緯度點)

阿新 • • 發佈：2019-01-11
var map; var styleCache = {}; window.onload = function () { //定義地圖 map = new ol.scgcMap("map", "", { token: "", //天地圖四川服務訪問令牌，目前不需要 zoom: 6, //初始化地圖級別 center: [104.16, 30.36] //初始化地圖中心點 }); //定義圖層 var
layer = new ol.scgisTileLayer("http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/", //地圖服務地址 { token: "" //天地圖四川服務訪問令牌，目前不需要 }); //新增圖層 map.addLayer(layer); /* 下面是我後臺拿的經緯度,和地名格式如下 [{"lat":"32.54","lng":"101.42","name":"阿壩"},{"lat":"31.12","lng":"98.49","name":"白玉"},{"lat":"31.37","lng":"104.27","name":"北川"}] */
$.ajax({ type: "post", cache: false, async: true, url: "/findDataToMap", success: function (data) { datasearchcallback(data); }, error: function (err) { } }); //返回處理
function datasearchcallback(json) { json = eval(json); var vectorsource = new ol.source.Vector({}); for (var i in json) { var fea = json[i]; var geometrypt = new ol.geom.Point([fea.lng, fea.lat]); feature = new ol.Feature({geometry: geometrypt, name: fea.name}); vectorsource.addFeature(feature); // } } var datasearchVectorLayer = new ol.layer.Vector({ source: vectorsource, style: getStyle }); map.addLayer(datasearchVectorLayer); } //樣式 function getStyle(feature, resolution) { // var text = resolution < 0.0054931640625 ? feature.get('name') : ''; //根據解析度控制文字顯示級別 var text = feature.get('name'); if (!styleCache[text]) { styleCache[text] = [ new ol.style.Style({ image: new ol.style.Icon({ src: '../../static/img/marker.png' }), text: new ol.style.Text({ font: '12px Calibri,sans-serif', text: text, fill: new ol.style.Fill({ color: '#DC143C' }), stroke: new ol.style.Stroke({ color: '#fff', width: 3 }) }) })]; } return styleCache[text]; } }

相關推薦

openlayer4入門系列一(地圖描繪經緯度點)

var map; var styleCache = {}; window.onload = function () { //定義地圖 map = new ol.scgcMap("map", "", { token:

C語言高速入門系列(一)

文件鏈接 選中 點擊 轉換 border alt 空白 學習路線 主動 C語言高速入門系列(一) 本系列引言: 本教程的宗旨是將C語言入門的內容進行關鍵知識點的提純,將一些籠統的廢話去除; 再進行壓縮,然後將本章的關鍵知識點做成路線圖的,能夠更加方便地掌握學習的方

Ntaub表單開發入門系列 (一)

此係列文章通過虛構場景介紹Ntaub表格開發流程。示例假設某公司人力部門要制定招聘計劃，要求各部門按月提交招聘需求，招聘需求需經人力總監和公司總經理審批。 最終會完成的表格樣式如下圖。 1. 在目錄中新建名為“招聘計劃”的子目錄，之後新建項放在此目錄中。 2. 新建名為“招聘計劃表”

springboot2.1入門系列一

SpringBoot並不是應用伺服器，也並沒有實現各種規範，也不會自動生成程式碼。但是，SpringBoot 提供了幾個基礎而強大的功能，這裡簡單介紹兩個： 1、自動配置： 針對常見的技術和功能提供自動配置，或者簡單的個性化配置(*.properites或*.yml) 2

spring cloud 2.0 入門系列一 （10）分散式鏈路追蹤-Zipkin

服務說明 Zipkin是什麼 Zipkin分散式跟蹤系統；它可以幫助收集時間資料，解決在microservice架構下的延遲問題；它管理這些資料的收集和查詢；Zipkin的設計是基於谷歌的Google Dapper論文。 每個應用程式向Zipkin報告定時

Metasploit入門系列(一)——何為MSF

Metasploit的名字想必滲透圈子的大佬都耳熟能詳啦， 之前我也有幾次想系統性的學習一下， 然而各種安排的緣故一直沒有靜下來， 希望這一次同步記錄我的學習歷程， 也為各位想學msf的小夥伴做個反面教材， 沒辦法，我學的慢嘛。 我們現在可是一個起跑線啦~fighting！！

MongoDB入門系列(一) ===> 概念解析

學習筆記記錄, 內容出自菜鳥教程http://www.runoob.com/mongodb/mongodb-databases-documents-collections.html 文章目錄 和sql術語的對比 資料庫 常用命令

Gradle入門系列(一)——groovy基礎語法

groovy基礎語法 一、變數 1、型別 物件型別、基本型別(本質是物件型別) int x = 0 println x.class double y = 3.14 println y.class 複製程式碼 輸出： class java.lang.Integer class java.la

WPF零基礎入門系列(一) WPF簡介

WPF零基礎入門系列(一) WPF簡介 WPF（Windows Presentation Foundation）是微軟推出的基於Windows 的使用者介面框架，屬於.NET Framework 3.0的一部分。它提供了統一的程式設計模型、語言和框架，真正

spring cloud 入門系列一：初識spring cloud

最近看到微服務很火，也是未來的趨勢， 所以就去學習下，在dubbo和spring cloud之間我選擇了從spring cloud，主要有如下幾種原因： dubbo主要專注於微服務中的一個環節--服務治理，像服務註冊和發現這種還需要zookeeper第三方的中間;但是spring cloud提供了微服

Python之Windows控制元件操作系列一：模擬滑鼠點選

模擬滑鼠點選指定視窗中的指定button： import win32gui,win32api win = win32gui.FindWindow(None,DialogName) while win == 0:     win = win32gui.FindWindow(None,DialogName

spring cloud 2.0 入門系列一 （4）斷路器-Hystrix

Spring Cloud Hystrix Hystrix [hɪst’rɪks]的中文含義是豪豬, 因其背上長滿了刺,而擁有自我保護能力. Netflix的 Hystrix 是一個幫助解決分散式系統互動時超時處理和容錯的類庫, 它同樣擁有保護系統的能力.

消息隊列 RabbitMQ 準入門系列 (一）Hello, world! 消息發送

功能 src 有關 不存在 ide 依賴 生產者 消息 依然 快問快答： 1. 什麽是RabbitMQ？ message broker，消息發送的中介，提供的是消息送達的配套服務。 在郵局送信的類比例子中，RabbitMQ的角色是郵筒、郵遞員、郵局幾種功能的綜合。

百度地圖API一：根據標註點坐標範圍計算顯示縮放級別zoom自適應顯示地圖

var spa get bsp pan nts viewport 百度 getview 百度地圖中根據頁面中的point，自動設置縮放級別和視圖中心，將所有的point在視圖範圍內展示。 var points = [point1, point2,point3];

sed修煉系列(一)：花拳繡腿之入門篇

由於 ... 我會 沖突 mic 區別 comm aud 追上 本文為花拳繡腿招式入門篇，主要目的是入門，為看懂sed修煉系列(二)：武功心法做準備。雖然是入門篇，只介紹了基本工作機制以及一些選項和命令，但其中仍然包括了很多sed的工作機制細節。對比網上各sed相關文章以及

ArcGIS API for JavaScript3.x 學習筆記[3] 加載底圖（一）【天地圖（經緯度版）】

矢量地圖 說明 tiled spa 過程 相同 服務器列表 text 服務 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5

Quartz.NET開源作業調度框架系列(一):快速入門step by step-轉

rand 隨機 axis 開發人員 c# returns .net開源 觸發 mis 　Quartz.NET是一個被廣泛使用的開源作業調度框架 , 由於是用C#語言創建，可方便的用於winform和asp.net應用程序中。Quartz.NET提供了巨大的靈活性但又兼具

Android OpenGL ES 入門系列（一） --- 了解OpenGL ES的前世今生

target 初始化 vertex 單獨 http hang tex 變化 3d圖 轉載請註明出處 本文出自Hansion的博客 OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL 三維圖形 API 的子集，

反向教學系列之——PHP入門（一）

water oui 版本 名稱 令行 完全 技術 地址 安裝目錄 php是什麽？其實就是html的功能加強版。網頁本來在服務器上，如果客戶端問服務器索取網頁文件（xxx.html），那麽服務器就會把客戶端指定的網頁發回去。（根據我的理解，）php是因“表單”而誕生的，所謂表

銳捷CCNA系列(一) 聚星雲使用入門

網絡工程 銳捷 CCNA 銳捷實戰 銳捷CCNA 註冊賬號 步驟1：安裝完軟件後桌面會出現聚星雲，雙擊運行。 步驟2：註冊賬號。 申請設備 步驟3：註冊完賬號，點擊登陸進入到聚星雲實訓平臺主界面。 步驟4：點擊申請資源按鈕，申請實訓所需設備搭建拓撲。可自定義申請資源或按課程，這裏我們